jQuery encuentra formulario padre


219

tengo este html

<ul>
    <li><form action="#" name="formName"></li>
    <li><input type="text" name="someName" /></li>
    <li><input type="text" name="someOtherName" /></li>
    <li><input type="submit" name="submitButton" value="send"></li>
    <li></form></li>
</ul>

¿Cómo puedo seleccionar el formulario del que input[name="submitButton"]forma parte? (Cuando hago clic en el botón Enviar quiero seleccionar el formulario y agregar algunos campos en él)

Respuestas:


485

Sugeriría usar closest, que selecciona el elemento principal coincidente más cercano:

$('input[name="submitButton"]').closest("form");

En lugar de filtrar por el nombre, haría esto:

$('input[type=submit]').closest("form");

2
¿Podríamos agregar agregando por índice? '$ ("input [type = submit]") .arest ("formulario");' devuelve una matriz de formas.
sergzach

Estoy tratando de usar lo anterior de esta manera: $ (". Each img"). Click (function () {$ (this) .closest ("form"). Show ();}); Pero parece que no puedo hacer que funcione. : /
Alisso

2
La respuesta de PeterJwest es mejor que esta.
gagarine

En HTML5, hay un nuevo atributo 'formulario' que le permite tener el elemento fuera del formulario principal. Esto debe verificarse primero.
mcintyre321

56

Puede usar la referencia de formulario que existe en todas las entradas, esto es mucho más rápido que .closest()(5-10 veces más rápido en Chrome e IE8). Funciona también en IE6 y 7.

var input = $('input[type=submit]');
var form = input.length > 0 ? $(input[0].form) : $();

2
Mencionas IE8. ¿Funciona esto también para las versiones 6, 7 y 9?
Sonny

1
Esto es mucho mejor y más rápido como lo mencionó @peterjwest. Re IE6 creo que .form en los elementos de entrada estaba en IE4, desafortunadamente la página de desarrollo de netscape se ha ido ahora ... y quién verificaría uno de Mozilla.
Maciej Łopaciński

Esta es una forma mucho más segura en lugar de usar, closest()ya que una entrada puede tener una asignación de formulario propia: codepen.io/anon/pen/vNqEyg
Möhre

Probablemente usó la notación abreviada if para mantener su código corto, pero en este ejemplo solo distrae del código real que desea mostrar (especialmente para personas que no están familiarizadas con la taquigrafía). Estaría a favor de usar un if () regular.
AeonOfTime

Yo diría que hay demasiada confusión con esa solución. Si sigue con esto (mi solución a continuación, sí, este es un anuncio :)): stackoverflow.com/a/18921404/261332 , entonces no necesita ese tipo de complicaciones, ya que simplemente funcionará cuando se supone que debe hacerlo y no hagas nada de otra manera.
userfuser

17

Para mí, esto parece el más simple / rápido:

$('form input[type=submit]').click(function() { // attach the listener to your button
   var yourWantedObjectIsHere = $(this.form);   // use the native JS object with `this`
});

2
Para mí, usar $(this.form)es la mejor solución
jap1968

2

A partir de los navegadores HTML5 que se pueden usar inputElement.form, el valor del atributo debe ser la identificación de un <form>elemento en el mismo documento. Más información sobre MDN .


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.