How to select all inputs having same name and index them by their name

Question

I have to handle a form generated by a third part. This form provides some checkbox "multi-select" attributes. But input name's are identical, and PHP $_POST can't handle identical keys (only the last data is handled).

Here is an example of the form :

<form>
    <input type="checkbox" name="attr1" value="1" />
    <input type="checkbox" name="attr1" value="2" />
    <input type="checkbox" name="attr1" value="3" />
    <input type="checkbox" name="attr1" value="4" />
    <input type="checkbox" name="attr2" value="xx" />
    <input type="checkbox" name="attr3" value="a" />
    <input type="checkbox" name="attr3" value="b" />
    <input type="checkbox" name="attr3" value="c" />
    <input type="checkbox" name="attr3" value="d" />
    <input type="text" name="attr4" value="" />
</form>

I'd like to parse all checkbox inputs, get only group of same name inputs, and append "[]" to their name...

What I want to get after jQuery processing :

<form>
    <input type="checkbox" name="attr1[]" value="1" />
    <input type="checkbox" name="attr1[]" value="2" />
    <input type="checkbox" name="attr1[]" value="3" />
    <input type="checkbox" name="attr1[]" value="4" />
    <input type="checkbox" name="attr2" value="xx" />
    <input type="checkbox" name="attr3[]" value="a" />
    <input type="checkbox" name="attr3[]" value="b" />
    <input type="checkbox" name="attr3[]" value="c" />
    <input type="checkbox" name="attr3[]" value="d" />
    <input type="text" name="attr4" value="" />
</form>

Is there a way to identify group of inputs with same name ?

Answer 1

You will need to use $('input[name^="attr"]') in your case. As your items has attr1, attr2, attr3 etc. The above selector will match all.

You can check this in action @ http://jsfiddle.net/cT78Y/2/

$('input[name^="attr"]:checkbox').each(function(i){
   $(this).attr("name",$(this).attr("name")+"[]");
});

This will give you.

<form>
  <input type="checkbox" name="attr1[]" value="1">
  <input type="checkbox" name="attr1[]" value="2">
  <input type="checkbox" name="attr1[]" value="3">
  <input type="checkbox" name="attr1[]" value="4">
  <input type="checkbox" name="attr2[]" value="xx">
  <input type="checkbox" name="attr3[]" value="a">
  <input type="checkbox" name="attr3[]" value="b">
  <input type="checkbox" name="attr3[]" value="c">
  <input type="checkbox" name="attr3[]" value="d">
  <input type="text" name="attr4" value="">
</form>

Hope this helps you.

Answer 2

This will append [] to the name of each checkbox item if there exists another item with the same name.

var name_map = {};
$("input[type=checkbox]")  // for all checkboxes
    .each(function() {  // first pass, create name mapping
        var name = this.name;
        name_map[name] = (name_map[name]) ? name + "[]" : name;
    })
    .each(function() {  // replace name based on mapping
        this.name = name_map[this.name];
    });

Demo: http://jsfiddle.net/gnfsG/