jquery obtenir tous les éléments de forme: input, textarea & select

Existe-t-il un moyen simple (sans les énumérer tous séparément) dans jquery pour sélectionner tous les éléments de formulaire et uniquement les éléments de formulaire.

Je ne peux pas utiliser les enfants (), etc., car le formulaire contient un autre code HTML.

Par exemple:

$("form").each(function(){ $(this, "input, textarea, select"); }); 

Edit: Comme indiqué dans les commentaires ( Mario Awad & Brock Hensley ), utilisez .find pour attirer les enfants

 $("form").each(function(){ $(this).find(':input') //< -- Should return all input elements in that specific form. }); 

Les formulaires ont également une collection d'éléments, parfois différente des enfants, par exemple lorsque la balise de formulaire se trouve dans une table et n'est pas fermée.

 var summary = []; $('form').each(function () { summary.push('Form ' + this.id + ' has ' + $(this).find(':input').length + ' child(ren).'); summary.push('Form ' + this.id + ' has ' + this.elements.length + ' form element(s).'); }); $('#results').html(summary.join('
'));
    

Login Area

UserID:

Password:


Le code ci-dessous aide à obtenir les détails des éléments du formulaire spécifique avec l’identifiant du formulaire,

 $('#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 aide à obtenir les détails des éléments de tous les formulaires qui sont placés 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 aide à obtenir les détails des éléments qui sont placés dans la page de chargement, même lorsque l’élément n’est pas placé 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 le nom de balise element plus ce dont nous avons besoin dans la liste des objects comme ci-dessous,

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

Si vous avez des types supplémentaires, éditez le sélecteur:

 var formElements = new Array(); $("form :input").each(function(){ formElements.push($(this)); }); 

Tous les éléments de formulaire sont maintenant dans le tableau formElements.

Pour l’enregistrement : L’extrait suivant peut vous aider à obtenir des détails sur l’entrée, la zone de texte, la sélection, le bouton, les balises via un titre temporaire lorsque vous les survolez.

entrer la description de l'image ici

 $( 'body' ).on( 'mouseover', 'input, textarea, select, button, a', function() { var $tag = $( this ); var $form = $tag.closest( 'form' ); var title = this.title; var id = this.id; var name = this.name; var value = this.value; var type = this.type; var cls = this.className; var tagName = this.tagName; var options = []; var hidden = []; var formDetails = ''; if ( $form.length ) { $form.find( ':input[type="hidden"]' ).each( function( index, el ) { hidden.push( "\t" + el.name + ' = ' + el.value ); } ); var formName = $form.prop( 'name' ); var formTitle = $form.prop( 'title' ); var formId = $form.prop( 'id' ); var formClass = $form.prop( 'class' ); formDetails += "\n\nFORM NAME: " + formName + "\nFORM TITLE: " + formTitle + "\nFORM ID: " + formId + "\nFORM CLASS: " + formClass + "\nFORM HIDDEN INPUT:\n" + hidden.join( "\n" ); } var tempTitle = "TAG: " + tagName + "\nTITLE: " + title + "\nID: " + id + "\nCLASS: " + cls; if ( 'SELECT' === tagName ) { $tag.find( 'option' ).each( function( index, el ) { options.push( el.value ); } ); tempTitle += "\nNAME: " + name + "\nVALUE: " + value + "\nTYPE: " + type + "\nSELECT OPTIONS:\n\t" + options; } else if ( 'A' === tagName ) { tempTitle += "\nHTML: " + $tag.html(); } else { tempTitle += "\nNAME: " + name + "\nVALUE: " + value + "\nTYPE: " + type; } tempTitle += formDetails; $tag.prop( 'title', tempTitle ); $tag.on( 'mouseout', function() { $tag.prop( 'title', title ); } ) } ); 

jQuery conserve une référence à l’élément de formulaire JS vanilla, qui contient une référence à tous les éléments enfants de la fiche. Vous pouvez simplement saisir la référence et avancer:

 var someForm = $('#SomeForm'); $.each(someForm[0].elements, function(index, elem){ //Do something here. }); 
 var $form_elements = $("#form_id").find(":input"); 

Tous les éléments, y compris le bouton submit, sont maintenant dans la variable $ form_elements.

Juste pour append une autre façon:

 $('form[name=' + formName + ']').find(':input') 

C’est ma fonction préférée et ça marche comme un charme pour moi!

Il renvoie un object avec tous pour les données d’entrée, de sélection et de texte.

Et il essaie d’obtenir le nom des objects en recherchant les éléments name else Id else class.

 var All_Data = Get_All_Forms_Data(); console.log(All_Data); 

// ——————————————-

 function Get_All_Forms_Data(Element) { Element = Element || ''; var All_Page_Data = {}; var All_Forms_Data_Temp = {}; if(Element != '') { $(Element).find('input,select,textarea').each(function(i){ All_Forms_Data_Temp[i] = $(this); }); } else { $('input,select,textarea').each(function(i){ All_Forms_Data_Temp[i] = $(this); }); } $.each(All_Forms_Data_Temp,function(){ var input = $(this); var Element_Name; var Element_Value; if((input.attr('type') == 'submit') || (input.attr('type') == 'button')) { return true; } if((input.attr('name') !== undefined) && (input.attr('name') != '')) { Element_Name = input.attr('name').sortingm(); } else if((input.attr('id') !== undefined) && (input.attr('id') != '')) { Element_Name = input.attr('id').sortingm(); } else if((input.attr('class') !== undefined) && (input.attr('class') != '')) { Element_Name = input.attr('class').sortingm(); } if(input.val() !== undefined) { if((input.attr('type') == 'radio') || (input.attr('type') == 'checkbox')) { Element_Value = jQuery('input[name="'+Element_Name+'"]:checked').val(); } else { Element_Value = input.val(); } } else if(input.text() != undefined) { Element_Value = input.text(); } if(Element_Value === undefined) { Element_Value = ''; } if(Element_Name !== undefined) { var Element_Array = new Array(); if(Element_Name.indexOf(' ') !== -1) { Element_Array = Element_Name.split(/(\s+)/); } else { Element_Array.push(Element_Name); } $.each(Element_Array,function(index, Name) { Name = Name.sortingm(); if(Name != '') { All_Page_Data[Name] = Element_Value; } }); } }); return All_Page_Data; }