3

El problema que tengo es que quiero que se realice una actualización cuando modifico dos campos del tipo caja de texto para ello eh echo una función que me coja los dos ID y el momento que me detecte el cambio llame a una función:

$(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();

  });


}

Lo Malo es que me coje siempre la primera condicionante de los changes osea

esta:

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

    status_correo=true;
    status_usuario = true;

    _sumbitForm();

});

Por una parte esta bien cuando se modifica tanto el usuario como el email en el mismo registro pero si se modifica solo el usuario o el email me sigue llevando a ese mismo change cuando quiero que vaya al respectivo change donde se aya modificado solo el usuario o email

quisiera saber si existe una forma de alterar esto

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

ya que supongo que me esta cogiendo si existe un cambio en usuario o email entra a la funcion cuando quiero que diga si existe un cambio en usuario y email que entre

supongo que esta declaración debe ser diferente:

$('#usuario , #emailA')

Por favor ayuda de urgencia no puedo salir de este problema.


Gracias por la ayuda Diego Dam evento onchange a las cajas de texto?
no entiendo aque te refieres.

Siempre me entra a la primera condicionante del change

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

Lo que quiero es que si se cambia solo un parámetro me entre al otro condicionante por ejemplo usuario al hacer un cambio solo en usuario me coja este.

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

Sólo entre en el condicionante antes expuesto $('#usuario , #emailA').change(function() {, por favor ayuda.

6
  • Creo que si publicaras tu HTML seria de mucha ayuda.
    – alanfcm
    Commented el 3 abr. 2018 a las 22:58
  • Apoyo el comentario de @alanfcm, si nos proporcionas el HTML podría ser más fácil el comprender tu problema. Commented el 3 abr. 2018 a las 23:03
  • No termino de entender qué es lo que quieres. Tienes 3 controladores de change: uno asociado a dos elementos a la vez, y luego otro por cada uno de esos elementos. El primero (el que tiene los dos elementos) es defectuoso y el que causa todo el lío y además es redundante por los otros dos que le siguen, ¿por qué no eliminarlo directamente para solucionar el problema? (esto es lo que te sugiere Diego Dam en su respuesta, me acabo de dar cuenta)
    – Alvaro Montoro
    Commented el 4 abr. 2018 a las 3:43
  • Releyendo tu pregunta, ¿lo que quieres es tener un evento que se ejecute cuando otros dos eventos diferentes hayan ocurrido? Es decir, después de que cambien #emailA y #usuario, que se lance un nuevo evento (independiente de los eventos individuales). ¿He comprendido bien o no es eso?
    – Alvaro Montoro
    Commented el 4 abr. 2018 a las 3:57
  • Alvaro Montoro requiero que cuando se cambie solo el usuario se ejecute el el change que solo tenga el cambio de Usuario y cuando se realize cambio de los dos elementos usuario y correo se ejecute el otro change que contienen los dos ahi una forma de que esto $('#usuario, #emailA').change(function() se cambie la forma de llamar del dom ya que la coma "," hace que me coja estos dos valores (#usuario, #emailA) ya que parece que esto me dice si usuario o email cambia entre aqui no ahi una forma de modificar el DOM para que me coja un condicionante que tanto usuario y correo cambien a la vez Commented el 4 abr. 2018 a las 22:36

2 respuestas 2

2

Para que pueda funcionar tu código tendrás que realizar algunas modificaciones. En este caso con solo agregar el evento onchange a las cajas de texto es suficiente. Solo es cuestión de acomodar la funciones de javascript para que se ejecuten bien. Te envío un código de ejemplo de cómo quedaría.

<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>
0
1

Esto es un error de concepto sobre cómo funcionan los eventos en JavaScript y en jQuery. Vamos a analizar el código que tienes ahora mismo (simplificándolo un poco):

// 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();
});

El problema es que asociación de eventos es individual y no colectiva. Entonces cuando haces $('#usuario , #emailA').change(...), lo que se está haciendo es asociar la misma acción para el evento change a los dos elementos indicados en el selector de manera individual. Esa acción se ejecutará cuando ocurra el evento para uno de esos elementos y no cuando el evento ocurra para ambos.

Esto es importante porque en cuanto cambies el valor de #usuario o #emailA (sólo uno), al hacer status_correo = true; y status_usuario = true; es como si hubieras cambiado ambos en tu sistema (aunque sólo hayas cambiado uno de ellos).

Entonces lo que tendrías que hacer es

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

Ahora, el orden de los eventos y sus controladores es importante. Los controladores de evento se van a ejecutar en el mismo orden en el que se asociaron. Entonces es clave que ese controlador que acabas de modificar se mueva a después de los otros dos (para que se actualicen los valores de status_correo y status_usuario antes de comprobarlos).

Con lo que al final tendrías que tener algo como esto:

$('#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
  }
});

Aquí te dejo una demo (con el contenido de los controladores de evento simulados) donde se ve cómo el último controlador sólo se ejecuta cuando los dos input han sido modificados:

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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.