web-dev-qa-db-fra.com

jQuery crée un objet à partir de champs de formulaire

Comment créer un objet avec les champs et les valeurs d'un formulaire?

comme celui-ci:

{
  fields:
   {
      name: 'foo',
      email: '[email protected]',
      comment: 'wqeqwtwqtqwtqwet'     

   }
}

en supposant que la forme ressemble à ceci:

<form>
  <input type="text" name="name" value="foo" />
  <input type="text" name="email" value="[email protected]" />
  <textarea name="comment">wqeqwtwqtqwtqwet</textarea>
</form>

J'ai besoin de savoir comment puis-je faire cela pour n'importe quel formulaire avec une seule fonction, pas seulement un formulaire particulier.

javascriptjqueryformsjavascript-objects
17
Alex

Tu peux le faire:

var fields = {};
$("#theForm").find(":input").each(function() {
    // The selector will match buttons; if you want to filter
    // them out, check `this.tagName` and `this.type`; see
    // below
    fields[this.name] = $(this).val();
});
var obj = {fields: fields}; // You said you wanted an object with a `fields` property, so...

Attention, les formulaires peuvent avoir des champs avec des noms répétés, et ce que vous essayez de faire ne prend pas cela en charge. De plus, les champs order des formulaires HTML peuvent être significatifs. (Ce sont les deux raisons pour lesquelles serializeArray fonctionne comme il le fait.)

Notez que la pratique HTML normale consiste à omettre les champs désactivés. Si vous voulez faire cela, vérifiez this.disabled avant de saisir également la valeur.

Notez que ce qui précède (écrit il y a deux ans) utilise un pseudo-sélecteur jQuery. Je suis un peu surpris de constater que j'ai écrit cela. Comme il est dit dans la documentation du pseudo-sélecteur :input , son utilisation signifie que jQuery ne peut pas transférer le sélecteur à la querySelectorAll native du navigateur (que presque tous les navigateurs ont maintenant).

De nos jours j'écrirais probablement:

$("#theForm").find("input, textarea, select, button")...

... si je voulais des boutons, ou sinon alors

$("#theForm").find("input, textarea, select")...

... puis filtrez input[type="button"] et input[type="submit"] à l'intérieur de la each. Par exemple. (pas de boutons du tout):

$("#theForm").find("input, textarea, select").each(function() {
    var inputType = this.tagName.toUpperCase() === "INPUT" && this.type.toUpperCase();
    if (inputType !== "BUTTON" && inputType !== "SUBMIT") {
        // ...include it, either it's an `input` with a different `type`
        // or it's a `textarea` or a `select`...
    }
});
31
T.J. Crowder
var inputs = $("form :input");
var obj = $.map(inputs, function(x, y) {
    return {
        Key: x.name,
        Value: $(x).val()
    };
});
console.log(obj);
11
Hussein

Selon un commentaire sur la page http://api.jquery.com/serializeArray/ , vous pouvez faire:

(function( $ ){
    $.fn.serializeJSON=function() {
        var json = {};
        jQuery.map($(this).serializeArray(), function(n, i){
            json[n['name']] = n['value'];
        });
        return json;
    };
})( jQuery );

Alors fais: 

var obj = $('form').serializeJSON();

ou si vous en avez besoin avec votre propriété fields, vous pouvez modifier la fonction ou faire ceci:

var obj = {fields: $('form').serializeJSON()};

Ou vous pouvez simplement utiliser serializeArray() si le format de sortie ne vous dérange pas.

6
Brett Zamir

jquery a une fonction serialize () sur des froms comme $ ('# myform'). serialize ()

est-ce ce que vous cherchez?

update: oops, essayez peut-être serializeArray () à la place, il devrait vous donner un tableau de nom et de valeur.

3
albb

Voici une solution simple:

See Demo

$(".form-sample").serializeArray().map(function(x){data[x.name] = x.value;});
1
DDan
function formsToObj(){
    var forms = [];
    $('form').each(function(i){
        forms[i] = {};
        $(this).children('input,textarea,select').each(function(){
            forms[i][$(this).attr('name')] = $(this).val();
        });
    });
    return forms;
}

c'est une fonction généralisée qui crée un objet pour chaque formulaire de votre page

1
gion_13

De cette façon, vous récupérez toutes les valeurs de plusieurs sélections ou groupes de cases à cocher

function form2obj(form) {
    var arr = $(form).serializeArray(), obj = {};
    for(var i = 0; i < arr.length; i++) {
        if(obj[arr[i].name] === undefined) {
            obj[arr[i].name] = arr[i].value;
        } else {
            if(!(obj[arr[i].name] instanceof Array)) {
                obj[arr[i].name] = [obj[arr[i].name]];
            }
            obj[arr[i].name].Push(arr[i].value);
        }
    }
    return obj;
};
1
user3504541

Code de formulaire simple 

<form id="myForm" name="myForm">
    <input type="text" name="email" value="[email protected]"/>
    <input type="checkbox" name="gender">
    <input type="password" name="pass" value="123"/>
    <textarea name="message">Enter Your Message Her</textarea>
</form>

Code Javascript: 

var data = {};
var element = document.getElementById("form").elements
for (var i = 0; i < element.length; i++) {
    switch (element[i].type) {
        case "text": data[element[i].name] = element[i].value; break;
        case "checkbox": data[element[i].name] = element[i].checked; break;
        case "password": data[element[i].name] = element[i].checked; break;
        case "textarea": data[element[i].name] = element[i].value; break;
    }
}
0
FazelMan

Donc, j'essaie toujours de mettre un wrapper parmi les formulaires soumis.

Ceci est particulièrement important pour les envois de formulaire exécutés sur ajax.

La première chose à faire est de saisir le formulaire lors de la soumission.

$(".ajax-form").submit(function(){
    var formObject = objectifyForm($(this).serializeArray());
    // Do stuff with formObject 

    // always add return false to stop the form from actually doing a post anywhere
    return false;
});

Cela encapsulera tout formulaire ayant une classe "ajax-form" et enverra le serializeArray à une fonction appelée formulaire objectify qui renverra un objet contenant toutes les valeurs de ce formulaire.

function objectifyForm(formArray) {
    returnArray = {};
    for (var i = 0; i < formArray.length; i++) {
        returnArray[formArray[i]['name']] = formArray[i]['value'];
    }
    return returnArray;
}
0
Jordan From Freer Tool

Beaucoup de façons compliquées qui ne fonctionnent pas dans certains cas. En attendant, vous pouvez utiliser le FormData

 var fields = {};
 var myform = document.getElementById('ThisIsTheIDOfMyForm');
 var myformdata = new FormData(myform);
 for (var [key, value] of myformdata.entries()) { 
    fields[key] = value;
 }
 console.log(fields);

est exactement ce que vous voulez. Il gère tout.

0
Jens H