Auto-index with unchecked checkboxes problem about jquery.serializejson HOT 3 CLOSED

Thanks for the quick response.

Right, I forgot to include the invocation script:

$('form').serializeJSON({
  checkboxUncheckedValue: "0"
});

I agree that using numbered indices is the ideal solution, but with my setup it won't work that way. My inputs are all in table rows, and I want each table row to correspond to an entry in the rows[] array. Typically, numbering the rows explicitly would work, but I also need the rows to be able to be reordered, dynamically added, and dynamically removed. Then, when the rows are submitted to the server, I want to preserve the order of the rows at submission, not when the page was loaded. I don't want to have to re-index every single row whenever one is moved, added, or removed. So the best solution for my situation is to dynamically add new row[] indices by using row[] instead of row[$i], since the former will correctly index the rows at submission, while the latter only indexes them on page load, ignoring any dynamic changes.

I ended up just putting name="" on the checkboxes (making serializeJSON ignore them), and using jQuery when the form is submitted to map the checkboxes to the rows. It's definitely not ideal, but I can't find a serializeForm plugin that does what I need.

from jquery.serializejson.

Where are you getting those "0" from? How are you calling serializeJson from JavaScript and what options are you using?

In any case, having objects inside arrays is always problematic. The plugin can not know if you want to add a new element or modify the last element (since the name it's the same). The solution for this is to specify the array index to ensure they go to the right place:

<input type="checkbox" name="rows[0][replicate]" value="1" checked />
<input type="checkbox" name="rows[1][replicate]" value="1" checked />
<input type="checkbox" name="rows[2][replicate]" value="1" checked />

Now the plugin will understand those as a nested object

$('input').serializeJSON();
//=> {rows: {"0": {"replicate": "1"}, "1": {"replicate":  "1"}, "2": {"replicate": "1"}}

If you still need those elements to be an array, use the option useIntKeysAsArrayIndex:

$('input').serializeJSON({useIntKeysAsArrayIndex: true});
//=>
{
  rows:  [
    { replicate: "0" },
    { replicate: "1" },
    { replicate: "0" },
  ]
}

If you want to add "0" when unchecked, use the option checkboxUncheckedValue:

$('input[name="rows[1][replicate]"]').prop('checked', false)); // uncheck the checkbox in the middle

$('input').serializeJSON({useIntKeysAsArrayIndex: true, checkboxUncheckedValue: "0"});
//=> {rows: [{"replicate": "1"}, {"replicate":  "0"}, {"replicate": "1"}]}

But, instead of this all, I would probably just design inputs so they are W3C compatible, using plain unique property names and hidden inputs for unchecked values, for example:

<input type="hidden"     name="rows_to_replicate[0]" value="no" />
<input type="checkbox" name="rows_to_replicate[0]" value="yes" />

<input type="hidden"     name="rows_to_replicate[1]" value="no" />
<input type="checkbox" name="rows_to_replicate[1]" value="yes" checked />

<input type="hidden"     name="rows_to_replicate[2]" value="no" />
<input type="checkbox" name="rows_to_replicate[2]" value="yes" />

$('input').serializeJSON();
//=>
{
  rows_to_replicate:  [
    "0": "no",
    "1": "yes",
    "2": "no"
  ]
}

from jquery.serializejson.

Ok great.
A list of checkboxes is very tricky in HTML, because the default specification says to add the value to the form if checked, or add nothing if unchecked. Different serialization plugins might solve this problem in different ways, I opted for keeping standards as much as possible. Anyways, if your scenario is too non-standard, then it might be best to write your own jQuery code to get what you want, for example:

var serialized = [];
$('form input[type=checkbox]').each(function (i, el) {
  var $el = $(el);
  var replicated = $el.prop('checked') ? "1" : "0"
  serialized.push({replicate: replicated});
});
//=> serialized contains your checkboxes values

from jquery.serializejson.