get selected item from a dropdown list and save it to a php variable

Question

I have a dropdown list(in a php file and without form tag)

print "<select id="animal" onchange="getSelectedItem(this.value)">
<option value = "Dog"> Dog </option>
<option value = "Cat"> Cat </option>
</select>";

and a variable $selAnimal

and a javascript function

function getSelectedItem(opt){
    //$selAnimal = opt <- how do i do this?
}

As much as possible I wouldn't like the page to reload so I avoid putting this inside a form and submitting as I select. I can't get to make $.post method work. I know for a fact that this cannot be directly done since php is server side and javascript is client side. I also thought of putting the selected value inside a hidden component(span or something) and get the value from it. But I have no idea how to get it from the component. I've also seen use of AJAX or jquery but I'm not really knowledgeable enough.

I need to save this value to the php variable since I'll be using it as basis for the options in my second dropdown. For example, if I choose Dog, the dropdown list would have dog breeds as options.

I've spent days looking for possible solutions everywhere. Help would be very much appreciated. Thank you!

Yes I've tried some, one which requires reload or submit but I as I said, I'd like to avoid it. I tried post as well. But I can't make it work. I've used $post before in exporting images from charts and it worked. But this time, I can't make it work. — user974227, Aug 27 '12 at 05:37
something like $.post("file.php", name: opt); and $selname = $_POST["name"]; but this doesn't work T_T — user974227, Aug 27 '12 at 05:39
here are some links [Cascading dropdown](http://stackoverflow.com/questions/6857287/how-to-make-a-cascading-drop-down-list-in-php-using-jquery) — codingbiz, Aug 27 '12 at 05:51

score 0 · Answer 1 · answered Aug 27 '12 at 05:54

0

You cannot have the variable available to the same file since PHP declares all its variables before the JS even starts. You can however simply redirect the user to a new file where the variable is available.

Use something like this:

function getSelectedItem(opt){
    location.href = location.href + "?selAnimal=" + opt;
}

In PHP, now you can use the selAnimal variable to display something different, like this:

$selectedAnimal = $_GET["selAnimal"];
if($selectedAnimal == "dog"){
    // Whatever you want to do now
}

A better way would be to use POST with forms, but this should work fine for you as well.

answered Aug 27 '12 at 05:54

Some Guy

15,854
10
58
67

Thanks! I've tried this one before. But I think this redirects the page into the same page but with the option appended on the url. – user974227 Aug 27 '12 at 06:05
@user974227 Yes, that is what it does. Why doesn't that work for you? – Some Guy Aug 27 '12 at 06:19
it does but I don't need to reload the whole page – user974227 Aug 27 '12 at 06:25
@user974227 You'll have to do that if you want to get your value to PHP. If possible, you could try using a JS solution to building the new options. – Some Guy Aug 27 '12 at 07:53

unnikuttan · Accepted Answer · 2012-08-27T07:05:31.890

here is the solution

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#animal').change(function(){
    $.post('loadbreeds.php', { animal:$('#animal').val() },
        function(data){
            $('#breedList').html(data);
        });
    });
});
</script>

<form method="post" >
    <div id="animalList">
        <select id="animal" name="animal">
            <option value="">--Select--</option>
            <?php if (!empty($animals)) { foreach ($animals as $value) { ?>
                <option value="<?php echo $value['animalKey']; ?>"><?php echo $value['animalName']; ?></option>
            <?php }} ?>
        </select>
    </div>
    <div id="breedList">
        <select id="breed" name="breed">
            <option value="">--Select--</option>
        </select>
    </div>
    <input type="submit" value="Submit" />
</form>

code for loadbreeds.php

$animalKey = $_POST['animal'];
$breeds = selectByKey($animalKey); // code for selecting breeds

<select id="breed" name="breed">
    <option value="">--Select--</option>
    <?php if (!empty($breeds)) { foreach ($breeds as $value) { ?>
        <option value="<?php echo $value['breedKey']; ?>"><?php echo $value['breedName']; ?></option>
    <?php }} ?>
</select>

score 0 · Answer 3 · answered Aug 27 '12 at 06:57

Try the following, to rebuild the second dropdown:

http://jsfiddle.net/kAY7M/59/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

print "<script type=\"text/javascript\">var AnimalTypeList = [\"Dog1,Dog2,Dog3,Dog4\",\"Cat1,Cat2,Cat3,Cat4\"];</script>";

<script type="text/javascript">

$("#animal").change(function () {
    var sel = $("#animal").prop("selectedIndex") - 1;
    var list = AnimalTypeList[sel].split(",");
    var Counter = list.length;
    $("#type").children().remove();
    for (var i = 0; i < Counter; i++) {
        $("#type").append("<option value = '" + list[i] + "'> " + list[i] + "</option>");
    }    
})

</script>

I could do a pure Javascript only version too, but that is a bit more code.

get selected item from a dropdown list and save it to a php variable

3 Answers3