CODEWITHSUNDEEP
javascriptfor-loopappendforms
user577732
user577732

Reputation: 4056

Javascript get form array values

I have a form that is set up so that there is an add button so my user can submit multiple people at once to the site.

At first the form has an input to fill out the persons name one example below

<input type="text" name="name[]" value="Name" />

If they hit the add button another one is appended so that I'm left with the following

<input type="text" name="name[]" value="Name" /> 
<input type="text" name="name[]" value="Name" />

Then when they hit submit I'm trying to get the values of each name in Javascript and loop through them I've tried this but it's not working

var inputs = document.getElementById('formIDhere').getElementsByTagName('name');
alert(inputs.length);

I never get the alert and if I just set up a loop like this

for(int i=0; i<inputs.length; i++)

Nothing happens, any help on looping through the values of name[] in javascript would be greatly appreciated

Upvotes: 7

Views: 43022

Answers (8)

Oscar Gallardo
Oscar Gallardo

Reputation: 2698

Using JQuery you could try:

   var arr = $('#frmId').serializeArray();

serialize method offers several options that you could check in: https://api.jquery.com/serializearray/

Upvotes: 0

Анатолій ЖелезнЫйквадрат
Анатолій ЖелезнЫйквадрат

Reputation: 31

[...document.querySelector("#FORMID").elements['name[]']].map(el=>el.value); 
// Returns ["name","name",...]

Upvotes: 3

Biswadeep Sarkar
Biswadeep Sarkar

Reputation: 892

Simple approach:

var names=document.getElementsByName('name[]');

for(key=0; key < names.length; key++)  {
    alert(names[key].value);

    //your code goes here
}

Upvotes: 4

Tony Brix
Tony Brix

Reputation: 4241

this is what form elements is for

var inputs = document.getElementById('formIDhere').elements["name[]"];
alert(inputs.length);
for (i = 0; i < inputs.length; i++) {
    // your code here
}

Upvotes: 0

Voonic
Voonic

Reputation: 4775

getElementsByTagName returns the array of elements whoose tag name is specified in argument. In html there is no element whoose tag name is name.

name is an attribute given to html elements. To get elements based on name you can use

var ele=document.getElementsByName('whatevername');

ele will contain the array of elements whose name is specified. Then you can use your loop to iterate through each element.

Upvotes: 0

Duncan
Duncan

Reputation: 1550

I guess you could try:

var inputs = document.querySelectorAll("#formIDHere input[name='name[]']");
alert(inputs.length);
for (i = 0; i < inputs.length; i++) {
    // your code here
}

Upvotes: 6

Labib Ismaiel
Labib Ismaiel

Reputation: 1340

your mistake is using getElementsByTagName, which is asking for a tag called <name>, and of course you don't have it, try setting a class to the input for example and fetch it using jquery $('className') which will surely get the result correct, or using dom you can still use document.getElementById('form').elements.name but still this way might not be cross browser safe unless tested carefully

Upvotes: 0

Halcyon
Halcyon

Reputation: 57709

I think you can use document.getElementById('formIDhere').elements.name.

It will give you an array with all the values.

Upvotes: 0

Related Questions