FIXED! See bottom for solution.
I am having an incredibly hard time with this. I've been at it for weeks now. I am trying to use AJAX to add a new record into mysql. The PHP file works 100% but I can't seem to be able to make AJAX to work with my form which has a POST method of sending data. This is my first time here on StackOverflow btw so take it easy on me. Here is the code:
HTML code:
<form name='addform' method='POST' >
<td></td>
<td><input type='text' id='cname'></td>
<td>
<select id='fuel'>
<option value='Petrol'>Petrol</option>
<option value='Diesel'>Diesel</option>
<option value='Hybrid'>Hybrid</option>
<option value='LPG'>LPG</option>
</select>
</td>
<td>
<select id='trans'>
<option value='Automatic'>Automatic</option>
<option value='Manual'>Manual</option>
<option value='Semi-Auto'>Semi-Auto</option>
</select>
</td>
<td><input type='text' id='engine'></td>
<td><input type='text' id='doors'></td>
<td><input type='text' id='total'></td>
</tr>
<tr>
<td><input type='submit' value='Add Car' onclick='addRecord()'></td>
...
I have an external .js file to handle Javascript:
function addRecord(){
if (
document.addform.cname.value == ""
|| document.addform.fuel.value == ""
|| >document.addform.trans.value == ""
|| document.addform.engine.value == ""
|| document.addform.doors.value == ""
|| document.addform.total.value == ""
)
{
alert ("Empty >field(s) - Cannot create record");
return;
}
var mydata = null;
// Mozilla/Safari
if (window.XMLHttpRequest)
{
xmlHttpReq2 = new XMLHttpRequest ();
}
// IE
else if (window.ActiveXObject)
{
xmlHttpReq2 = new ActiveXObject ("Microsoft.XMLHTTP");
}
var cname = document.getElementById('cname').value;
var fuel = document.getElementById('fuel').value;
var trans = document.getElementById('trans').value;
var engine = document.getElementById('engine').value;
var doors = document.getElementById('doors').value;
var total = document.getElementById('total').value;
mydata = '?cname='+cname+'&fuel='+fuel+'&trans'+trans+'&engine'+engine+'&doors'+doors+'&total'+total;
alert ("To Server (Add New Record):
add.php" + mydata);
xmlHttpReq2.open('POST', "add.php" +mydata, true);
xmlHttpReq2.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttpReq2.send(null);
xmlHttpReq2.onreadystatechange = addRecordCallback;
}
The PHP code:
<?php
$link = mysql_connect ("194.81.104.27", "www", "www");
mysql_select_db ("xyz") or die(mysql_error());
$tot=$_POST[total];
$door=$_POST[doors];
$query = "INSERT INTO tbl
(ID, CARNAME, FUELTYPE, TRANSMISSION, ENGINESIZE, DOORS, TOTAL, AVAILABLE)
VALUES ('$_POST[cname]','$_POST[cname]', '$_POST[fuel]', '$_POST[trans]','$_POST[engine]', $door, $tot, $tot)";
$result = mysql_query($query);
mysql_close ($link);
?>
What happens is I put the info into the form, click the button and the alert tells me that it does indeed get the data from the form. But after that nothing happens. I think that the data is not being sent in the right format to the PHP file for some reason.
Thanks!
Solution was:
I managed to get it working! Part of the fault was that like @adeneo said I did not have the onclick='addRecord(); return false;' in there! Another thing I did was to remove the id of the form, not sure if that did anything at all. I have also attached "mydata" to the .send like so: xmlHttpReq2.send(mydata); and finally I had to remove a "?" which was in front of cname in the mydata variable gathering thing. So it was mydata = '?cname='+cname+... and I had to remove the ?. Thanks everyone for all the help!
