jquery récupère tous les éléments du formulaire: input, textarea & select
Existe-t-il un moyen simple (sans les répertorier tous séparément) dans jQuery de sélectionner tous les éléments de formulaire et uniquement les éléments de formulaire.
Je ne peux pas utiliser children (), 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 récupérer 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 un tableau 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('<br />'));<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="A" style="display: none;">
<input type="text" />
<button>Submit</button>
</form>
<form id="B" style="display: none;">
<select><option>A</option></select>
<button>Submit</button>
</form>
<table bgcolor="white" cellpadding="12" border="1" style="display: none;">
<tr><td colspan="2"><center><h1><i><b>Login
Area</b></i></h1></center></td></tr>
<tr><td><h1><i><b>UserID:</b></i></h1></td><td><form id="login" name="login" method="post"><input
name="id" type="text"></td></tr>
<tr><td><h1><i><b>Password:</b></i></h1></td><td><input name="pass"
type="password"></td></tr>
<tr><td><center><input type="button" value="Login"
onClick="pasuser(this.form)"></center></td><td><center><br /><input
type="Reset"></form></td></tr></table></center>
<div id="results"></div>Peut être : entrée sélecteur est ce que vous voulez
$ ("formulaire"). each (fonction () {$ (': entrée', ceci) // <- Doit renvoyer tous les éléments d’entrée sous cette forme spécifique.});
Comme indiqué dans la documentation
Pour obtenir les meilleures performances lors de l’utilisation de: input pour sélectionner des éléments, sélectionnez d’abord les éléments à l’aide d’un pur sélecteur CSS, puis utilisez .filter (": input").
Vous pouvez utiliser comme ci-dessous,
$("form").each(function(){ $(this).filter(':input') //<-- Should return all input elements in that specific form. });
Le code ci-dessous permet d’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 permet d’obtenir le détail des éléments de tous les formulaires 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 permet d’obtenir les détails des éléments 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 d'élément supplémentaire dont nous avons besoin dans la liste d'objets, 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());
}
);
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 à travers un titre temporaire lorsque vous les survolez.
$( '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 Vanilla JS, qui contient une référence à tous les éléments enfants du formulaire. 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.
Ceci est ma fonction préférée et cela fonctionne comme un charme pour moi!
Il retourne un objet avec tout pour l'entrée, la sélection et les données textarea.
Et il essaie de nommer les objets en cherchant des éléments nommés 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').trim();
}
else if((input.attr('id') !== undefined) && (input.attr('id') != ''))
{
Element_Name = input.attr('id').trim();
}
else if((input.attr('class') !== undefined) && (input.attr('class') != ''))
{
Element_Name = input.attr('class').trim();
}
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.trim();
if(Name != '')
{
All_Page_Data[Name] = Element_Value;
}
});
}
});
return All_Page_Data;
}
Juste pour ajouter une autre manière:
$('form[name=' + formName + ']').find(':input')
JQuery serialize function facilite l'obtention de tous les éléments de formulaire.
Démo: http://jsfiddle.net/55xnJ/2/
$("form").serialize(); //get all form elements at once
//result would be like this:
single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1
toutes les entrées:
var inputs = $("#formId :input");
tous les boutons
var button = $("#formId :button")
Essayez quelque chose comme ça:
<form action="/" id="searchForm">
<input type="text" name="s" placeholder="Search...">
<input type="submit" value="Search">
</form>
<!-- the result of the search will be rendered inside this div -->
<div id="result"></div>
<script>
// Attach a submit handler to the form
$( "#searchForm" ).submit(function( event ) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var $form = $( this ),
term = $form.find( "input[name='s']" ).val(),
url = $form.attr( "action" );
// Send the data using post
var posting = $.post( url, { s: term } );
// Put the results in a div
posting.done(function( data ) {
var content = $( data ).find( "#content" );
$( "#result" ).empty().append( content );
});
});
</script>
Notez l'utilisation de input []