Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Form submit + Ajax Query

    Html Forum:
    Code:
    <table>
    	<tr>
    		<td>Size</td>
    		<td><select name="quantity">
    			<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>
    			<input type="submit">
    	</tr>
    </table>
    Ajax Script:
    Code:
    		       <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,order)
    {
       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 the values from the form into that ajax function, how would i do this?
    Last edited by VIPStephan; 06-23-2012 at 10:20 PM. Reason: corrected code indent

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    I'm no pro with AJaX, but I think it already is. One problem that I noticed in your code is that you have TWO selects named "quantity". Each object has to have a unique name.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #3
    New Coder
    Join Date
    Jun 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by WolfShade View Post
    I'm no pro with AJaX, but I think it already is. One problem that I noticed in your code is that you have TWO selects named "quantity". Each object has to have a unique name.
    Thank you for that aha, but no its not passing it in

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,516
    Thanks
    77
    Thanked 4,379 Times in 4,344 Posts
    (1) If you are using a <form> on that page, then you should *NOT* use a submit button to initiate your AJAX code. What will happen is that the AJAX code will run but then the <form> *WILL* submit, your web page is replaced, and any communication to the AJAX server is lost.

    Use an ordinary <input type="button" value="Send"/> instead.

    (2) I see NO PLACE AT ALL in any of that code where you even TRY to call either of your two AJAX functions: MakeRequest or ClearIt. How can we possibly tell what is wrong if you don't show us the code where you call those functions?

    (3) Your MakeRequest function takes two arguments (id and order yet no place in the function do you make any use at all of the order argument. Why is it there?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New Coder
    Join Date
    Jun 2012
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    (1) If you are using a <form> on that page, then you should *NOT* use a submit button to initiate your AJAX code. What will happen is that the AJAX code will run but then the <form> *WILL* submit, your web page is replaced, and any communication to the AJAX server is lost.

    Use an ordinary <input type="button" value="Send"/> instead.

    (2) I see NO PLACE AT ALL in any of that code where you even TRY to call either of your two AJAX functions: MakeRequest or ClearIt. How can we possibly tell what is wrong if you don't show us the code where you call those functions?

    (3) Your MakeRequest function takes two arguments (id and order yet no place in the function do you make any use at all of the order argument. Why is it there?
    the order in there was just me testing to try todo it

    I have that script and i don't know how i can make it send everything form the forum to the ajax function. the link i have now is

    <a href="#" onClick="MakeRequest('id')" >Add to Cart</a>

    i was just trying with the <input type="submit" /> because i have no idea how to do it
    Last edited by Sheets; 06-24-2012 at 06:59 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •