Need help in PHP and Ajax

Discussion in 'PHP' started by WaleedoSlayer, Sep 3, 2010.

0
  1. #1
    hi
    I'm new in this forum but I hope to get some responses to help me solve this PHP problem..

    what I'm trying to achieve mainly is to have a select-box which auto-populate when an option is selected from the first select-box, and then having another select-box which auto-populate when an option is selected from the second select-box, and so on ... im using Ajax for that.

    I have a PHP code and an HTML ajax form which work perfectly with 2 levels only ( 2 select chained-boxes) ..but I need to have a third select-box chained with the second select-box..

    here is the PHP code:

    <?php

$expectedValues = array("classifieds", "jobs", "properties");

$selectionArr['classifieds'] = array('computers', 'clothes', 'phones');
$selectionArr['jobs'] = array('accounting', 'engineering', 'medical');
$selectionArr['properties'] = array('rent', 'sale');

$thirdArr['computers'] = array('laptops', 'printers');

if (isset($_POST['second']) and in_array($_POST['second'], $expectedValues)){

    $selectedArr = $selectionArr[$_POST['second']];
    foreach($selectedArr as $optionValue){

        echo '<option>' . $optionValue . '</option>';
    }
}

if (isset($_POST['third']) and in_array($_POST['third'], $selectionArr[$_POST['second']])){
    $thirdSelected = $thirdArr[$_POST['third']];
    foreach($thirdSelected as $thirdValue){

        echo '<option>' . $thirdValue . '</option>';
    }
}
?>
    PHP:
    there are 3 arrays which hold the possible options of each option in the first select-box.
    $selectionArr['classifieds']
    $selectionArr['jobs']
    $selectionArr['properties']

    I'm trying to retrieve the currently selected array by this variable: $selectionArr[$_POST['second']]

    The $_POST['second'] variable returns the currently selected option in the first select-box.. which can be "classifieds", "jobs" or "properties".

    The problem here is that I can't retrieve $_POST['second'] variable from the first IF statement.. but it has to be retrieved inorder to return the correct array out of the 3 arrays (according to the selected one).

    here is the HTML page:

    <html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Select Dropdown</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#selectionresult").hide();

    $("#selection").change( function() {
        $("#selectionresult").hide();
        $("#result").html('Retrieving ...');
        $.ajax({
            type: "POST",
            data: "second=" + $(this).val(),
            url: "options.php",
            success: function(msg){
                if (msg != ''){
                    $("#selectionresult").html(msg).show();
                    $("#result").html('');
                }
                else{
                    $("#result").html('<em>No item result</em>');
                }
            }
        });
    });

    $("#selectionlvl3").hide();

    $("#selectionresult").change( function() {
        $("#selectionlvl3").hide();
        $("#result").html('Retrieving ...');
        $.ajax({
            type: "POST",
            data: "third=" + $(this).val(),
            url: "options.php",
            success: function(msg){
                if (msg != ''){
                    $("#selectionlvl3").html(msg).show();
                    $("#result").html('');
                }
                else{
                    $("#result").html('<em>No item result</em>');
                }
            }
        });
    });
});
</script>

</head>

<body>
<p>
    <select id="selection" style="width: 194; height: 145" size="10">
        <option value="">
            - Select Item Here -
        </option>
        <option value="classifieds">
            List of Classifieds
        </option>
        <option value="jobs">
            List of Jobs
        </option>
        <option value="properties">
            List of Properties
        </option>
    </select>

    <select id="selectionresult" style="width: 194; height: 145" size="10"></select>
    <select id="selectionlvl3" style="width: 194; height: 145" size="10"></select>
</p>
<p id="result">&nbsp;</p>

</body>

</html>
    HTML:
    hope to get this problem solved soon..

    Thank You in advance
     
    Last edited: Sep 3, 2010
    WaleedoSlayer, Sep 3, 2010 IP
  2. dakshhmehta

    dakshhmehta Active Member

    Messages:
    220
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    85
    #2
    I would like to use server side HTMl. means, just write whole code in php file that is options.php and just use .html() to apply it on client..

    That is..

    $("#result_div").html(msg)

    Or something like that..

    Hope it willl be helpful for you
    thank you..
     
    dakshhmehta, Sep 4, 2010 IP
  3. WaleedoSlayer

    WaleedoSlayer Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    thank you dakshhmehta for your reply..

    well thats exactly what I have in my HTML file..

    the problem isn't in applying the PHP to the client, im trying to retrieve the selected option from the 2nd select-box, by $selectionArr[$_POST['second']]
    but I cant get it to work because [$_POST['second'] which was sent by the ajax form can be used only once in the PHP file..

    I'm not very good in Ajax, but i need to get this done..
    i will be donating 10$ for anyone who can get me a similar working code which uses Ajax or JSON to chain multiple select boxes (or drop-down menus)

    thank you
     
    WaleedoSlayer, Sep 4, 2010 IP