Javascript / AJAX - get parameter array from form

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);

It's not clear what you mean when you say you want to read the array from the submitted form in JavaScript. The form is submitted to your server, no? And you said that the server code is PHP. — Pointy
– Pointy, Commented Nov 27, 2011 at 14:04
I'm sorry, that is indeed a bit weird. I should have left the submitted part out. It should be: read the array from a form when the form is submitted (when I use: document.forms[formname].submit(); ) — laarsk
– laarsk, Commented Nov 27, 2011 at 14:08
Well but why do you need "read the array" when you're submitting it? All you need to do is build the parameters for the AJAX request, and the form field names apparently already are of the form that the server expects. (If not, then why is the form created with field names like that?) — Pointy
– Pointy, Commented Nov 27, 2011 at 14:11
Also, I don't like to recommend JavaScript frameworks generally, but this particular case is one pretty good reason to consider something like Prototype, jQuery, or really any simple framework with AJAX support. There are some browser quirks that such libraries handle for you, and it really simplifies the process a lot. However, you can certainly do it all yourself if you prefer. — Pointy
– Pointy, Commented Nov 27, 2011 at 14:21
If this would be very easy when using JQuery, I'm all in for that. But, could you then explain to me how to do that? — laarsk
– laarsk, Commented Nov 27, 2011 at 14:23

Pointy · Accepted Answer · 2011-11-27 15:11:18Z

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 ) { ... } );

edited Nov 27, 2011 at 15:11

answered Nov 27, 2011 at 13:57

Pointy

415k62 gold badges600 silver badges631 bronze badges

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

13 Comments

laarsk Over a year ago

So, you are saying Javascript can't handle associative arrays, but it will handle my associative array properly? Now that seems a bit weird to me? ALso, could I then just use this in my code? var postdata document.formname.reisdata

Pointy Over a year ago

JavaScript objects can have string-named properties, but they're generally not called "associative arrays" (in JavaScript). The real point is that there's no need to even try to create a JavaScript object that mirrors the server-side associative array structure because the form (according to the HTML in your question) already has field names that reflect that.

laarsk Over a year ago

Oh ok, that sounds very reasonable! So using the code var postdata document.formname.reisdata would work? (where document.formname.reisdata would be the associative array / javascript object, instead of the manually entered array?)

Pointy Over a year ago

I don't know why it won't load, but I just looked at the code more closely and it's broken anyway :-) I'll update my answer.

Pointy Over a year ago

OK I'll add a brief description.

|

laarsk · Accepted Answer · 2011-11-30 00:25:45Z

0

Just to all the readers: In the end, I ended up using jQuery .post() and .get(). Those are extremely easy to use and a lot faster and more flexible.

answered Nov 30, 2011 at 0:25

laarsk

8727 gold badges17 silver badges36 bronze badges

Collectives™ on Stack Overflow

Javascript / AJAX - get parameter array from form

2 Answers 2

13 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related