Question

I’ve got this form, which generates an array as output, and I want to send that via AJAX to a PHP page.
The form is build up like this: [using a lot more entries]

 <input type="hidden" name="reisdata[Van]" value="'.$reisdata["Van"].'">
 <input type="hidden" name="reisdata[Naar]" value="'.$reisdata["Naar"].'">

and the php page needs to recieve the data as an array.

Now, someone showed me this piece of code, to pass an array in AJAX via POST, but I still don’t know how to read the array in javascript.

So: How can I read an array from a form, in AJAX / Javascript?
Do I just read it by typing: document.formname.reisdata ?

This is my AJAX code:

// Algemene functie om een xmlHttp object te maken. Via dit object kunnen we later Ajax calls plaatsen

function GetXmlHttpObjectReisData() {
    var xmlHttp;
    try { // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    } 
    catch (e) { // Internet Explorer
        try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } 
        catch (e) {
            try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } 
            catch (e) {
                alert("Your browser does not support AJAX!");
                return false;
            }
        }
    }
    return xmlHttp;
}
function CallAjaxReisDataFunction(serverScript,arguments)
{
    var xmlHttp = new GetXmlHttpObjectReisData(); // Functie welke wordt uitgevoerd als de call naar de server klaar is State 4)
    xmlHttp.onreadystatechange = function()
    {
        if (xmlHttp.readyState == 4) 
        {
            handleReisDataResult(xmlHttp.responseText);
        }
    }

    // Ajax call (Request naar de server met eventuele parameters (arguments))
    xmlHttp.open("POST", serverScript, true);
    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlHttp.setRequestHeader("Content-length", arguments.length);
    xmlHttp.setRequestHeader("Connection", "close");
    xmlHttp.send(arguments);
}

function callReisDataServer(serverScript,van,naar)
{
    CallAjaxReisDataFunction(serverScript,"?&reisdata=" + reisdata);
}

function handleReisDataResult(responseText)
{
    document.getElementById('reis').innerHTML = responseText;
}

This is the code someone ( @mephisto123 ) gave me before, but this works with a predefined javascript array:

var postdata = {"provincie":"123","reisdata":{"Overstap":"234","Van":"345"}};
var post = "";
var url = "data-reis-refresh.php";
var key, subkey;
for (key in postdata) {
    if (typeof(postdata[key]) == object) {
        foreach (subkey in postdata[key]) {
            if (post != "") post += "&";
            post += key + "%5B" + subkey + "%5D=" + postdata[key][subkey];
        }
    }
    else post += key + "=" + postdata[key];
}
req.open("POST", url, true);
req.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.setRequestHeader("Content-length", post.length);
req.setRequestHeader("Connection", "close");
req.send(post);

Answer 1

If the field names are generated with names like that, then there’s nothing special to be done. Just gather up the form parameters, URL-encode the names and values, and POST to the server. (That process is not exactly trivial, because you need to be sensitive to the different types of form elements and the ways that their values are determined, but the complexity has nothing to do with what the field names look like.)

As a note on terminology, in JavaScript an Array instance is indexed numerically. Using string property names is a capability of JavaScript objects in general, and one does not refer to such things as “arrays” if you don’t want JavaScript programmers to be confused, or to give you pedantic instruction like this 🙂

Again, though, in this case you’ve just got form fields with “funny” names, and JavaScript doesn’t particularly care about that.

edit — Here’s a quick attempt at a function to serialize all the elements in a form:

function serialize( form ) {
  var rv = [], el = null, opt = null;
  form = form || document.forms[0];

  function ffv( name, value ) {
    return encodeURIComponent(name) + '=' + encodeURIComponent(value);
  }

  for (var i = 0; i < form.elements.length; ++i) {
    var el = form.elements[i];
    switch (el.tagName) {
      case 'INPUT': {
        switch (el.type.toLowerCase()) {
          case 'checkbox':
          case 'radio':
            if (el.checked)
              rv.push( ffv(el.name, el.value) );
            break;
          case 'text':
          case 'password':
          case 'hidden':
            rv.push( ffv(el.name, el.value) );
            break;
        }
        break;
      }
      case 'SELECT': {
        opt = el.options[el.selectedIndex];
        rv.push( ffv(el.name, opt.value || opt.innerText) );
        break;
      }
      case 'TEXTAREA': {
        rv.push( ffv(el.name, el.value) );
        break;
      }
    }
  }
  return rv.join('&');
}

Then you’d call the function when you call “.send()” on your XHR object:

req.send( serialize() );

The function as written will by default serialize the first form on the page. You can pass it a form explicitly if necessary. It might have a couple of problems with old versions of IE, I guess; in particular I can’t remember whether “innerText” always works for <option> elements.

What that function does is look at each form element, figure out its value (and whether it should be included in the submit at all), and then create a name/value pair of the form

name=value

Both the name and the value are first encoded in that inner “ffv()” function, so that your fields will end up looking like

reisdata%5BNaar%5D=something

The whole list of inputs is then joined together with “&” to create the overall parameter set to be passed to PHP (or any other server-side language for that matter).

If you wanted to try jQuery, then the whole thing would be tremendously easier. There’s a rich API for AJAX operations, but in your case it could be as simple as

$.post( url, $('form').serialize(), function( result ) { ... } );