Estoy tratando de obtener el valor de input desde dentro de un div mycontainer cuando se hace clic en un div Click Me.
Solo quiero que suceda si la entrada es un tipo de password , tengo esto hasta ahora...
function myFunction(el) { theInput = $(el).closest("input type=['password]").value(); console.log(theInput); } .mycontainer { display: flex; padding: 10px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="mycontainer"> <input type="text" value="myinput1"> <div onclick="myFunction(this)">Click Me</div> </div> <div class="mycontainer"> <input type="password" value="myinput2"> <div onclick="myFunction(this)">Click Me</div> </div> <div class="mycontainer"> <input type="number" value="22"> <div onclick="myFunction(this)">Click Me</div> </div> <div class="mycontainer"> <input type="password" value="myinput4"> <div onclick="myFunction(this)">Click Me</div> </div>Esto arroja un error cada vez que hago clic en algo, ¿dónde me equivoco?
Tienes varios problemas en tu código. Primero usted está buscando a un padre. La entrada no es un padre, es un hermano. Entonces, puede buscar un padre común con el closest() y luego buscar la entrada con find() , puede usar siblings() , o puede usar prev()
Segundo, su selector para encontrar una entrada por atributo es incorrecto. El paréntesis debe estar alrededor de todo el atributo, no del valor.
Tercero, no hay .value() en jQuery
function myFunction(el) { const theInput = $(el).closest(".mycontainer").find('input[type="password"]'); if (theInput.length) { console.log(theInput.val()); } // other ways to reference the input console.log($(el).siblings('input[type="password"]').val()); console.log($(el).prev('input[type="password"]').val()); } .mycontainer { display: flex; padding: 10px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="mycontainer"> <input type="text" value="myinput1"> <div onclick="myFunction(this)">Click Me</div> </div> <div class="mycontainer"> <input type="password" value="myinput2"> <div onclick="myFunction(this)">Click Me</div> </div> <div class="mycontainer"> <input type="number" value="22"> <div onclick="myFunction(this)">Click Me</div> </div> <div class="mycontainer"> <input type="password" value="myinput4"> <div onclick="myFunction(this)">Click Me</div> </div>Tienes algunos problemas en tu código:
Su selector no es correcto. Primero debe apuntar al elemento más cercano con la clase mycontainer y encontrar el elemento de contraseña a partir de ahí. Dado que el selector de atributo y el elemento de entrada son iguales, no debe haber ningún espacio entre ellos, también el atributo ( type ) debe estar dentro de [] .
Está intentando acceder al valor usando value() en un elemento de referencia jQuery (no un método jQuery), debe usar val()
function myFunction(el) { var theInput = $(el).closest(".mycontainer").find("input[type=password]").val(); console.log(theInput); } .mycontainer { display: flex; padding: 10px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="mycontainer"> <input type="text" value="myinput1"> <div onclick="myFunction(this)">Click Me</div> </div> <div class="mycontainer"> <input type="password" value="myinput2"> <div onclick="myFunction(this)">Click Me</div> </div> <div class="mycontainer"> <input type="number" value="22"> <div onclick="myFunction(this)">Click Me</div> </div> <div class="mycontainer"> <input type="password" value="myinput4"> <div onclick="myFunction(this)">Click Me</div> </div>