Submit Button

[Rage]

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!