jQuery serializa múltiples formularios y envía como JSON

Tengo varios formularios en una página donde cada formulario agregará un elemento individual a la base de datos. También hay un botón 'Agregar todo' que enviará todos los datos de los productos. Ver html básico a continuación:

<button type="submit">All all products</a>

<form>
<input type="hidden" name="Product" value="ProductA" />
<input type="checkbox" name="optionAll" value="Option All" /> Option All 
<input type="checkbox" name="option" value="Option 1" checked="checked" /> Option 1 
<input type="checkbox" name="option" value="Option 2" /> Option 2
<button type="submit">Add this product"</button> 
</form>

<form>
<input type="hidden" name="Product" value="ProductB" />
<input type="checkbox" name="optionAll" value="Option All" /> Option All 
<input type="checkbox" name="option" value="Option 1" checked="checked" /> Option 1 
<input type="checkbox" name="option" value="Option 2" checked="checked" /> Option 2 
<button type="submit">Add this product"</button> 
</form>

Estoy tratando de publicar los datos del formulario serializado en el siguiente formato JSON:

products = {
    "ProductA": {
        "option": ["Option 1"] // only 1 checkbox is checked
    },
    "ProductB": {
        "optionAll": "Option All",
        "option": ["Option 1", "Option 2"] // both checkboxes are checked
    }   
}

He estado jugando con el mapeo de los datos serializados, pero no pude obtener el formato JSON como el anterior.

data = $.map($('form').serializeArray(), function(el, i){
    var json = {};
    ???
    return json;
});
console.log(data)

¡Aprecio tu ayuda!

preguntado el 03 de mayo de 12 a las 17:05

Puedo pensar en una forma jQuery "fácil" de hacerlo. -

2 Respuestas

var result = {};  // object to hold final result

$('button[type="submit"]').on('click', function() {

    $('form').each(function() {  // loop start for each form

      var sr = $(this).serializeArray(),
          options = [];

      result[sr[0].value] = {}; // insert Product value and initiate it as object

      $.each(sr, function() {  // loop start for each checkbox

        if(this.name == 'option') {

            options.push(this.value);

        }

      });

      // if all checkbox are checked then insert the property optionAll

      if(options.length == $('input[type="checkbox"][name="option"]',this).length) {

        result[sr[0].value].optionAll = 'Option All';  

      }

      result[sr[0].value].option = options;

   });

   console.log(result);
});

contestado el 03 de mayo de 12 a las 18:05

¡Gracias por tu ayuda! Encontré un par de cosas: OptionAll siempre se pasa aunque no esté marcada, y la opción 1 y/o la opción 2 no se pasan aunque estén marcadas. ¿Tú también lo ves? - Mattb

Me lo imaginé. ¡Gracias de nuevo! - Mattb

Hola, codeparadox, ¿cómo modificaría el código si necesito aplanar el JSON así: productos = { "sku": "ProductA", "opción": ["Opción 1"] // solo se marca 1 casilla de verificación}, " sku": "ProductB", "optionAll": "Option All", "option": ["Option 1", "Option 2"] // ambas casillas de verificación están marcadas } } - Mattb

Para serializar como una cadena JSON un objeto javascript, simplemente use 

JSON.stringify(myobject)

Entonces tu trabajo es principalmente hacer el objeto:

 var products = {
 };

 products['ProductA'] = $('input[name="Products"]').find(':checked').val();

y así...

Pero realmente debería cambiar un poco su html: realmente debería evitar tener entradas con nombres idénticos. Trate de darles una identificación por lo menos.

contestado el 03 de mayo de 12 a las 17:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.