L'obtention de toutes les valeurs d'un formulaire en javascript

J'ai la forme:

<form onchange="allvaluestostring()">       
    <select name="status">
         <option value="*">All</option>
         <option value="1">Active</option>
         <option value="0">Inactive</option>
    </select>
    <select name="size">
          <option value="*">All</option>
          <option value="small">Small</option>
          <option value="big">Big</option>
    </select>
</form>

Et onchange action de n'importe quelle entrée dans le formulaire j'ai besoin d'obtenir javascript chaîne par exemple "status=1&size=big" pour l'utilisation dans httprequest.

Exister quelque chose en javascript ce qui prendre toutes les valeurs d'un formulaire lorsque l'une des entrées d'un formulaire sera changé?

J'ai utilisé <select name="status" onchange="showExporteditems(this.name,this.value)"> mais cela permettra de ne prendre qu'une seule valeur d'entrée pour l'utilisation de seulement "status=1", mais j'ai besoin sur chaque onchage toutes les valeurs de toutes les entrées pour la chaîne comme "status=1&size=big&...etc....".

Merci!

EDIT: sans l'aide de jquery.

Une forme ne change pas ?
utilisez la fonction serialize avec jQuery?
onsubmit, boucle à travers et obtenir les valeurs...
adaneo: la forme est le changement, mais j'ai besoin d'obtenir toutes les valeurs de tous les champs de saisie dans le formulaire. Jason, je n'utilise pas jquery dans ce projet. epascarello oui, mais j'espérais qu'il y existe peu de javascript inclus solution, je pensais que c'exigence habituelle.

OriginalL'auteur Martin | 2014-04-17

De travail violon en vanilla JS... mais ce que vous devez faire est d'ajouter un sérialiser fonction d'utilité. Cela fonctionne exactement comme $('form').serialize() en jQuery.

Javascript:

var data;
function serialize(form) {
if (!form || form.nodeName !== "FORM") {
return;
}
var i, j, q = [];
for (i = form.elements.length - 1; i >= 0; i = i - 1) {
if (form.elements[i].name === "") {
continue;
}
switch (form.elements[i].nodeName) {
case 'INPUT':
switch (form.elements[i].type) {
case 'text':
case 'hidden':
case 'password':
case 'button':
case 'reset':
case 'submit':
q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
break;
case 'checkbox':
case 'radio':
if (form.elements[i].checked) {
q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
}
break;
}
break;
case 'file':
break;
case 'TEXTAREA':
q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
break;
case 'SELECT':
switch (form.elements[i].type) {
case 'select-one':
q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
break;
case 'select-multiple':
for (j = form.elements[i].options.length - 1; j >= 0; j = j - 1) {
if (form.elements[i].options[j].selected) {
q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].options[j].value));
}
}
break;
}
break;
case 'BUTTON':
switch (form.elements[i].type) {
case 'reset':
case 'submit':
case 'button':
q.push(form.elements[i].name + "=" + encodeURIComponent(form.elements[i].value));
break;
}
break;
}
}
data = q.join("&");
}

et de changer votre forme onchange à

<form onchange="serialize(this)">

Viens de tester, se "size=small&status=0" dans la console.

Mettre la fonction elle-même pour le code, excelent solution!
Ce code est cassé. avoir 3 <button> balises avec le même nom et différentes valeurs de sérialiser tous les 3 boutons dans la chaîne de caractères à la place de celui qui a été pressé.

OriginalL'auteur Seth

6

Les champs de saisie, vous pouvez utiliser ECMA6 comme suit:

Obtenir votre formulaire dans une constante
```
const form = document.querySelector('form')
```
Saisir toutes les valeurs:
```
Object.values(form).reduce((obj,field) => { obj[field.name] = field.value; return obj }, {})
```
Extrait ci-dessus va produire un objet avec le nom de l'entrée comme la clé et sa valeur.

Cette solution est très beau, mais a encore quelques questions: 1) Il y a encore un gros utilisateur de la base avec les navigateurs qui ne supportent pas l'Objet.des valeurs encore 2) le résultat inclut des valeurs qui ne sont pas entrées d'un formulaire. Vous pouvez utiliser Object.values(form.elements) de résoudre ce problème. Serait upvote si elle avait ce correctif et a été fondée sur l'Objet.les touches() à la place 🙂

OriginalL'auteur Shairon Toledo
0

Lorsque vous êtes à l'aide de la méthode GET type de demande. Vous êtes déjà à l'aide de la méthode par défaut qui permettrait d'ajouter les données du formulaire à l'URL.

Ainsi, vous aurez l'sélectionner la valeur de l'élément de appened alongwith le nom.

Cependant, si vous souhaitez modifier dynamiquement l'URL. Ensuite, vous pouvez essayer comme:
```
function allvaluestostring() {
var sts = document.getElementById("status").value;
var size = document.getElementById("size").value;
history.pushState("", "Title", "new_URL");
}
```
Dans la déclaration ci-dessus, les valeurs sont stockées dans les variables et une history.pushState() méthode est appelée et qu'il allait changer la chaîne de caractères de l'URL de façon dynamique.

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

Puis-je prévenir l'histoire.popstate de déclenchement initial de chargement de la page?

Puropuse de forme est de montrer les résultats onchange en ajax, mais sur soumettre fera exporter les données sélectionnées dans le fichier. À l'exportation (lorsque le formulaire est soumis) est différente en fonction de la présentation des résultats de l'exemple. cela signifie que je n'ai pas besoin de changer de page url, mais de générer des url pour hthpprequest inclus page.

OriginalL'auteur Afzaal Ahmad Zeeshan

Si vous pouvez utiliser jQuery et ses serializeArray méthode, puis passer le this paramètre à la fonction onchange

<form onchange="allvaluestostring(this)">

qui ressemble à

function allvaluestostring(that) {
var out = "",
delim = "";
//Loop through the serialized fields of a form
$.each($(that).serializeArray(), function (idx, el) {
out += delim + el.name + '=' + el.value;
delim = "&"; //Trick to correctly append delimiter
});
alert(out);
};

OriginalL'auteur lebolo

Vous devez vous connecter pour publier un commentaire.