jQuery erstellt Objekt aus Formularfeldern

Question

Wie kann ich ein Objekt mit den Feldern und Werten eines Formulars erstellen?

wie diese hier:

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

   }
}

wenn das Formular wie folgt aussieht:

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

Ich muss wissen, wie ich dies für jedes Formular mit einer einzigen Funktion tun kann, nicht nur für ein bestimmtes Formular.

Answer 1

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

Es handelt sich um eine allgemeine Funktion, die ein Objekt für jedes Formular auf Ihrer Seite erstellt.

Answer 2

Auf diese Weise erfassen Sie alle Werte von Mehrfachauswahlen oder Gruppen von Kontrollkästchen

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 3

Eine Menge komplizierter Wege, die in manchen Fällen nicht funktionieren. In der Zwischenzeit können Sie die 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);

ist genau das, was Sie wollen. Es kann alles.

Answer 4

Deshalb versuche ich immer, einen Wrapper zwischen die Formularübermittlungen zu setzen.

Dies ist besonders wichtig für Formularübermittlungen, die über Ajax laufen.

Das erste, was zu tun ist, ist, das Formular beim Absenden zu erfassen.

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

Dadurch wird jedes Formular mit der Klasse "ajax-form" umhüllt und das serializeArray an eine Funktion namens objectify form gesendet, die ein Objekt mit allen Werten dieses Formulars zurückgibt.

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

Answer 5

Einfacher Formularcode

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

Javascript Code:

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