Ottieni i campi di input del modulo usando jQuery?

Ho un modulo con molti campi di input.

Quando rilevo l’evento form di invio con jQuery, è ansible ottenere tutti i campi di input di tale modulo in un array associativo?

$('#myForm').submit(function() { // get all the inputs into an array. var $inputs = $('#myForm :input'); // not sure if you wanted this, but I thought I'd add it. // get an associative array of just the values. var values = {}; $inputs.each(function() { values[this.name] = $(this).val(); }); }); 

Grazie al suggerimento di Simon_Weaver, ecco un altro modo per farlo, usando serializeArray :

 var values = {}; $.each($('#myForm').serializeArray(), function(i, field) { values[field.name] = field.value; }); 

Nota che questo snippet fallirà su elementi.

Sembra che i nuovi input di form HTML 5 non funzionino con serializeArray in jQuery versione 1.3. Funziona nella versione 1.4+

In ritardo alla festa su questa domanda, ma questo è ancora più semplice:

 $('#myForm').submit(function() { // Get all the forms elements and their values in one step var values = $(this).serialize(); }); 

Il plugin jquery.form può aiutare con quello che gli altri stanno cercando e finiscono con questa domanda. Non sono sicuro se fa direttamente ciò che vuoi o no.

C’è anche la funzione serializeArray .

A volte trovo che trovarne uno alla volta sia più utile. Per questo, c’è questo:

 var input_name = "firstname"; var input = $("#form_id :input[name='"+input_name+"']"); 
 $('#myForm').bind('submit', function () { var elements = this.elements; }); 

La variabile elements conterrà tutti gli input, select, textareas e fieldset all’interno del modulo.

Ho avuto un problema simile con una leggera svolta e ho pensato di buttarlo fuori. Ho una funzione di callback che ottiene il modulo quindi avevo già un object modulo e non potevano varianti semplici su $('form:input') . Invece mi sono inventato:

  var dataValues = {}; form.find('input').each( function(unusedIndex, child) { dataValues[child.name] = child.value; }); 

La sua situazione simile ma non identica, ma ho trovato questo thread molto utile e ho pensato di inserire questo alla fine e sperare che qualcun altro lo trovasse utile.

Ecco un’altra soluzione, in questo modo è ansible recuperare tutti i dati relativi al modulo e utilizzarlo in una chiamata serveride o qualcosa del genere.

 $('.form').on('submit', function( e )){ var form = $( this ), // this will resolve to the form submitted action = form.attr( 'action' ), type = form.attr( 'method' ), data = {}; // Make sure you use the 'name' field on the inputs you want to grab. form.find( '[name]' ).each( function( i , v ){ var input = $( this ), // resolves to current input element. name = input.attr( 'name' ), value = input.val(); data[name] = value; }); // Code which makes use of 'data'. e.preventDefault(); } 

È quindi ansible utilizzare questo con le chiamate Ajax:

 function sendRequest(action, type, data) { $.ajax({ url: action, type: type, data: data }) .done(function( returnedHtml ) { $( "#responseDiv" ).append( returnedHtml ); }) .fail(function() { $( "#responseDiv" ).append( "This failed" ); }); } 

Spero che questo sia utile per qualcuno di voi 🙂

Associativo? Non senza un po ‘di lavoro, ma puoi usare selettori generici:

 var items = new Array(); $('#form_id:input').each(function (el) { items[el.name] = el; }); 

serializeArray di jQuery non include campi disabilitati, quindi se hai bisogno anche di quelli, prova:

 var data = {}; $('form.my-form').find('input, textarea, select').each(function(i, field) { data[field.name] = field.value; }); 

http://api.jquery.com/serializearray/

 $('#form').on('submit', function() { var data = $(this).serializeArray(); }); 

Questo può anche essere fatto senza jQuery usando l’object FormData XMLHttpRequest Level 2

http://www.w3.org/TR/2010/WD-XMLHttpRequest2-20100907/#the-formdata-interface

 var data = new FormData([form]) 

Non dimenticare le caselle di controllo e i pulsanti di opzione –

 var inputs = $("#myForm :input"); var obj = $.map(inputs, function(n, i) { var o = {}; if (n.type == "radio" || n.type == "checkbox") o[n.id] = $(n).attr("checked"); else o[n.id] = $(n).val(); return o; }); return obj 

Ho avuto lo stesso problema e l’ho risolto in un modo diverso.

 var arr = new Array(); $(':input').each(function() { arr.push($(this).val()); }); arr; 

Restituisce il valore di tutti i campi di input. È ansible modificare $(':input') per essere più specifici.

Se è necessario ottenere più valori dagli input e si sta utilizzando [] per definire gli input con più valori, è ansible utilizzare quanto segue:

 $('#contentform').find('input, textarea, select').each(function(x, field) { if (field.name) { if (field.name.indexOf('[]')>0) { if (!$.isArray(data[field.name])) { data[field.name]=new Array(); } data[field.name].push(field.value); } else { data[field.name]=field.value; } } }); 

La stessa soluzione fornita da nickf , ma con nomi di input dell’array presi in considerazione, ad es

 values = {}; $("#something :input").each(function() { if (this.name.search(/\[\]/) > 0) //search for [] in name { if (typeof values[this.name] != "undefined") { values[this.name] = values[this.name].concat([$(this).val()]) } else { values[this.name] = [$(this).val()]; } } else { values[this.name] = $(this).val(); } }); 

Questo pezzo di codice funzionerà al posto del nome, e-mail inserire il nome del campo del modulo

 $(document).ready(function(){ $("#form_id").submit(function(event){ event.preventDefault(); var name = $("input[name='name']",this).val(); var email = $("input[name='email']",this).val(); }); }); 

Sembra strano che nessuno abbia sviato o proposto una soluzione concisa per ottenere i dati della lista. Quasi nessun modulo diventerà object a dimensione singola.

Lo svantaggio di questa soluzione è, naturalmente, che gli oggetti singleton devono essere accessibili all’indirizzo [0]. Ma IMO è molto meglio che usare una delle soluzioni di mapping dozzina di linee.

 var formData = $('#formId').serializeArray().reduce(function (obj, item) { if (obj[item.name] == null) { obj[item.name] = []; } obj[item.name].push(item.value); return obj; }, {}); 

Ispirato alle risposte di Lance Rushing e Simon_Weaver , questa è la mia soluzione preferita.

 $('#myForm').submit( function( event ) { var values = $(this).serializeArray(); // In my case, I need to fetch these data before custom actions event.preventDefault(); }); 

L’output è una matrice di oggetti, ad es

 [{name: "start-time", value: "11:01"}, {name: "end-time", value: "11:11"}] 

Con il codice qui sotto,

 var inputs = {}; $.each(values, function(k, v){ inputs[v.name]= v.value; }); 

la sua produzione finale sarebbe

 {"start-time":"11:01", "end-time":"11:01"} 

Sto usando questo codice senza ogni ciclo:

 $('.subscribe-form').submit(function(e){ var arr=$(this).serializeArray(); var values={}; for(i in arr){values[arr[i]['name']]=arr[i]['value']} console.log(values); return false; }); 

Quando ho dovuto effettuare una chiamata ajax con tutti i campi del modulo, ho avuto problemi con il : selettore di input che restituiva tutte le caselle di controllo indipendentemente dal fatto che fossero selezionate. Ho aggiunto un nuovo selettore per ottenere solo gli elementi del modulo di invio:

 $.extend($.expr[':'],{ submitable: function(a){ if($(a).is(':checkbox:not(:checked)')) { return false; } else if($(a).is(':input')) { return true; } else { return false; } } }); 

utilizzo:

 $('#form_id :submitable'); 

Non l’ho ancora testato con più caselle di selezione, ma funziona per ottenere tutti i campi del modulo nel modo in cui lo farebbe un invio standard.

L’ho usato durante la personalizzazione delle opzioni del prodotto su un sito OpenCart per includere caselle di controllo e campi di testo, nonché il tipo di casella di selezione standard.

serialize () è il metodo migliore. @ Christopher Parker dice che il ricercatore di Nickf realizza di più, tuttavia non tiene conto del fatto che il modulo potrebbe contenere textarea e selezionare i menu. È molto meglio usare serialize () e quindi manipolarlo come necessario. I dati da serialize () possono essere utilizzati in un post Ajax o get, quindi non c’è nessun problema lì.

Spero che questo aiuti qualcuno. 🙂

 // This html: // 
// // // // // // // // //
// // With this js: // // var form1 = parseForm($('#someCoolForm')); // console.log(form1); // // Will output something like: // { // username: "test2" // emails: // 0: "[email protected]" // 1: "[email protected]" // profile: Object // first_name: "..." // last_name: "..." // } // // So, function below: var parseForm = function (form) { var formdata = form.serializeArray(); var data = {}; _.each(formdata, function (element) { var value = _.values(element); // Parsing field arrays. if (value[0].indexOf('[]') > 0) { var key = value[0].replace('[]', ''); if (!data[key]) data[key] = []; data[value[0].replace('[]', '')].push(value[1]); } else // Parsing nested objects. if (value[0].indexOf('.') > 0) { var parent = value[0].substring(0, value[0].indexOf(".")); var child = value[0].substring(value[0].lastIndexOf(".") + 1); if (!data[parent]) data[parent] = {}; data[parent][child] = value[1]; } else { data[value[0]] = value[1]; } }); return data; };

Tutte le risposte sono buone, ma se c’è un campo che ti piace ignorare in quella funzione? Facile, assegna al campo una proprietà, ad esempio ignore_questo:

  

E nella tua funzione Serialize:

 if(!$(name).prop('ignorar')){ do_your_thing; } 

Questo è il modo in cui ignori alcuni campi.