How to apply the same action to two different elements by jquery? [.Click]

Question

How to apply the same action to two different elements by jquery? [.Click]

Navigation

#1 by (1 votes)

0

I would like to apply a reset action to the fields of my form and I would like it when canceling the "x" span to return the border originate if it closes or cancels it with errors. Currently I only work with the "x" closing, if you do the reset but I want not only with span but with buttons work.

Current Code:

$('span').click(function (event) {
    $('#selCertificacionP option').remove();
    $('#selCertificacion option').remove();
    $("#txtNombreP").css("border-color", "white");
    $("#txtRFCP").css("border-color", "white");
    $("#txtDireccionP").css("border-color", "white");
    $("#txtColoniaP").css("border-color", "white");
    $("#txtCiudadP").css("border-color", "white");
    $("#txtEstadoP").css("border-color", "white");
    $("#txtPaisP").css("border-color", "white");
    $("#txtCodigoP").css("border-color", "white");
    $("#txtTelefonoP").css("border-color", "white");
    $("#selCertificacionP").css("border-color", "white");
    $("#txtFolioP").css("border-color", "white");
    $("#txtFecInicioP").css("border-color", "white");
    $("#txtFecFinP").css("border-color", "white");
});

I would like to pass two paramters or three parameters to the .click de jquery event, so that from there it is applied to the button or any element that I decide.

javascript jquery

asked by David 21.02.2017 в 23:25

source

1 answer

Increase correlative with an insert Array foreach and MYSQL query with php

score 1 · Answer 1

Hi, I advise you to use a class css parent in the form.

Let's say we have this in html:

 <form id="miFormulario" class=""> 
   <input type="text" placheholder="campo 1"/>
   <input type="text" placheholder="campo 2" />
   <button onclick="resetearFormulario()" >Resetear</button> 
 </form>

Now we want to give it a different look if we have to write so much jquery. In addition we separate css code from javascript. We can play with the class values of the form.

In our style sheet we would have:

#miFormulario.fill input{} /* aplica a todos los inputs */
#miFormulario.fill textarea{} /* aplica a todos los textarea*/

#miFormulario.clean input{} /* aplica a todos los inputs */
#miFormulario.clean textarea{} /* aplica a todos los textarea*/

We would do something similar to this in javascript:

<script>
   function resetearFormulario(){
      $('#miFormulario')[0].reset();//reseteamos 

      $('#miFormulario').attr('class','clean');
      /* se puede hacer de muchas formas por ejemplo
      $('#miFormulario').removeClass('fill').addClass('clean');  
      */
   }
</script>

We will automatically be resetting the form and applying the corresponding styles.

You can also use the selection operator "," in this way:

$('span').click(function (event) {
  $('#selCertificacionP option,#selCertificacion option').remove(); 
  $("#txtNombreP,#txtRFCP,#txtDireccionP,#txtColoniaP,#txtCiudadP,#txtEstadoP,#txtPaisP,#txtCodigoP,#txtTelefonoP,#selCertificacionP,#txtFolioP,#txtFecInicioP,#txtFecFinP").css("border-color", "white");

});

But I advise against it, create ids because it is not a good idea, use a class, like this:

$('span').click(function(){
 $('.myselects option').remove();
 $('.myInputs').css('border-color','white');
});

Your question is very wide since it has many possible solutions, but it is always better to delegate to each thing its work, to use a css class with the style to be applied is usually the most optimal and reusable.

Greetings