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

Question

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

comme celui-ci:

{ 
    fields: 
    { 
     name: 'foo', 
     email: 'foo@moo.com', 
     comment: 'wqeqwtwqtqwtqwet'  

    } 
} 

prenant la forme ressemble à ceci:

<form> 
    <input type="text" name="name" value="foo" /> 
    <input type="text" name="email" value="foo@moo.com" /> 
    <textarea name="comment">wqeqwtwqtqwtqwet</textarea> 
</form> 

Je dois savoir comment puis-je faire pour toute forme avec une seule fonction, non seulement un particulier forme.

Answer 1

Vous pouvez 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... 

Prenez garde que les formulaires peuvent avoir des champs avec des noms répétés, et ce que vous essayez de faire ne supporte pas cela. En outre, les champs des champs dans les 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 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 ça. Comme il est dit dans le documentation for the :input pseudo-selector, son utilisation signifie que jQuery ne peut pas transférer le sélecteur au navigateur natif querySelectorAll (ce qui est le cas de presque tous les navigateurs).

Aujourd'hui, je serais probablement écrire:

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

... si je voulais boutons, ou sinon,

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

... puis filtrer sur input[type="button"] et input[type="submit"] à l'intérieur du each . Par exemple.(Pas de boutons à tous):

$("#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`... 
    } 
}); 

Answer 2

jquery a une fonction serialize() sur Froms comme $ ('# MyForm'). Serialize()

est ce que vous cherchez? Oups, peut-être essayer plutôt serializeArray(), il devrait vous donner un tableau de nom et de valeur.

Answer 3

var inputs = $("form :input"); 
var obj = $.map(inputs, function(x, y) { 
    return { 
     Key: x.name, 
     Value: $(x).val() 
    }; 
}); 
console.log(obj); 

Answer 4

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; 
} 

il est une fonction généralisée qui crée un objet pour chaque formulaire dans votre page

Answer 5

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); 

Ensuite, faites:

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

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

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

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

Answer 6

Donc, j'essaie toujours de mettre un wrapper parmi les soumissions de formulaire.

Ceci est particulièrement important pour les soumissions de formulaire qui s'exécutent sur ajax.

La première chose à faire est de récupérer le formulaire sur submit.

$(".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; 
}); 

Cette enveloppera toute forme qui a une classe de « ajax-forme » et envoyer le serializeArray à une fonction qui est appelée forme objectiver qui renvoie un objet de toutes les valeurs de cette forme.

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

Answer 7

De cette façon, vous attrapez toutes les valeurs de sélections multiples 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; 
}; 

Answer 8

Forme simple Code

<form id="myForm" name="myForm"> 
    <input type="text" name="email" value="fazelman@test.com"/> 
    <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 "passwrod": data[element[i].name] = element[i].checked; break; 
     case "textarea": data[element[i].name] = element[i].value; break; 
    } 
}