Html Element Array, Name="Something[]" or Name="Something"

HTML Element Array, name=something[] or name=something?

PHP uses the square bracket syntax to convert form inputs into an array, so when you use name="education[]" you will get an array when you do this:

$educationValues = $_POST['education']; // Returns an array
print_r($educationValues); // Shows you all the values in the array

So for example:

<p><label>Please enter your most recent education<br>
    <input type="text" name="education[]">
</p>
<p><label>Please enter any previous education<br>
    <input type="text" name="education[]">
</p>
<p><label>Please enter any previous education<br>
    <input type="text" name="education[]">
</p>

Will give you all entered values inside of the $_POST['education'] array.

In JavaScript, it is more efficient to get the element by id...

document.getElementById("education1");

The id doesn't have to match the name:

<p><label>Please enter your most recent education<br>
   <input type="text" name="education[]" id="education1">
</p>

HTML form input tag name element array with JavaScript

1.) First off, what is the correct terminology for an array created on the end of the name element of an input tag in a form?

"Oftimes Confusing PHPism"

As far as JavaScript is concerned a bunch of form controls with the same name are just a bunch of form controls with the same name, and form controls with names that include square brackets are just form controls with names that include square brackets.

The PHP naming convention for form controls with the same name is sometimes useful (when you have a number of groups of controls so you can do things like this:

<input name="name[1]">
<input name="email[1]">
<input name="sex[1]" type="radio" value="m">
<input name="sex[1]" type="radio" value="f">

<input name="name[2]">
<input name="email[2]">
<input name="sex[2]" type="radio" value="m">
<input name="sex[2]" type="radio" value="f">

) but does confuse some people. Some other languages have adopted the convention since this was originally written, but generally only as an optional feature. For example, via this module for JavaScript.

2.) How do I get the information from that array with JavaScript?

It is still just a matter of getting the property with the same name as the form control from elements. The trick is that since the name of the form controls includes square brackets, you can't use dot notation and have to use square bracket notation just like any other JavaScript property name that includes special characters.

Since you have multiple elements with that name, it will be a collection rather then a single control, so you can loop over it with a standard for loop that makes use of its length property.

var myForm = document.forms.id_of_form;
var myControls = myForm.elements['p_id[]'];
for (var i = 0; i < myControls.length; i++) {
    var aControl = myControls[i];
}

HTML Input name attribute as array - how to access values in laravel

If validation error occurs, in the controller do a redirect with input values. E.g.:

return redirect('form')->withInput();

Then in the form itself, you can put the form value like this:

<input type="text" name="user[$userId][licenseStatus]" value="{{ old('user.$userId.licenseStatus') }}">

You can double check in the laravel documentation: https://laravel.com/docs/8.x/requests#flashing-input-then-redirecting

Assign an array to the 'name' attribute in an HTML form

In the first part of your code is as mentioned item[]. This array collects the data from the input one by one and arranges it in numerically indexed form. It is just in case of PHP the indexes are added as keys.

For example: If we select multiple items (such as item1 and item2) in the input, the item[] will take the values and arrange them as:

array(
    [0] => 'item1',
    [1] => 'item2'
)

Using [] as in type=text input name?

The name attribute for an input is very flexible - you can include almost any character, although you probably don't want to explore too many options. When a form like this is submitted the data is submitted as you see it, all with the same name as you'd expect.

On the server side, however, things can be different. In this case PHP specifically will interpret a name such as testing[] as an array element, and will combine all input fields with such a name into a single array. It's a great way to pass variable length data into a PHP script.

this is not so much about HTML standards as PHP being helpful.

Form inputs with same names + serializeArray()

Divide the result into chunks and then regroup it in rows.

$('#submit').on('click',function(){
    var data = $('form').serializeArray();

  processedData = [];
  var i,j,w,temparray,chunk = 3;

  for (i=0,j=data.length; i<j; i+=chunk) {
    form = data.slice(i,i+chunk);

    var obj = {};
    for(w=0; w < chunk; w++) {

      var name = form[w].name;
      var value = form[w].value;
      obj[name] = value;

    }
    processedData.push(obj);
  }

  var json = JSON.stringify(processedData);

  $('p').append(json);
})

The result is something like:

JSON: [{"username":"User 1","about":"About 1","website":"Web 1"},{"username":"User 2","about":"About 2","website":"Web 2"}]

HTML/PHP - Form - Input as array

Simply add [] to those names like

 <input type="text" class="form-control" placeholder="Titel" name="levels[level][]">
 <input type="text" class="form-control" placeholder="Titel" name="levels[build_time][]">

Take that template and then you can add those even using a loop.

Then you can add those dynamically as much as you want, without having to provide an index. PHP will pick them up just like your expected scenario example.

Edit

Sorry I had braces in the wrong place, which would make every new value as a new array element. Use the updated code now and this will give you the following array structure

levels > level (Array)
levels > build_time (Array)

Same index on both sub arrays will give you your pair. For example

echo $levels["level"][5];
echo $levels["build_time"][5];

How can I select an element by name with jQuery?

You can use the jQuery attribute selector:

$('td[name="tcol1"]')   // Matches exactly 'tcol1'
$('td[name^="tcol"]' )  // Matches those that begin with 'tcol'
$('td[name$="tcol"]' )  // Matches those that end with 'tcol'
$('td[name*="tcol"]' )  // Matches those that contain 'tcol'

---

Related Topics