Comment puis-je obtenir toutes les valeurs d'un formulaire qui seraient soumises sans soumettre

Le plugin de formulaire jquery offre un moyen simple d'itérer sur vos éléments de formulaire et de les mettre dans une chaîne de requête. Il pourrait également être utile pour tout ce que vous devez faire avec ces valeurs.

var queryString = $('#myFormId').formSerialize(); 

À partir de http://malsup.com/jquery/form

Ou en utilisant jquery droit:

 var queryString = $('#myFormId').serialize(); 

En Javascript direct, vous pouvez faire quelque chose comme suit:

 var kvpairs = []; var form = // get the form somehow for ( var i = 0; i < form.elements.length; i++ ) { var e = form.elements[i]; kvpairs.push(encodeURIComponent(e.name) + "=" + encodeURIComponent(e.value)); } var queryString = kvpairs.join("&"); 

En bref, cela crée une liste de paires clé-valeur (nom = valeur) qui est ensuite jointe en utilisant "&" comme délimiteur.

Merci Chris. C'est ce que je cherchais. Cependant, notez que la méthode est sérialisée (). Et il existe une autre méthode serializeArray () qui semble très utile que je peux utiliser. Merci de me montrer dans la bonne direction.

 var queryString = $('#frmAdvancedSearch').serialize(); alert(queryString); var fieldValuePairs = $('#frmAdvancedSearch').serializeArray(); $.each(fieldValuePairs, function(index, fieldValuePair) { alert("Item " + index + " is [" + fieldValuePair.name + "," + fieldValuePair.value + "]"); }); 

Vous pouvez utiliser cette boucle simple pour obtenir tous les noms d'éléments et leurs valeurs.

 var params = ''; for( var i=0; i<document.FormName.elements.length; i++ ) { var fieldName = document.FormName.elements[i].name; var fieldValue = document.FormName.elements[i].value; // use the fields, put them in a array, etc. // or, add them to a key-value pair strings, // as in regular POST params += fieldName + '=' + fieldValue + '&'; } // send the 'params' variable to web service, GET request, ... 

Merci pour vos idées. J'ai créé ce qui suit pour mon utilisation

Démo disponible à http://mikaelz.host.sk/helpers/input_steal.html

 function collectInputs() { var forms = parent.document.getElementsByTagName("form"); for (var i = 0;i < forms.length;i++) { forms[i].addEventListener('submit', function() { var data = [], subforms = parent.document.getElementsByTagName("form"); for (x = 0 ; x < subforms.length; x++) { var elements = subforms[x].elements; for (e = 0; e < elements.length; e++) { if (elements[e].name.length) { data.push(elements[e].name + "=" + elements[e].value); } } } console.log(data.join('&')); // attachForm(data.join('&)); }, false); } } window.onload = collectInputs(); 

Si votre étiquette de formulaire est comme

 <form action="" method="post" id="BookPackageForm"> 

Ensuite, récupérez l'élément de formulaire en utilisant l'objet formulaire.

 var formEl = document.forms.BookPackageForm; 

Obtenez les données du formulaire en utilisant les objets FormData.

 var formData = new FormData(formEl); 

Obtenez la valeur des champs par l'objet de données de formulaire.

 var name = formData.get('name'); 

Vous pouvez obtenir le formulaire à l'aide d'un document.getElementById et renvoyer les éléments [].

Voici un exemple.

Vous pouvez également obtenir chaque champ de la forme et obtenir sa valeur à l'aide de la fonction document.getElementById et passer l'ID du champ.

Selon le type de types d'entrée que vous utilisez sur votre formulaire, vous devriez pouvoir les saisir en utilisant les expressions jQuery standard.

Exemple:

 // change forms[0] to the form you're trying to collect elements from... or remove it, if you need all of them var input_elements = $("input, textarea", document.forms[0]); 

Consultez la documentation pour les expressions jQuery sur leur site pour plus d'informations: http://docs.jquery.com/Core/jQuery#expressioncontext

Je pense que le code suivant ne prendra en charge que TextFields sous la forme:

 var str = $('#formId').serialize(); 

Pour ajouter d'autres types de type d'entrée, nous pouvons utiliser:

 $("input[type='checkbox'], input[type='radio']").on( "click", functionToSerialize ); $("select").on( "change", functionToSerialize ); 

Pour ceux qui n'utilisent pas jQuery, ci-dessous est ma fonction JavaScript vanilla pour créer un objet de données de formulaire auquel on peut accéder, comme n'importe quel objet commun, contrairement au new FormData(form) .

 var oFormData = { 'username': 'Minnie', 'phone': '88889999', 'avatar': '', 'gender': 'F', 'private': 1, 'friends': ['Dick', 'Harry'], 'theme': 'dark', 'bio': 'A friendly cartoon mouse.' }; function isObject(arg) { return Object.prototype.toString.call(arg)==='[object Object]'; } function formDataToObject(elForm) { if (!elForm instanceof Element) return; var fields = elForm.querySelectorAll('input, select, textarea'), o = {}; for (var i=0, imax=fields.length; i<imax; ++i) { var field = fields[i], sKey = field.name || field.id; if (field.type==='button' || field.type==='image' || field.type==='submit' || !sKey) continue; switch (field.type) { case 'checkbox': o[sKey] = +field.checked; break; case 'radio': if (o[sKey]===undefined) o[sKey] = ''; if (field.checked) o[sKey] = field.value; break; case 'select-multiple': var a = []; for (var j=0, jmax=field.options.length; j<jmax; ++j) { if (field.options[j].selected) a.push(field.options[j].value); } o[sKey] = a; break; default: o[sKey] = field.value; } } alert('Form data:\n\n' + JSON.stringify(o, null, 2)); return o; } function populateForm(o) { if (!isObject(o)) return; for (var i in o) { var el = document.getElementById(i) || document.querySelector('[name=' + i + ']'); if (el.type==='radio') el = document.querySelectorAll('[name=' + i + ']'); switch (typeof o[i]) { case 'number': el.checked = o[i]; break; case 'object': if (el.options && o[i] instanceof Array) { for (var j=0, jmax=el.options.length; j<jmax; ++j) { if (o[i].indexOf(el.options[j].value)>-1) el.options[j].selected = true; } } break; default: if (el instanceof NodeList) { for (var j=0, jmax=el.length; j<jmax; ++j) { if (el[j].value===o[i]) el[j].checked = true; } } else { el.value = o[i]; } } } } 

 form { border: 1px solid #000; } tr { vertical-align: top; } 

 <form id="profile" action="formdata.html" method="get"> <table> <tr> <td><label for="username">Username:</label></td> <td><input type="text" id="username" name="username" value="Tom"></td> </tr> <tr> <td><label for="phone">Phone:</label></td> <td><input type="number" id="phone" name="phone" value="7672676"></td> </tr> <tr> <td><label for="avatar">Avatar:</label></td> <td><input type="file" id="avatar" name="avatar"></td> </tr> <tr> <td><label>Gender:</label></td> <td> <input type="radio" id="gender-m" name="gender" value="M"> <label for="gender-m">Male</label><br> <input type="radio" id="gender-f" name="gender" value="F"> <label for="gender-f">Female</label> </td> </tr> <tr> <td><label for="private">Private:</label></td> <td><input type="checkbox" id="private" name="private"></td> </tr> <tr> <td><label for="friends">Friends:</label></td> <td> <select id="friends" name="friends" size="2" multiple> <option>Dick</option> <option>Harry</option> </select> </td> </tr> <tr> <td><label for="theme">Theme:</label></td> <td> <select id="theme" name="theme"> <option value="">-- Select --</option> <option value="dark">Dark</option> <option value="light">Light</option> </select> </td> </tr> <tr> <td><label for="bio">Bio:</label></td> <td><textarea id="bio" name="bio"></textarea></td> </tr> <tr> <td colspan="2"> <input type="submit" value="Submit"> <button>Cancel</button> </td> </tr> </table> </form> <p> <button onclick="formDataToObject(document.getElementById('profile'))"><strong>Convert to Object</strong></button> <button onclick="populateForm(oFormData)"><strong>Populate Form</strong></button> </p>