Ajax and forms

[yoshida]

Hi,Short version: how do I submit a form through Ajax?Longer version:I defined the variable httpRequest using an object sniffer, and created a function called loadMainBody(serverPage). This function loads data into a div called Main. The datasource is defined by the variable serverPage, using a parameter in the event trigger, which is any variant of <a href="java script://" onclick="loadMainBody(datasource.html)">clickMe</a>.Loading a page into Main is a piece of cake. Loading a form into Main is the same cake with a slightly different topping. But submitting the form data to a handler and load the handler into Main using the function loadMainBody(handler.php) is another kind of cake entirely.What would be the shortest way to do this? My guess is I have to turn the submit button into an event trigger, but that's about as far as I can manage.Any real help would be greatly appreciated. Thanks in advance.

[jesh]

If you want to submit a form using AJAX, there are basically only two steps involved.First, you need to parse through the elements in your form and create yourself a key=value string with the elements' values. There are probably a dozen different tricks you could do to get this information. The end results would need to look something like:

key1=value1&key2=value2&key3=value3&key4=value4

Next, you need to set up the AJAX POST request and send it.

var data = "key1=value1&key2=value2&key3=value3&key4=value4";xmlHttp.onreadystatechange = myReadyStateChangeHandler;xmlHttp.open("POST", "somepage.php", true);xmlHttp.setRequestHeader("Content-Type", "application/x-www-urlencoded");xmlHttp.setRequestHeader("Content-Length", data.length);xmlHttp.send(data);

[yoshida]

It's not really clear yet... how should I define the first example (your quote)? Also, isn't form data supposed to be one 'value'? Could I give an ID to the form to simplify the process (getElementFromId)?Noted differently, what function should I add to my javascript file? What should the event trigger look like? (based on the thought that the function can extract data from the form if it has a certain ID) The solution is already taking shape in my head, but I can't get it to work on my screen yet.

[jesh]

Well, you could add an onsubmit handler to the form and return false to it to prevent the form from actually submitting:

function handleSubmit(form){	var data = "";	var element;	for(var i = 0; i < form.elements.length; i++)	{		element = form.elements[i];		switch(element.type)		{			case "text":			case "password":			case "hidden":				data += element.id + "=" + element.value + "&";				break;			case "select":			case "select-one":				data += element.id + "=" + element.options[element.selectedIndex].value + "&";				break;			case "checkbox":				data += element.id + "=" + element.checked + "&";				break;		}	}	// do your ajax posting here using your "data" variable.}

[yoshida]

n'ah, I've seen this tackled in another way somewhere, where the submit button was the event trigger and the Javascript function retrieved the sended post data by form ID. But I'll try this one. Thanks.

[Synook]

The form submit action is the event trigger in this case, and just references itself for the submission data, but you could just as well have

<form id="myForm" onsubmit="return false;">

and

<input type="submit" onclick="handleSubmit('myForm');" />

with the javascript using document.getElementById(form) instead of just form to reference the form.

[yoshida]

The form submit action is the event trigger in this case, and just references itself for the submission data, but you could just as well have

<form id="myForm" onsubmit="return false;">

and

<input type="submit" onclick="handleSubmit('myForm');" />

with the javascript using document.getElementById(form) instead of just form to reference the form.

Thanks, that makes more sense to me. Which shouldn't mean one solution is better than the other. My knowledge of Javascript is too limited to make such judgement.Would this work with the function provided by Jesh? Could that function be simplified in any way?

[jesh]

Thanks, that makes more sense to me. Which shouldn't mean one solution is better than the other. My knowledge of Javascript is too limited to make such judgement.Would this work with the function provided by Jesh? Could that function be simplified in any way?

There are a hundred different ways to skin a cat. If you want to pass the ID of an element rather than a reference to the element itself, you can change my original function to this:

function handleSubmit(formID){	var form = document.getElementById(formID);	// right back where we started.	var data = "";

[yoshida]

Thanks, I'll try, and post whatever result I come up with.