jQuery crear objeto a partir de campos de formulario

Question

¿Cómo puedo crear un objeto con los campos y valores de un formulario?

como éste:

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

    } 
} 

asumiendo la forma se parece a esto:

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

Necesito saber cómo puedo hacer esto para cualquier forma con una sola función, no sólo una determinada formar.

Answer 1

Usted puede hacer esto:

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

Tenga en cuenta que las formas pueden tener campos con nombres repetidos, y lo que estás tratando de hacer no lo respalda. Además, el pedido de campos en formularios HTML puede ser significativo. (Estas son las dos razones por las que serializeArray funciona de la forma en que lo hace.)

Tenga en cuenta que la práctica normal de HTML es omitir los campos deshabilitados. Si desea hacerlo, marque this.disabled antes de obtener el valor también.

---

Tenga en cuenta que lo anterior (escrito hace dos años) utiliza un pseudo-selector jQuery. Estoy un poco sorprendido de encontrar que escribí eso. Como dice en el documentation for the :input pseudo-selector, usarlo significa que jQuery no puede transferir el selector al querySelectorAll nativo del navegador (que casi todos los navegadores tienen ahora).

Hoy en día probablemente me escribe:

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

... si quería botones, o si no, entonces

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

... y luego filtrar a cabo input[type="button"] y input[type="submit"] dentro del each . P.ej.(No hay botones en absoluto):

$("#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 tiene una función() en froms como $ ('# MyForm') serializar. Serializar()

es esto lo que está buscando?

actualización: Vaya, quizás intente serializeArray() en su lugar, debería darle una matriz de nombre y valor.

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

que es una función generalizada que crea un objeto para cada formulario en su página

Answer 5

Según un comentario en la página http://api.jquery.com/serializeArray/, que puede hacer:

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

Luego hacer:

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

o si lo necesita con su propiedad fields, puede modificar la función o hacer esto:

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

O simplemente puede usar serializeArray() si no le importa el formato de salida.

Answer 6

Así que siempre trato de poner un contenedor entre los envíos de formularios.

Esto es especialmente importante para envíos de formularios que se ejecutan en ajax.

Lo primero que debe hacer es tomar el formulario en el envío.

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

Esto envolver cualquier forma que tiene una clase de "forma ajax" y enviar el serializeArray a una función que se llama forma Objectify que devolverá un objeto de todos los valores de esa forma.

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

Answer 7

De esta manera se captura todos los valores desde múltiples selecciona o grupos de casillas de verificación

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

simple código de forma

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

código 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; 
    } 
}