Comment obtenir le formulaire contenant une entrée?


106

J'ai besoin d'obtenir une référence au parent FORM d'une INPUT lorsque je n'ai qu'une référence à cette INPUT. Est-ce possible avec JavaScript? Utilisez jQuery si vous le souhaitez.

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

Cela ne fonctionne pas:

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

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

Réponses:


185

Les éléments DOM natifs qui sont des entrées ont également un formattribut qui pointe vers la forme à laquelle ils appartiennent:

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

Selon w3schools , la .formpropriété des champs de saisie est prise en charge par IE 4.0+, Firefox 1.0+, Opera 9.0+, qui sont encore plus de navigateurs que jQuery garantit, vous devez donc vous en tenir à cela.

S'il s'agissait d'un autre type d'élément (et non d'un <input>), vous pourriez trouver le parent le plus proche avec closest:

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

Voir également ce lien MDN sur la formpropriété de HTMLInputElement:


Très bien, cela fonctionne. À propos de l'attribut de formulaire. Je viens de l'essayer et cela fonctionne aussi. Mais cela n'est pas pris en charge dans les navigateurs que vous dites?
Ropstah

J'en suis presque sûr. Je ne suis pas sûr à 100%, donc je ne veux rien promettre. Je suis à la recherche en ce moment ...
Paolo Bergantino

5
Utilisez element.form - cela fonctionnera sur plus de navigateurs que jQuery. C'est aussi une référence de propriété, ce sera donc environ mille fois plus efficace que de remonter l'arborescence DOM avec le plus proche ().
NickFitz

1
Je suis d'accord. Comme je l'ai dit, je n'étais tout simplement pas sûr au départ si la propriété form était largement implémentée dans tous les navigateurs courants. J'ai modifié ma réponse pour répertorier plus explicitement cela comme la meilleure option pendant que je laisse le plus proche comme une friandise s'il s'agissait d'un type d'élément différent.
Paolo Bergantino

Il semble fonctionner également avec d'autres types d'entrée comme select. Bon à savoir.
Falk

42

Chaque entrée a une formpropriété qui pointe vers la forme à laquelle l'entrée appartient, donc simplement:

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

4

J'utilise un peu de jQuery et de javascript à l'ancienne - moins de code

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

Ceci est une référence complète au formulaire contenant l'élément


3
Vous dites essentiellement "faites-en un objet jQuery et ensuite n'en faites pas un objet jQuery".
isherwood

1
geez, pourquoi ne pas simplement faire $(this.form)?
Andre Figueiredo

3

Utilisation de jQuery :

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

2

Si vous utilisez jQuery et avez un handle vers n'importe quel élément de formulaire, vous devez obtenir (0) l'élément avant d'utiliser .form

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

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

et dans le html, vous devez trouver cet élément et ajouter l'attribut «formulaire» pour vous connecter à ce formulaire, veuillez vous référer à http://www.w3schools.com/tags/att_input_form.asp mais ce formulaire attr ne le fait pas support IE , par exemple, vous devez passer l'identifiant du formulaire directement.


2

J'avais besoin d'utiliser element.attr('form')au lieu de element.form.

J'utilise Firefox sur Fedora 12.


0

simplement comme:

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

0

Et encore un ...

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

Cet exemple de fonction Javascript est appelé par un écouteur d'événements pour identifier le formulaire

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

-2

cela fonctionnerait-il? (laisser l'action vide renvoie le formulaire à lui-même, non?)

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

"this" serait l'élément select, .form serait sa forme parent. Droite?

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.