sending all POST data with JavaScript

an AJAX context

[dhiggerdhigger]

I'm trying to implement some AJAX. A form is filled in, which activates it. Some JavaScript takes the form's POST data and sends it on to a PHP script which returns appropriate XML. My problem is, the JS sends only one variable from the form which is labelled "answer". I want to also send to my PHP script another bit of the POST data, which is labelled "correct".

The relevant JavaScript code is

/* Send the POST request */
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send('answer=' + target.elements['answer'].value); 

This works fine, and the value for answer turns up.

I don't know how to xmlhttp.send more than one piece of POST data. This might work -

xmlhttp.send('correct=' + target.elements['correct'].value); 

...if the previous xmlhttp.send hadn't already been done. Do I need to create an array? If so, what would it look like? I'm guessing I need to make the xmlhttp.send just once and send all the info together. I've been playing around with it but can't get it to work!

[RonPK]

Make one long sendstring, just as if it were a GET request.

xmlhttp.send('foo=1&bar=2&bla=3');

[dhiggerdhigger]

Thankyou for posting Ron.

For any others who are trying to do this the whole code line is

xmlhttp.send('answer=' + target.elements['answer'].value + '&correct=' + target.elements['correct'].value);

I was implementing the Ajax Tutorial from the yourhtmlsource website, and trying to extend it.

Dave

[Bernard Marx]

Good to see you have it fixed. Here's a note to make it cleaner. You don't need the [] if you are hardcoding the element names:

xmlhttp.send('answer=' + target.elements.answer.value + '&correct=' + target.elements.correct.value);

[dhiggerdhigger]

Thanks for that!

Under what circumstance would the other way

target.elements['correct'].value

be used?

[RonPK]

Hardly ever, me thinks...

The array-style notation can be useful when you need to loop through all the elements of a form. In that case, use the index to refer to the element, i.e. form.elements[2] refers to the third element in the form.

The only other situation where array-style notation can be useful is when a field's name contains square brackets. For instance for handling by a server-side script:

<input type="text" name="foo[]"><br>
<input type="text" name="foo[]">

In that case you'll need this lovely syntax to get the value of the second field:

form.elements['john[]'][1].value

---

One more thing, dhigger: you may want to escape the values you send to the server.

escape(target.elements['answer'].value)

That prevents user input like '&answer=foo' from making a mess of your query string.

[Bernard Marx]

1) When the memberName is "arbitrary". eg:

var moodValue = target.elements[isHappy()?"happy":"sad"].value;

2) When the memberName isn't JS-legal:

PHP expect form elements that share a name - thus creating an array of values on the server-side - to have the names suffixed with [].
<form name="f0">
<input type="checkbox" name="thing[]">
<input type="checkbox" name="thing[]">
....
</form>
....
var checks = document.forms.f0.elements["thing[]"];
----------------

In Javascript, these are synonyms:

myObject.aMemberName
myObject["aMemberName"]

Actually, you can use the latter form to get/set a property with any string. However, If it isn't a legal JS "dot syntax" memberName, then you are restricted to always using "square bracket syntax" to access it.

This feature is applied to all objects you'll come across in a scripting environment.