2010-11-27 5 views
53

Existe-t-il des moyens de remplir toutes les entrées d'un certain formulaire? laisser dire, quelque chose comme ceci:jquery obtenir toutes les entrées à partir du formulaire spécifique

<form id="unique00"> 
    <input type="text" name="whatever" id="whatever" value="whatever" /> 
    <div> 
    <input type="checkbox" name="whatever" id="whatever" value="whatever" /> 
    </div> 
    <table><tr><td> 
    <input type="hidden" name="whatever" id="whatever" value="whatever" /> 
    <input type="submit" value="qweqsac" /> 
    </td></tr></table> 
</form> 
<form id="unique01"> 
    <div> 
    <input type="text" name="whatever" id="whatever" value="whatever" /> 
    <input type="checkbox" name="whatever" id="whatever" value="whatever" /> 
    </div> 
    <table><tr><td> 
    <input type="hidden" name="whatever" id="whatever" value="whatever" /> 
    </td></tr></table> 
    <select>blah...</select> 
    <input type="submit" value="qweqsac" /> 
</form> 
etc forms... forms... 

* Note: chaque forme peut avoir une autre quantité d'entrée et le type et aussi une structure différente html

donc est-il possible de remplir l'entrée de certains ID de formulaire? Par exemple, si je clique sur le bouton Soumettre à partir d'un identificateur de formulaire, alors jquery va remplir pour moi toutes les entrées dans ces identifiants de formulaire. actuellement ce que je fais est comme ceci:

$("form").submit(function(){ return validateForm($(this)) }); 
function validateForm(form){ 
var retVal = true; 
var re; 
$.each(form.serializeArray(), function(i, field) { 
    var input = $('input[name='+field.name+']'); 
    field.value = $.trim(field.value); 
    switch(field.name){ 
    case "name" : 
     and another cases... 
     } 
    }) 
} 

qui a été le travail, mais dans ce cas, je ne reçois que la field.name et field.value, et en fait ce que je veux est, je veux un jquery objet pour chaque élément d'entrée, de sorte que je peux accéder à leur css, id, nom, et même d'animer ces éléments d'entrée

est-il un moyen pour cela?

s'il vous plaît laissez-moi savoir et merci d'avance! ET

Répondre

124

Pour parcourir toutes les entrées dans un formulaire, vous pouvez le faire:

$("form#formID :input").each(function(){ 
var input = $(this); // This is the jquery object of the input, do what you will 
}); 

Il utilise le jquery :input selector pour obtenir tous les types d'entrées, si vous voulez juste texte que vous pouvez faire:

$("form#formID input[type=text]")//... 

etc.

+1

Cela fonctionne, sauf pour sélectionner l'option? – AnD

+3

Je pense: l'entrée fonctionne pour cela mais sinon vous pourriez faire: '$ (" form # formID input [type = texte], form # formID select ")' – TJB

+0

Note typo dans votre première réponse ci-dessus. $ ("from doit être $ (" form – Mitch

16

le code ci-dessous permet d'obtenir les détails des éléments de la forme spécifique avec l'identifiant de forme,

$('#formId input, #formId select').each(
    function(index){ 
     var input = $(this); 
     alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val()); 
    } 
); 

Le code ci-dessous permet d'obtenir les détails des éléments de toutes les formes qui sont dans la page de chargement,

$('form input, form select').each(
    function(index){ 
     var input = $(this); 
     alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val()); 
    } 
); 

Le code ci-dessous permet d'obtenir les détails des éléments qui sont dans la page de chargement, même lorsque l'élément est place pas dans la balise,

$('input, select').each(
    function(index){ 
     var input = $(this); 
     alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val()); 
    } 
); 

NOTE: nous ajoutons plus le nom de balise d'élément que nous avons besoin dans l'objet liste comme ci-dessous,

Example: to get name of attribute "textarea", 

$('input, select, textarea').each(
    function(index){ 
     var input = $(this); 
     alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val()); 
    } 
); 
1

Utilisez le formulaire HTML "éléments" attribut:

$.each($("form").elements, function(){ console.log($(this)); }

Maintenant, il est pas nécessaire de fournir des noms tels que "l'entrée, textarea, sélectionnez ...", etc.

+0

Dooh! --way trop d'infos. Essayez un moyen plus quickerer de voir sous forme d'info $. ("Forme: entrée") chaque fonction ((index) { \t \t \t \t \t \t \t \t \t \t \t console.log (index, this.type, cela. id, this.name, this.value, this.placeholder); \t} ); –

Questions connexes