Question

I don’t like the look of normal dropdown selectors in forms, so I’ve decided to create my own version of them with some Jquery as a little learning project for myself.

The objective of the following code is to be able to submit the text inside the various “select” boxes, i.e. #cuisineSelect, #locationSelect and #priceSelect to “ajax.php” so that I can manipulate those variables further.

My problem is that for some strange reason ajax.php will not register the $_POST variable and it’s telling me that I’ve got an “undefined index”.

I did some debugging in IE9 with some developer tools and they show (at least I think so) that the variables are getting sent through to ajax.php, and ajax.php is returning a variable. Here are the screenshots.

On the real project, the user can click on the <li> options item and the text will transfer onto the selector – just like a dropdown selector.

Here is my code:

The HTML:

<div id="parentContainer" style="width:100%;">

    <div class="container"> 
        <div class="select" id="cuisineSelect">
        Cuisine
        </div>
        <div class="option" id="cuisineOption">
        <ul id="cuisineul">
            <li>Asian</li>
            <li>American</li>
            <li>Indian</li>
            <li>Fusion</li>
        </ul>
        </div>
    </div>

    <div class="container"> 
        <div class="select" id="locationSelect">
        Location
        </div>
        <div class="option" id="locationOption">
        <ul id="locationul">
            <li>Asian</li>
            <li>American</li>
            <li>Indian</li>
            <li>Fusion</li>
        </ul>
        </div>
    </div>

    <div class="container"> 
        <div class="select" id="priceSelect">
        Price
        </div>
        <div class="option" id="priceOption">
        <ul id="priceul">
            <li>Price Range</li>
            <li>Cheap ($5-$15)</li>
            <li>Medium ($16 - $20)</li>
            <li>Pricey ($21 - $35)</li>
            <li>Fine Dining ($35+)</li>
        </ul>
        </div>
    </div>

    <div class="container">
        <div class="select" id="searchButton" style="width:25px; height:20px;">
        <center><img align="center" src="images/sml_search.png" width="17" height="18" /></center>
        </div>
    </div>

</div>

<div id="result" style="z-index:10;">
result=show; 
<?php include "ajax.php"; ?>
</div>

The Jquery code (this has already been placed inside a $(document).ready function.)

$("#searchButton").click(function() { 
        /*var cuisine     = $("#cuisineSelect").html();
        var location  = $("#locationSelect").attr('value'); 
        var price     = $("#priceSelect").attr('value'); 
            $.ajax({  
                type: "POST",  
                url: "ajax.php",  
                data: "cuisine="+ cuisine +"& location="+ location +"& price="+ price,  
                success: function(){  
                    $('#result').show();  
                }  
            });  
        return false;  */

        $.post('ajax.php', 'cuisine=' + $("#cuisineSelect").text(), function () {
          $("#result").show();
       });

     });

The PHP page “ajax.php”

<?php

    //Search information
    //$cuisine = htmlspecialchars(trim($_GET['cuisine']));

    //$location = htmlspecialchars(trim($_POST['location']));
    //$price = htmlspecialchars(trim($_POST['price']));

    //echo $location;
    //echo $price;
    //$addClient  = "INSERT INTO clients (fname,lname) VALUES ('$fname','$lname')";
    //mysql_query($addClient) or die(mysql_error());

    //$value = $_POST['cuisine'];
    //$value2 = $_POST['val'];
    //echo "$value2";


    $cuisine = $_POST['cuisine'];
    echo $cuisine;

?>

Thanks very much for your help.

Answer 1

1. There is no need to write include the ajax.php file in #result div. Keep #result div empty and hidden.

2. Modify your ajax call as below:

   $.post('ajax.php', 'cuisine=' + $("#cuisineSelect").html(), function (data) {
         $("#result").html(data);
         $("#result").show();
     });

   This will show the clicked text in #result ‘div’. variable data is passed to callback function for further utilization.

3. To convert the < li > to a select box, you have to pass the values present in the div #cuisineOption to ajax.php so your PHP script can create the select box from these values.