jQuery encontrar formulário pai

219

eu tenho esse 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>

Como posso selecionar o formulário do qual input[name="submitButton"]faz parte? (quando clico no botão enviar, desejo selecionar o formulário e anexar alguns campos)

kmunky
fonte

Respostas:

485

Eu sugeriria usar closest, que seleciona o elemento pai correspondente mais próximo:

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

Em vez de filtrar pelo nome, eu faria o seguinte:

$('input[type=submit]').closest("form");
karim79
fonte
2
Pode ser que devemos adicionar obtendo por índice? '$ ("input [type = submit]"). closest ("formulário");' retorna uma matriz de formulários.
Sergzach 22/05/12
Estou tentando usar o exposto desta maneira: $ (". Each img"). Click (function () {$ (this) .closest ("form"). Show ();}); Mas não consigo fazê-lo funcionar. : /
Alisso
2
A resposta peterjwest é melhor que essa.
Gagarine
No HTML5, existe um novo atributo 'form' que permite que você tenha o elemento fora do formulário pai. Isso deve ser verificado primeiro.
Mctyre321
56

Você pode usar a referência de formulário existente em todas as entradas. Isso é muito mais rápido que .closest()(5 a 10 vezes mais rápido no Chrome e IE8). Também funciona no IE6 e 7.

var input = $('input[type=submit]');
var form = input.length > 0 ? $(input[0].form) : $();
peterjwest
fonte
2
Você mencionou o IE8. Isso funciona para as versões 6, 7 e 9 também?
Sonny
1
Isso é muito melhor e mais rápido, como o @peterjwest mencionou. No IE6, acho que .form nos elementos de entrada estava no IE4, infelizmente a página de desenvolvimento do netscape se foi agora ... e quem iria verificar o mozilla.
Maciej Łopaciński
Esta é uma maneira muito mais segura ao invés de usar closest()uma vez que uma entrada pode ter uma própria atribuição forma: codepen.io/anon/pen/vNqEyg
Möhre
Você provavelmente usou a notação taquigrafia para manter seu código curto, mas neste exemplo ele apenas distrai o código real que você deseja mostrar (especialmente para pessoas não familiarizadas com a taquigrafia). Eu seria a favor do uso regular de um if ().
AeonOfTime 04/12/2015
Eu diria que há muita confusão com essa solução. Se você optar por isso (minha solução abaixo - sim, este é um anúncio :)): stackoverflow.com/a/18921404/261332 , não será necessário esse tipo de complicação, pois funcionará quando for necessário e não faça nada de outra maneira.
Userfuser
17

Para mim, isso parece o mais simples / mais 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`
});
userfuser
fonte
2
Para mim, usando $(this.form)é a melhor solução
jap1968
2

Como nos navegadores HTML5, é possível usar inputElement.form- o valor do atributo deve ser o ID de um <form>elemento no mesmo documento. Mais informações sobre MDN .

Alexander Mihailov
fonte