How to send (put) "Array" values into XMLHttpRequest Object Ajax Request?

Question

We can send (put) single values to send into XMLHttpRequest with Ajax. But how to send "Array" element's values?

EXAMPLE#1 (Ok!)
For this simple value:

<input type="hidden" name="param" value="hello" />

We can simply put the value into XMLHttpRequest object like:

xmlhttp.open("GET","ajax.php?param="+document.getElementById("param").value,true);
xmlhttp.send();

Above method is simple and ok.
But how about to send (put) "Array" values?

EXAMPLE#2 * (Problem with Array Values)

<input type="hidden" name="param[]" value="hello" />
<input type="hidden" name="param[]" value="world" />
...
xmlhttp.open("GET","ajax.php?params="+document.getElementById("param").value,true);

Note: Server side will be with PHP.

Quentin · Accepted Answer · 2011-12-18 11:42:30Z

3

There is no difference (except for a slight change in name). They are just elements with [] in the name attribute as far as HTML, JavaScript and HTTP are concerned. Only PHP is picky about naming conventions for form controls (every other server side language I've encountered deals with expectations of single or multiple values on the server alone, instead of both the server and the client)

The problem is that your initial approach isn't going to work (except in old IE and IE in quirks mode). getElementById gets an element by its ID and your elements only have names.

You can either give the elements IDs or use getElementsByName('param[]') and loop.

Note that you also need to use encodeURIComponent on the data to make it safe for sticking in a URL.

var inputs = document.getElementsByName('param[]');
var query = [];
for (var i = 0; i < inputs.length; i++) {
    var input = inputs[i];
    query.push( encodeURIComponent(input.name) + '=' + encodeURIComponent(input.value) );
}
var url = "ajax.php?" + query.join('&');

edited Dec 18, 2011 at 11:42

answered Dec 18, 2011 at 11:18

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

夏期劇場 Over a year ago

I can't get what you give. Also, what is var input = inputs[1; means ? With single bracket [1 ?

夏期劇場 Over a year ago

Seems your script has error inside for loop. Coz i can't even alert("aaaa"); after the loop.

Quentin Over a year ago

Fixed. It has been a long time since I manually constructed a query string.

夏期劇場 Over a year ago

Ya its now send with the values ?param[]=one&param[]=two&param[]=three. But can't catch from the php. How should i ?

夏期劇場 Over a year ago

Woah! Thats so great!! I couldn't get before because POST method didn't work and now its ok with GET method. So great!! :)

Collectives™ on Stack Overflow

How to send (put) "Array" values into XMLHttpRequest Object Ajax Request?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related