ajax and php

[eb_developer]

I have a form that uses ajax to not only has a dependent combo box on the previous combo box selection but also has a table display when a user selects the first combo box and does the same when the user selects the second combo box.

The code works, but the problem lies when the form is submitted. The pro-newgen.php file comes up instead of process.php.

I have used a session and I don't know if that could be the problem. I have looked everywhere to try to find a solution to the problem and it seems that nobody has come across the same error.

What happens exactly is that the main page functions properly and it submits properly and goes to the process.php but then automatically jumps to pro-newgen.php. Will the xmlHTTP function not work in sync with regular forms?

The code for the main page is:


<form action="process.php" method="POST">
Broker:&nbsp;
<select name="broker" onchange="showBroker(this.value)">
<option value="">Please Choose a Broker</option>
<?
/* Display requested user information */
$result = $database->getBrokers();
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
echo "<option value=\"{$row['broker']}\"> {$row['broker']} </option>";
}
?>
</select>

<input type="hidden" name="subpro" value="1">
<input type="submit" value="Add Profile">
</form>


The code for the JavaScript file is:

// JavaScript Document using AJAX
var xmlHttp

function showBroker(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="./pro-broker.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChangedBro
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChangedBro()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("broker_info").innerHTML=xmlHttp.responseText
}
}

function showGen(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="./pro-gen.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChangedGen
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChangedGen()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("gen_info").innerHTML=xmlHttp.responseText
}
}

function showNothing(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="./pro-gen.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChangedGen
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChangedGen()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("gen_info").innerHTML=xmlHttp.responseText
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}


The code for the pro-broker.php is:


$q=$_GET["q"];

$result = $database->getBrokerInfo($q);

echo "<p>
<table class=\"bro\" align=\"center\" cellpadding=\"2\">";

$row = mysql_fetch_array($result);

echo "<tr>";
echo "<td align=\"center\">" . $row['address'] . "</td>";
echo "<td align=\"center\">" . $row['city'] . "</td>";
echo "<td align=\"center\">" . $row['state'] . "</td>";
echo "<td align=\"center\">" . $row['zip'] . "</td>";
echo "<td align=\"center\">" . $row['contact'] . "</td>";
echo "<td align=\"center\">" . $row['phone'] . "</td>";
echo "<td align=\"center\">" . $row['fax'] . "</td>";
echo "</tr>";
echo "</table>";
?>
</p><p>
<table id="tables" align="center" width="100%" border="0" cellspacing="0"
cellpadding="3">

<tr><td align="left">
Generator:&nbsp;
<select name="generator" onchange="showGen(this.value)">>
<option value="">Please Choose a Generator</option>
<option value="1">New Generator</option>
<?
/* Display requested user information */
$result = $database->getGenBro($q);
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
echo "<option value=\"{$row['generator']}\"> {$row['generator']} </option>";
}
?>
</select>
</td></tr>

</table>


and the pro-newgen.php page just has a table in it.

[rfresh]

Your showBroker() is being called from somewhere when you do a normal form submit and you don't want that. You do one or the other with Ajax, meaning, you either operate on your form in ajax mode or you submit it - but not both at the same time.

The concept takes a little getting used to but in ajax mode your sending data to the server thru your "Ajax Data Tunnel" and getting data back from the server - using JS, you can refresh your web page only in the areas you want - nice effect and getting very popular.

So, I think if you can find out how your showBroker() function is getting called when you do a normal form submit - and then stop it - you'll be ok. If you *intended* for that function to be called with a normal form submit then you have your design wrong - you can't mix JS code - or maybe I should say I wouldn't mix my JS ajax and my form submit JS code like that.