Obtenir des données de formulaire avec Javascript / Jquery

Question

Existe-t-il un moyen simple et unique d'obtenir les données d'un formulaire comme s'il s'agissait d'un formulaire HTML classique?

Par exemple, dans:

 <form>
 <input type="radio" name="foo" value="1" checked="checked" />
 <input type="radio" name="foo" value="0" />
 <input name="bar" value="xxx" />
 <select name="this">
  <option value="hi" selected="selected">Hi</option>
  <option value="ho">Ho</option>
</form>
 

En dehors:

 {
 "foo": "1",
 "bar": "xxx",
 "this": "hi"
}
 

Quelque chose comme ceci est trop simple, car il n'inclut pas (correctement) les zones de texte, les sélections, les boutons radio et les cases à cocher:

 $("#form input").each(function() {
 data[theFieldName] = theFieldValue;
});
 

Answer 1

Utilisez $ ('form'). SerializeArray () , qui retourne le tableau :

 [
 {"name":"foo","value":"1"},
 {"name":"bar","value":"xxx"},
 {"name":"this","value":"hi"}
]
 

L'autre option est $ ('form'). Serialize () , qui retourne une chaîne:

 "foo=1&bar=xxx&this=hi"
 

Jetez un oeil à cette démo jsfiddle

Answer 2

 $('form').serialize() //this produces: "foo=1&bar=xxx&this=hi"
 

démo

Answer 3

Basé sur jQuery.serializeArray , renvoie les paires clé-valeur.

 var data = $('#form').serializeArray().reduce(function(obj, item) {
    obj[item.name] = item.value;
    return obj;
}, {});
 

Answer 4

utilisez .serializeArray () pour obtenir les données au format tableau, puis convertissez-les en objet:

 function getFormObj(formId) {
    var formObj = {};
    var inputs = $('#'+formId).serializeArray();
    $.each(inputs, function (i, input) {
        formObj[input.name] = input.value;
    });
    return formObj;
}
 

Answer 5

 $("#form input, #form select, #form textarea").each(function() {
 data[theFieldName] = theFieldValue;
});
 

à part ça, vous pourriez vouloir regarder serialize () ;