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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How to send multiple requests or values to a page using AJAX

    I'm working in a website to sale shoes. I have a description page where people select sizes and colors of shoes. I have a page of product detail called (product_det.php) where people select the shoes sizes and send the value to (ajax_items.php) which do a search and list the colors found. Then when you click over the color image send the value to (ajax_items.php) again which shows quantity and all detail information about the product.

    My problem is that I need to send the size and color request to the ajax code and I don't know how to do it.

    This is the Ajax Code I am using:

    Code:
    function getcod(value) {
       $.post("ajax_items.php", {item_size:value}, function(data) {
         $("#results").html(data);
            // data is what the PHP page echoes
        });
      }
    I was trying something like: $.post("ajax_items.php", {item_size:value, pro_color:value}, function(data)
    but this sends the same to ajax_items.php value for size and color.

    This is the html code from where I send the request:

    Code:
    REQUEST FOR SIZE:
    <select class="texto2" id="item_size"  name="item_size" onchange="getcod(this.value)">
                  <option value="1">Size 1</option>
                   <option value="2">Size 2</option>
              </select> 
    
    REQUEST FOR COLOR:
    <select class="texto2" id="pro_color"  name="pro_color" onchange="getcod(this.value)">
                  <option value="1">Red</option>
                   <option value="2">Black</option>
              </select>

    I will appreciate any help about this matter.

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Try this:

    Code:
    <form>
    ...
    <select class="texto2" id="item_size"  name="item_size" onchange="getcod(this);">
    ...
    <select class="texto2" id="pro_color"  name="pro_color" onchange="getcod(this);">
    ...
    </form>
    Code:
    function getcod(select) {
    	var itemSize = select.id === 'item_size' ? select.value : select.form.item_size.value,
       	    proColor = select.id === 'pro_color' ? select.value : select.form.pro_color.value;
    
       	$.post("ajax_items.php", {item_size:itemSize, pro_color: proColor}, function(data) {
       	   	$("#results").html(data);
       	   	// data is what the PHP page echoes
       	});
    }

  • #3
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Problem with multiple request

    Hi glenngv...
    Thank you very much for your response. I really appreciate it but I have one more trouble here.

    I realized that when I send the size request to the Ajax Code, I will get all color images found for that shoe size and then when I click over the image I will send the color request to the Ajax code to get all shoe details. This means the Ajax Code will first get the size request and will bring the results (images with different shoe colors) and second the Ajax Code will get color request and will bring the results (quantity in stock, price, etc.). Could you help me to figure out how to change the code to do this?

    The html code would be something like:

    Code:
    ...
    <select class="texto2" id="item_size"  name="item_size" onchange="getcod(this);">
    ...
    
    ...
    <a href="#" onclick="getcod(pro_color_value);"><img src="images/img_name"></a>
    ...
    The size list box and images would be in different places, they won't be in the same form. In fact, the images won't be in any form.


  •  

    Tags for this Thread

    Posting Permissions

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