Como obter a forma de conteúdo de uma entrada?


106

Eu preciso obter uma referência para o FORM pai de um INPUT quando tenho apenas uma referência para esse INPUT. Isso é possível com JavaScript? Use jQuery se quiser.

function doSomething(element) {
    //element is input object
    //how to get reference to form?
}

Isso não funciona:

var form = $(element).parents('form:first');

alert($(form).attr("name"));

Respostas:


185

Os elementos DOM nativos que são entradas também têm um formatributo que aponta para a forma a que pertencem:

var form = element.form;
alert($(form).attr('name'));

De acordo com a w3schools , a .formpropriedade dos campos de entrada é suportada pelo IE 4.0+, Firefox 1.0+, Opera 9.0+, que são ainda mais navegadores que o jQuery garante, então você deve seguir isso.

Se fosse um tipo diferente de elemento (não um <input>), você poderia encontrar o pai mais próximo com closest:

var $form = $(element).closest('form');
alert($form.attr('name'));

Além disso, consulte este link MDN na formpropriedade de HTMLInputElement:


Tudo bem, isso funciona .. Sobre o atributo de formulário. Acabei de experimentar e também funciona. Mas isso não é compatível com os navegadores, você está dizendo?
Ropstah

Tenho certeza que sim. Não estou 100% certo, então não quero prometer nada. Estou investigando agora ...
Paolo Bergantino

5
Use element.form - funcionará em mais navegadores do que o jQuery. É também uma referência de propriedade, portanto, será cerca de mil vezes mais eficiente do que subir na árvore DOM com mais próximo ().
NickFitz

1
Concordo. Como eu disse, inicialmente não tinha certeza se a propriedade do formulário foi amplamente implementada em todos os navegadores comuns. Editei minha resposta para listar de forma mais explícita esta como a melhor opção enquanto estou deixando o mais próximo como um boato, se este for um tipo diferente de elemento.
Paolo Bergantino

Parece funcionar também com outros tipos de entrada como select. Bom saber.
Falk

42

Cada entrada tem uma formpropriedade que aponta para a forma à qual a entrada pertence, então simplesmente:

function doSomething(element) {
  var form = element.form;
}

4

Eu uso um pouco de jQuery e javascript de estilo antigo - menos código

$($(this)[0].form) 

Esta é uma referência completa ao formulário que contém o elemento


3
Você está basicamente dizendo "torne isso um objeto jQuery e depois torne-o não um objeto jQuery".
Isherwood

1
Nossa, por que não apenas fazendo $(this.form)?
André Figueiredo

3

Usando jQuery :

function doSomething(element) {
    var form = $(element).closest("form").get().
    //do something with the form.
}

2

Se estiver usando jQuery e tiver um identificador para qualquer elemento de formulário, você precisa obter (0) o elemento antes de usar .form

var my_form = $('input[name=first_name]').get(0).form;

2
function doSomething(element) {
  var form = element.form;
}

e no html, você precisa encontrar esse elemento e adicionar o atributo "formulário" para se conectar a esse formulário, consulte http://www.w3schools.com/tags/att_input_form.asp, mas este atributo não suporte IE , por exemplo, você precisa passar o id do formulário diretamente.


2

Eu precisava usar em element.attr('form')vez de element.form.

Eu uso o Firefox no Fedora 12.


0

simplesmente como:

alert( $(this.form).attr('name') );

0

E mais um....

var _e = $(e.target); // e being the event triggered
var element = _e.parent(); // the element the event was triggered on
console.log("_E " + element.context); // [object HTMLInputElement]
console.log("_E FORM " + element.context.form); // [object HTMLFormElement]
console.log("_E FORM " + element.context.form.id); // form id

0

Este exemplo de uma função Javascript é chamado por um ouvinte de evento para identificar o formulário

function submitUpdate(event) {
    trigger_field = document.getElementById(event.target.id);
    trigger_form = trigger_field.form;

-2

isso funcionaria? (deixar a ação em branco também envia o formulário para si mesmo, certo?)

<form action="">
<select name="memberid" onchange="this.form.submit();">
<option value="1">member 1</option>
<option value="2">member 2</option>
</select>

"this" seria o elemento select, .form seria seu formulário pai. Certo?

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.