Cause a .change () to fire when 2 inputs were modified

3

The problem I have is that I want an update to be made when I modify two fields of the text box type for it. I have a function that takes both IDs and when I detect the change, call a function:

$(document).ready(function miFuncion() {

    let status_usuario = false;

    let status_correo = false;


function _sumbitForm() {

    if ( status_correo==true && status_usuario==true)
    {
      alert('Formulario usuario con correo!');

        $("#actualizar").prop("method", "post");

    }


  if ( status_correo==false && status_usuario==true )
    {
      alert('Actualizar usuario');

        $("#actualizar").prop("method", "post");

        $("#emailA").prop("name", "emailNo");
    }



 if (status_correo==true && status_usuario==false )
    {
      //alert('Formulario Enviado!');

        $("#actualizar").prop("method", "post");
           $("#usuario").prop("name", "usuarioNo");
    }


  $('#usuario , #emailA').change(function() {

    status_correo=true;
    status_usuario = true;
      _sumbitForm();

  });


 $('#usuario').change(function() {
    status_usuario = true;

      _sumbitForm();

  });

 $('#emailA').change(function() {
    status_correo = true;
      _sumbitForm();

  });


}

The bad thing is that I always take the first conditioner of the changes osea

this:

$('#usuario , #emailA').change(function() {

    status_correo=true;
    status_usuario = true;

    _sumbitForm();

});

On the one hand, it is fine when both the user and the email are modified in the same registry but if only the user or the email is modified it keeps on leading me to that same change when I want Go to the respective change where only the user or email is modified

I would like to know if there is a way to alter this

$('#usuario , #emailA').change(function() {

Since I guess you are taking me if there is a change in user or email enter the function when I want to say if there is a change in user and email that enters

I guess this statement should be different:

$('#usuario , #emailA')

Please urgently help I can not get out of this problem.

Thanks for the help Diego Dam event onchange to the text boxes?
I do not understand what you mean.

I always get into the first condition of change

$('#usuario, #emailA').change(function() {   
  status_correo=true;
  status_usuario = true;
  _sumbitForm();
});

What I want is that if only one parameter is changed I enter the other conditioner, for example, user when making a change only in the user, take me this one.

$('#usuario').change(function() {
  status_usuario = true;
  _sumbitForm();
}); 

Just enter the condition mentioned above $('#usuario , #emailA').change(function() { , please help.

    
asked by Pablo Andrez Siguenza 04.04.2018 в 00:46
source

2 answers

2

In order for your code to work, you will have to make some changes. In this case, just adding the onchange event to the text boxes is enough. It's just a matter of accommodating javascript functions so they run fine. I'll send you an example code of how it would look.

<script type="text/javascript">
    let status_usuario = false;
    let status_correo = false;
    $(document).ready(function($) {

        $('#usuario').change(function() {
            status_usuario = true;
            _sumbitForm();
        });

        $('#emailA').change(function() {
            status_correo = true;
            _sumbitForm();
        });

    });

    function _sumbitForm() {

        if ( status_correo==true && status_usuario==true) {
            alert('Formulario usuario con correo enviado!');
            $("#actualizar").prop("method", "post");
        }


        if ( status_correo==false && status_usuario==true ) {
            alert('Actualizar Correo');

            $("#actualizar").prop("method", "post");
            $("#emailA").prop("name", "emailNo");
        }

        if (status_correo==true && status_usuario==false ) {
            alert('Actualizar Usuario');

            $("#actualizar").prop("method", "post");
            $("#usuario").prop("name", "usuarioNo");
        }


    } //_sumbitForm
</script>
    
answered by 04.04.2018 в 01:12
1

This is a concept error about how events work in JavaScript and jQuery. Let's analyze the code you have right now (simplifying it a bit):

// quieres que esto se ejecute cuando ambos input, #usuario y #emailA, cambien
$('#usuario , #emailA').change(function() {
  status_correo = true;
  status_usuario = true;
  _sumbitForm();
});

// quieres que esto se ejecute cuando #usuario cambie
$('#usuario').change(function() {
  status_usuario = true;
  _sumbitForm();
});

// quieres que esto se ejecute cuando #emailA cambie
$('#emailA').change(function() {
  status_correo = true;
  _sumbitForm();
});

The problem is that association of events is individual and not collective. So when you do $('#usuario , #emailA').change(...) , what you are doing is to associate the same action for the event change to the two elements indicated in the selector individually. That action will be executed when the event occurs for one of those elements and not when the event occurs for both.

This is important because as soon as you change the value of #usuario or #emailA (only one), making status_correo = true; and status_usuario = true; is as if you had both changed in your system (even if you only changed one of them).

Then what you should do is

$('#usuario , #emailA').change(function() {
  // solo ejecutar si ambos input han sido modificados
  if (status_correo && status_usuario) {
    // realizar acciones
  }
});

Now, the order of events and their controllers is important. The event handlers will be executed in the same order in which they were associated. So it is key that the controller that you just modified is moved after the other two (so that the values of status_correo and status_usuario are updated before checking them).

With what in the end you should have something like this:

$('#usuario').change(function() {
  status_usuario = true;
  _sumbitForm();
});

$('#emailA').change(function() {
  status_correo = true;
  _sumbitForm();
});

$('#usuario , #emailA').change(function() {
  // solo ejecutar si ambos input han sido modificados
  if (status_correo && status_usuario) {
    // realizar acciones
  }
});

Here is a demo (with the contents of the simulated event handlers) showing how the last controller only executes when the two input have been modified:

var status_correo = false;
var status_usuario = false;

$('#usuario').change(function() {
  status_usuario = true;
  console.log("#usuario modificado");
});

$('#emailA').change(function() {
  status_correo = true;
  console.log("#email modificado");
});

$('#usuario , #emailA').change(function() {
  // solo ejecutar si ambos input han sido modificados
  if (status_correo && status_usuario) {
    console.log("ambos se modificaron! realizar acción conjunta");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="usuario">
  <option>Elige una opción</option>
  <option>Usuario A</option>
  <option>Usuario B</option>
  <option>Usuario C</option>
</select>

<select id="emailA">
  <option>Elige una email</option>
  <option>GMail</option>
  <option>Hotmail</option>
  <option>Yahoo!</option>
</select>
    
answered by 06.04.2018 в 03:29