Submitting multiple form POSTs with AJAX

[Clarissa]

1) Script Title: Dynamic Ajax Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...jaxcontent.htm

3) Describe problem: I just need to submit 2 form POST variables together with 1 GET variable, the latter works fine so it's just the former that needs resolving. Here's the code:

<form method="post" action="javascript:ajaxpage('submit.php?var=foo', 'bar');">

<select name="FORM1" size="3">

<option value="Value-1">Value-1</option>
<option value="Value-2">Value-2</option>
<option value="Value-3">Value-3</option></select>

<select name="FORM2" size="3">

<option value="Value-4">Value-4</option>
<option value="Value-5">Value-5</option>
<option value="Value-6">Value-6</option></select>

<div id="bar"></div>

<br><br>

<input type="submit" value="submit" name="submit">

</form>

[jscheuer1]

I don't think you can. As far as I know, the method, regardless of whether it's via the form's generic submit or via an AJAX request, must be either POST or GET, not both.

The script you are using does GET:

page_request.open('GET', url+bustcacheparameter, true)

Other scripts can do either. But there are none that I know of that can do both at the same time. Doing an AJAX POST request requires a little additional code and isn't as widely supported by servers as is the AJAX GET request.

However, all you want to do is pass the information. This can be done as an all GET or as an all POST request.

Either way, the submit.php file will probably need to be edited in order to receive the information, though some servers will substitute GET data for POST and visa versa*. You could go all GET (using your example):

<form method="post" onsubmit="ajaxpage('submit.php?var=foo&FORM1=' + this.elements.FORM1.value + '&FORM2=' + this.elements.FORM2.value, 'bar'); return false;">

<select name="FORM1" size="3">

<option value="Value-1">Value-1</option>
<option value="Value-2">Value-2</option>
<option value="Value-3">Value-3</option></select>

<select name="FORM2" size="3">

<option value="Value-4">Value-4</option>
<option value="Value-5">Value-5</option>
<option value="Value-6">Value-6</option></select>

<div id="bar"></div>

<br><br>

<input type="submit" value="submit" name="submit">

</form>

* From PHP 4.1.0 forward, on submit.php you could substitute:

$_REQUEST

for both $_GET and $_POST and it will receive the data regardless of the method used to send it.

[Clarissa]

I don't think you can. As far as I know, the method, regardless of whether its via the forms generic submit or via an AJAX request, must be either POST or GET, not both.

The script you are using does GET:

Other scripts can do either. But there are none that I know of that can do both at the same time. Doing an AJAX POST request requires a little additional code and isn't as widely supported by servers as is the AJAX GET request.

Oh, I see, didn't know that, I'd erroneously assumed you'd be able to use both.

However, all you want to do is pass the information. This can be done as an all GET or as an all POST request.

Awesome, I've been struggling with this all week. All GET it is then.

Either way, the submit.php file will probably need to be edited in order to receive the information, though some servers will substitute GET data for POST and visa versa*. You could go all GET (using your example):

<form method="post" action="ajaxpage('submit.php?var=foo&FORM1=' + this.elements.FORM1.value + '&FORM2=' + this.elements.FORM2.value, 'bar'); return false;">

<select name="FORM1" size="3">

<option value="Value-1">Value-1</option>
<option value="Value-2">Value-2</option>
<option value="Value-3">Value-3</option></select>

<select name="FORM2" size="3">

<option value="Value-4">Value-4</option>
<option value="Value-5">Value-5</option>
<option value="Value-6">Value-6</option></select>

<div id="bar"></div>

<br><br>

<input type="submit" value="submit" name="submit">

</form>

I think we're nearly there but for some reason this isn't forwarding properly, it's giving me a 404 OBJECT NOT FOUND error and the URL is unprocessed:

http://localhost/tests/ajaxpage('submit.php?var=foo&FORM1='+this.elements.FORM1.value+'&FORM2='+this.elements.FORM2.value,'bar');return false;

I edited submit.php thusly:

$var= $_GET["var"];
$FORM1 = $_GET["FORM1"];
$FORM2 = $_GET["FORM2"];


$out = $var . ' ' . $FORM1. ' ' . $FORM2;

echo $out; 

[jscheuer1]

You're right. I just tried it out. We don't want action, we want onsubmit:

<form method="post" onsubmit="ajaxpage('submit.php?var=foo&FORM1=' + this.elements.FORM1.value + '&FORM2=' + this.elements.FORM2.value, 'bar'); return false;">

Otherwise everything else is the same. With this one change, it's working here.

One proviso though. You have as your submit.php file:

$var= $_GET["var"]; 
$FORM1 = $_GET["FORM1"]; 
$FORM2 = $_GET["FORM2"]; 


$out = $var . ' ' . $FORM1. ' ' . $FORM2; 

echo $out;

It should (and may well, you may have just left out the obvious) be:

<?php
$var= $_GET["var"]; 
$FORM1 = $_GET["FORM1"]; 
$FORM2 = $_GET["FORM2"]; 


$out = $var . ' ' . $FORM1. ' ' . $FORM2; 

echo $out;
?>

Or, to be on the safe side:

<?php
$var= isset($_GET["var"])? $_GET["var"] : ''; 
$FORM1 = isset($_GET["FORM1"])? $_GET["FORM1"] : ''; 
$FORM2 = isset($_GET["FORM2"])? $_GET["FORM2"] : ''; 


$out = $var . ' ' . $FORM1. ' ' . $FORM2; 

echo $out;
?>

You may substitute/insert default values for/into the empty single quotes in these lines:

$var= isset($_GET["var"])? $_GET["var"] : ''; 
$FORM1 = isset($_GET["FORM1"])? $_GET["FORM1"] : ''; 
$FORM2 = isset($_GET["FORM2"])? $_GET["FORM2"] : '';