Form Input Field Names Containing Square Brackets Like Field[Index]

Form input field names containing square brackets like field[index]

What is the mechanism behind? At which
point this names that merely contain
brackets are converted to arrays? Is
this a feature of the HTPP protocol?
Of web servers? Of the PHP language?>

This is a feature of the PHP language. In fact, the HTTP protocol does not forbid the use of multiple identical GET/POST parameters. According to the HTTP spec, the following:

foo=bar&foo=baz

Should not result in foo == baz. These are two parameters with two different values. However, PHP will overwrite the former foo with the latest, resulting in $_POST['foo'] == 'baz', even if they could be parsed separately.

Continuing the previous question, is
this a commonly used hack or a normal
programming tool?

It depends on the point of view. In the PHP world, it is completely normal, as the language does not support the specification of multiple parameters of the same name without using the brackets []. In the HTTP world though, foo != foo[].

What are (all) the rules of using
brackets in input field names?

The same as PHP arrays, except that you don't have to quote string keys.

Can multidimensional arrays be created
this way?

Yes, you can.

target multiple empty input fields with same id containing brackets

The id in dom is always unique.Instead use document.querySelectorAll to get all the element with same name then loop through them and use the index to check if an element exist in the index of testArray. If so then set the value of the input

var testArray = ['hi', 'bye', 'stackoverflow'];

document.querySelectorAll('[name="numberC[]"]').forEach(function(item, index) {

  if (testArray[index]) {

    item.value = testArray[index]

  }

})

<input type="text" name="numberC[]" id="numberC[1]">

<input type="text" name="numberC[]" id="numberC[2]">

<input type="text" name="numberC[]" id="numberC[3]">

Javascript doesn't work when textbox name contains square brackets

Note that you should not add the brackets if you don't need them! It makes it unnecessary complex.

In your posted code there is no indication that you need those brackets. You normally add them if you have several input fields with the same name and you want PHP to create an array. For more information please refer to Variables From External Sources.

In case you need them, you have to use bracket notation to access the field:

document.autoSumForm['Area[<?php echo $area["area_id"]; ?>]'].value = (one * 1) * (two * 1);

Also I would suggest to not pass a value inside the brackets in the name of the field. This would simplify your code to:

<input  size="4"  type=text name="Area[]" readonly="true">

and:

document.autoSumForm['Area[]'].value = (one * 1) * (two * 1);

PHP will then create an array with continuous numerical keys starting at 0.

need to convert field name with square brackets into a javascript object

Untested, but your basic algorithm could be something like this:

The following works for me:

var form = {};
$(':input', yourFormElement).each(function(){
  var top = form;
  var path = $(this).attr('name');
  var val = $(this).val();
  var prev = '';
  while ((path.replace(/^(\[?\w+\]?)(.*)$/, function(_m, _part, _rest) {
    prev = path;
    _part = _part.replace(/[^A-Za-z_]/g, '');
    if (!top.hasOwnProperty(_part)) {
      if (/\w+/.test(_rest)) { 
        top[_part] = {}; 
        top = top[_part];
      } else {
        top[_part] = val; 
      }
    } else if (!/\w+/.test(_rest)) {
      top[_part] = val;
    } else {
      top = top[_part];
    }
    path = _rest;
  })) && (prev !== path));
});

Substitute yourFormElement with a jQuery expression to get your desired form element.

That iterates over each :input element (form inputs) and then for each loop attempts to break down the "path" of the name using a regular expression, at the same time creating and/or traversing the form data-structure that is being built up. Finally the value of the input is assigned to the leaf node that has been traversed to.

Example of it working: http://jsfiddle.net/8fpLx/10/

That series of conditions inside the while loop could be simplified a lot, but it works.

Python/Django: How to deserialize foo[]=1&foo[]=2&

Just retrieve all values with the getlist() method:

foo_list = request.GET.getlist('foo[]')

Include the brackets, they are just part of the name.

---

Related Topics