Dynamic variable onchange of dropdown menu

Question

a http://img62.imageshack.us/img62/5582/20704606.jpg

The dropdown menu above have 3 values;

i)   Staf DC   
ii)  Admin
iii) Staf DT

The "Owner" column value (hafiz) comes from a database. Each value from the downdown have different "Owner" value. I want it to be done like this;

If Staf DC is selected, it will run this query:

$query = "SELECT * FROM owner where type='Staf DC'";

If Admin is selected, it will run this query:

 $query = "SELECT * FROM owner where type='Admin'";

Also, the value on the "Owner" column in the table should change automatically without refreshing the page. Can someone show me an example how to do this?

You have to send ajax call to get data on option change, This may help webdeveloper.com/forum/showthread.php?t=211952 — Adil
– Adil, Commented May 3, 2012 at 6:54

nithi · Accepted Answer · 2012-05-03 07:40:43Z

4

Below code calls the jquery function in the onchange of the dropdown. Jquery function passes the selected dropdown value to getdata.php, processes it and echoes the owner name. Then the owner name is shown in the label box.

dropdown code

echo '<table><tr><td>ModelNo.</td><td>';
echo "<select id='typeval' onchange='changeOwner();'>";
echo "<option value='Staf DC'>Staf DC</option>";
echo '</select></td>';
echo "<td><label id='own'>hafiz</label></td></tr></table>";

jquery code

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function changeOwner()
{
    var selname = $("#typeval option:selected").val();  
    $.ajax({ url: "getdata.php",

        data: {"selname":selname},

        type: 'post',

        success: function(output) {
            $("#own").html(output);
        }

    });
}
</script>

php code (getdata.php);

$selname = $_POST['selname'];
$query = "SELECT * FROM owner where type='$selname'";
$res = mysql_query($query);
$rows = mysql_fetch_array($res);
echo $rows['owner']; //assumed that the column name in db is owner

answered May 3, 2012 at 7:40

nithi

3,9072 gold badges22 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Hafiz Abdullah Over a year ago

It works but how can I display it on the same page of the dropdown? I change the type to get and it overlaps the page.

nithi Over a year ago

Sorry I can't understand. What is same page of the dropdown and overlaps the page

nithi Over a year ago

Label is in the page where dropdown exists. getdata.php only echoes the output and the output is added to the innerhtml of the label.

Hafiz Abdullah Over a year ago

Sorry for the confusion. I already fixed it. It works perfectly. Thanks.

maxdec · Accepted Answer · 2012-05-03 07:49:37Z

If you don't want to refresh the entire page, you need to use some Javascript/Ajax. JQuery allows to perform what you need very easily with the .post() method.

First add the JQuery file to your HTML header

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

Then create a .php file with your request (for example : update_owner.php) :

<?php
    // 1. Connect to your SQL database
    // ...

    // 2. Get the type
    $type = $_POST['type'];

    // 3. Perform your query
    $results = mysql_query("SELECT * FROM owner where type=".$type);

    // 4. Get the only result you want (the first row)
    $row = mysql_fetch_array( $results );

    // 5. Return the result in json format (assuming that the name
    echo json_encode(array("responseCode" => 200, "row" => $row));

Then add some javascript (which uses JQuery) :

$("select#type").change(function() {
    // Get the value of your input field
    var type = $(this).val();

    // Set the URL
    var url = 'update_owner.php';

    // Start send the post request
    $.post(url,
        function(data){

            // The response is in the data variable
            if (data.responseCode == 200) {
                // Write the name in the right cell (with #owner id)
                $("#owner").html( data.row.name );
            }
            else {
                // Bad request
            }
        },"json"
    ); // Make sure the the response is in json format
    return false;
});

That should do it

PS : I apologize for my bad english... I'm french

Collectives™ on Stack Overflow

Dynamic variable onchange of dropdown menu

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related