2010-12-13 4 views
30
function getInputElements() { 
    var inputs = document.getElementsByTagName("input"); 
} 

Le code ci-dessus obtient tous les éléments input sur une page qui a plus d'un formulaire. Comment puis-je obtenir les éléments input d'un formulaire particulier en utilisant JavaScript simple?obtenir tous les éléments d'un formulaire particulier

Répondre

11
document.forms["form_name"].getElementsByTagName("input"); 
+36

tant qu'il n'y a pas de sélectionner ou textareas ;-) – Gurnard

+0

Pouvez-vous le montrer dans un cas d'utilisation avec l'application de plusieurs entrées avec des valeurs qu'il est saisissant? –

+0

Je préfère 'document.forms [" nom_formulaire "]. GetElementByClassName (" myClass ")' –

3
var inputs = document.getElementById("formId").getElementsByTagName("input"); 
var inputs = document.forms[1].getElementsByTagName("input"); 
0

Comment voulez-vous faire la différence entre les formes? Vous pouvez utiliser des ID, puis utilisez cette fonction:

function getInputElements(formId) { 
    var form = document.getElementById(formId); 
    if (form === null) { 
     return null; 
    } 
    return form.getElementsByTagName('input'); 
} 
79
document.getElementById("someFormId").elements; 

Cette collection contient également <select> éléments, mais vous voulez probablement.

+0

Il semble que document.getElementById ("someFormId") fonctionne également. Une raison particulière pour ajouter .elements à la fin? – Andrew

+2

@Andrew: Mon intention était que "someFormId" est l'ID d'un élément '

', pas une entrée. 'elements' est une propriété d'un élément de formulaire; c'est une collection d'éléments dans le formulaire. Voir https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement.elements –

+1

> ok, je comprends ce que .elements est. Alors devrais-je l'utiliser, si cela fonctionne même sans elle? Peut-être que l'ajout de .elements sélectionne moins de nœuds et donc vous obtenez de meilleures performances? – Andrew

7

Il est également possible d'utiliser ceci:

var user_name = document.forms[0].elements[0]; 
var user_email = document.forms[0].elements[1]; 
var user_message = document.forms[0].elements[2]; 

Tous les éléments de formulaires sont stockés dans un tableau en Javascript. Cela prend les éléments du premier formulaire et stocke chaque valeur dans une variable unique.

13

Vous vous concentrez tous sur le mot «obtenir» dans la question. Essayez la propriété 'elements' de n'importe quelle forme qui est une collection que vous pouvez itérer, c'est-à-dire que vous écrivez votre propre fonction 'get'.

Exemple:

function getFormElelemets(formName){ 
    var elements = document.forms[formName].elements; 
    for (i=0; i<elements.length; i++){ 
    some code... 
    } 
} 

espoir qui aide.

4

SIMPLE Code formulaire

<form id="myForm" name="myForm"> 
     <input type="text" name="User" value="Arsalan"/> 
     <input type="password" name="pass" value="123"/> 
     <input type="number" name="age" value="24"/> 
     <input type="text" name="email" value="[email protected]"/> 
     <textarea name="message">Enter Your Message Her</textarea> 

    </form> 

code Javascript

//Assign Form by Id to a Variabe 
    var myForm = document.getElementById("myForm"); 
    //Extract Each Element Value 
    for (var i = 0; i < myForm.elements.length; i++) { 
    console.log(myForm.elements[i].value); 
    } 

jsFiddle: http://jsfiddle.net/rng0hpss/

+0

Je pense, cela va renvoyer divs, traves aussi .. – Stranger

+0

il reviendra [tableau d'éléments 'input'] (https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements), sauf 'type =" image "' – Mike

3

Utilisez cette

var theForm = document.forms['formname'] 
[].slice.call(theForm).forEach(function (el, i) { 
    console.log(el.value); 
}); 

Le el représente le particulier élément de formulaire. Il vaut mieux l'utiliser que la boucle foreach, car la boucle foreach renvoie également une fonction comme élément de l'élément. Cependant, cela ne renvoie que les éléments DOM du formulaire.

1

Si vous avez une référence à un champ dans le formulaire ou un événement, vous n'avez pas besoin de rechercher explicitement le formulaire car chaque champ de formulaire a un attribut form qui pointe vers son formulaire parent.

Si vous avez un événement, il contiendra un attribut target qui pointe vers le champ de formulaire qui l'a déclenché, ce qui signifie que vous pouvez accéder au formulaire via myEvent.target.form.

Voici un exemple sans aucun code de recherche de formulaire.

<html> 
<body> 
    <form name="frm"> 
     <input type="text" name="login"><br/> 
     <input type="password" name="password"><br/> 
     <button type="submit" onclick="doLogin()">Login</button> 
    </form> 
    <script> 
     function doLogin(e) { 
      e = e || window.event; 
      e.preventDefault(); 
      var form = e.target.form; 
      alert("user:" + form.login.value + " password:" + form.password.value); 
     } 
    </script> 
</body> 
</html> 

Si vous avez plusieurs formulaires sur la page que vous n'avez pas encore besoin de les étiqueter par nom ou identifiant, parce que vous aurez toujours l'instance de forme correcte par l'événement ou par une référence à un champ.

Questions connexes