HTML FORM
<table>
<tr>
<td>Size</td>
<td><select name="size">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="Extra Large">Extra Large</option>
<option value="Extra Extra Large">Extra Extra Large</option>
<option value="Extra Extra Extra Large">Extra Extra Extra Large</option>
</select>
</td>
</tr>
<tr>
<td>Quantity:</td>
<td><select name="quantity">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</td>
</tr>
<tr>
<td>Shirt Color:</td>
<td><select name="cat">
<option value="white">White</option>
<option value="grey">Grey</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
</select>
</td>
</tr>
<tr>
<td>
<a href="#" onClick="MakeRequest('.$id.')"><b>Add To Cart</b></a>
</td>
</tr>
</table>
$id is a value passed in using php.
On submit it runs the function MakeRequests and passes in the $id var.
<script type="text/javascript">
function getXMLHttp()
{
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 MakeRequest(id)
{
var xmlHttp = getXMLHttp();
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4)
{
HandleResponse(xmlHttp.responseText);
}
}
xmlHttp.open("GET", "update_field.php?id="+id, true);
xmlHttp.send(null);
}
function ClearIt()
{
var xmlHttp = getXMLHttp();
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4)
{
HandleResponse(xmlHttp.responseText);
}
}
xmlHttp.open("GET", "update_field.php?clear=asd", true);
xmlHttp.send(null);
}
function HandleResponse(response)
{
document.getElementById('cart').innerHTML = response;
}
</script>
I need it to pass in the values chosen in the form and add them to the end of the URL:
xmlHttp.open("GET", "update_field.php?id="+id, true);
I am learning ajax as i go however i cannot figure out how todo this.
Thank you for your help!