Foro de elhacker.net

Buenos días,

tengo un formulario ("id_form") en el cual tengo 2 inputs uno que tiene name="username" y name="pass"

        $('#id_form').on('change',function() // detecto si se produjo un cambio en el formulario entero
        {
            if(id_form.input_username.onchange) // quiero que si el cambio se produjo en el input username
            {
                alert('1');
            }
            else if(id_form.input_pass.onchange) // quiero que si el cambio se produjo en el input pass
            {
                alert('2');
            }
        });
 

Como esta el código no da errores pero tampoco sirve, no hace nada.
Probé de otras maneras pero tampoco me servían porque me daban errores, quiero hacerlo de esta manera para no tener que estar poniendo una id="" a cada campo o un onchange, es muy tedioso y prefiero hacerlo así...

El elemento que dispara el evento se encuentra ubicado en la propiedad target del objeto de evento que por lo general (sino es que siempre) es pasado como primer argumento al listener.

$('#id_form').on('change',function(e){
...
});

Puedes simplemente comparar si el target es el elemento que estás buscando:

$('#id_form').on('change',function(e){
    if($('#input_username').is(e.target)){
 
    }
    else if($('#input_pass').is(e.target)) {
 
    }
});

Edit: Todavía tienes que poner un id o una clase para seleccionar esos campos. Podrías hacerlo también por indice pero es preferible poner alguna clase de identificador.

Saludos,

- Cierto, pero él no quiere usar ID XD. En ese caso comprueba la propiedad/atributo name directamente, a mi me funciona lo siguiente:

<script src="jquery-3.4.1.js"></script>
 
<form id="id_form">
  <input type="text" name="username">
  <input type="password" name="pass">
</form>
 
<script>
  $("#id_form").change(function(e) {
    if ( e.target.name === "username" ) {
      console.log("username change");
    } else if ( e.target.name === "pass" ) {
      console.log("password change");
    }
  });
</script>

- Sin embargo aclarar los ShortCuts, por ejemplo:
$(document).ready(function(){...}) es lo mismo que $(function(){...}) y
$("css_selector").on("event", function(){...}) es lo mismo que $("css_selector").event(function(){...}). En la documentación de jQuery se ve todo esto y lo normal es ver los ShortCuts ya que jQuery es para escribir menos.

- También habría que considerar de que el evento change se dispara solo cuando se pierde el foco (onblur) del elemento, en este caso el input type="text" o "password", puedes usar el código que puse antes para probarlo y ver que sucede teniendo la consola abierta al costado por supuesto.

O.O WOAO lo acabo de hacer me leiste la mente jaja

            if($('input[name=input_email]').is(e.target))
            {
                alert('input_email');
            }
            else if($('input[name=input_password]').is(e.target))
            {
                alert('input_password');
            }
 

¡Muchas gracias a los dos!