How using ajax can update mysql database from dropdown menu

Question

As the question suggest can you tell me how i can update mysql database using a dropdown menu with the help of ajax. I want to update my database with out reloading my whole webpage.When a user click edit button the selected option from the drop down list is updated. After searching a while i found some tutorials for this method and took ajax codes from there. But when i tried those in my database; it didn't worked out. Below is the sample code for my php script, parent file contains both ajax script and php code in a single php file called samefile.php. Below script only contains the problematic codes, some html and php codes are intentionally removed.

  //THIS AJAX SCRIPT FETCHES VALUES FROM THE SELECTED DROPDOWN 
<script>

    function get_da(str){
        $.ajax({
            url: "samefile.php",
            type: "POST",
            async: true, 
            data: { dropdown1:$("#dropdown").val()}, //your form data to post goes here as a json object
            dataType: "html",    
            success: function(data) {
                $('#output').html(data); 
                drawVisualization();   
            },  
        });
    } 
);
</script>
///////////////////////////////FIRST BLOCK//////////////////

<?php
//THIS PHP SCRIPT GENERATES DROP DOWN VALUES FROM DATABASE
echo "<select name='dropdown' onChange='get_da(this.value)'>";
while ($row = mysql_fetch_array($result)) 
{

    if($row['id']==$row['user'])
    {
        echo "<option value='" . $row['id'] . "' selected>" . $row['name'] . "</option>";
    }
    else{

        echo "<option value='" . $row['id'] . "'>" . $row['name'] . "</option>";
    }

}
echo "</select>";
/////////////////////////////SECOND BLOCK//////////////////////////////

//THIS PHP SCRIPT VALIDATES THE SELECTED DROPOWN VALUE AND PASS THOSE VALES FOR FURTHER PROCESSING.
if(isset($_REQUEST['dropdown1']))
{
    $name=get_the_selected_dropdown_name; //i dont know how to fetch name from dropdown menu                    
    $sql = "UPDATE table SET name = '$name' WHERE id =10";

    mysql_real_escape_string($sql);
    $result = mysql_query($sql) or die (mysql_error());
    if ($result==1)  { 
        echo "Success";
    }
    else { echo "Failed";}
}   
//////////////////////////////THIRD BLOCK////////////////////////////////////
?>

I believe this is how my above script works. when a user select a particular option from the drop down menu this function onChange='get_da(this.value)' sends the value (both id and name) to ajax query. in ajax query the drop down values are collected (both id and name) and renames as dropdown1 (data: { dropdown1:$("#dropdown").val()}) and pass it to php script inside the same file. Php script confirms the request from ajax using this if(isset($_REQUEST['dropdown1'])) and the script inside will be executed.

Please forgive me if i made a mess of my code. I suck at java script and ajax so am not sure whether my coding is right for those scripts. if possible can you suggest any other scripts for updating mysql database using ajax drop down list.

EDITED

ID                        DROPDOWN VALUE
1                           ROY
2                           TOM
3                           CHASE
4                           THOMAS
5                           GEORGE
6                           MICHAEL

what exactly do you require that is the user can change the drop down value and once he clicks on edit you want that drop down value to be updated to your DB — NaveenThally
– NaveenThally, Commented Nov 1, 2014 at 12:45
@NaveenThally i was looking for updating database by pushing edit but i am also willing to update my database by simply selecting drop down list. If you can give solution for both methods will be helpful — Eka
– Eka, Commented Nov 1, 2014 at 13:21
Did you notice that you're setting the variable $submit and not using it, also that the next line uses a variable $name, which doesn't exist? Perhaps you intended to write $name = $_POST["dropdown1"]; ? — enhzflep
– enhzflep, Commented Nov 1, 2014 at 13:46
As i told that i have no experience in ajax and js so i copied those codes from some tutorial websites and tried to modify my php script according to it. i copied this idea $submit = $_POST["dropdown1"]; also from there — Eka
– Eka, Commented Nov 2, 2014 at 6:02

Randhir · Accepted Answer · 2014-11-24 13:46:27Z

2

have tried by printing the value you are sending in ajax request. You are passing this.value to your function get_da(str). But I think you are using it anywhere , In ajax post you are sending the value like

data: {dropdown1:$('#dropdown').val()}

But this will not post your selected vaule from dropdown, Try like this:

<script>

function get_da(this){
    var id = $("#dropdown option:selected").val();
    var selectedName = $("#dropdown option:selected").text();
    $.ajax({
        url: "samefile.php",
        type: "POST",
        async: true, 
        data: { dropdown1:id, name:selectedName}, //your form data to post goes here as a json object
        dataType: "html",    
        success: function(data) {
            $('#output').html(data); 
            //drawVisualization();   
        },  
    });
} 

</script>

Hope this will work.

Your dropdown script should be like this:

<?php

echo "<select name="dropdown" onchange="get_da()" id="dropdown">";
while ($row = mysql_fetch_array($result)) 
{

if($row['id']==$row['user'])
{
    echo "<option value='" . $row['id'] . "' selected>" . $row['name'] . "</option>";
}
else{

    echo "<option value='" . $row['id'] . "'>" . $row['name'] . "</option>";
}

}
echo "</select>";

This will send your selected value from drop down to your samefile.php.And also you are not doing good with your php script it should be like:

 if(isset($_REQUEST['dropdown1']))
 {
  $id=$_REQUEST['dropdown1'];
  $name=$_REQUEST['name'];
  $sql = "UPDATE table SET name = '$name' WHERE id ='$id'";

   mysql_real_escape_string($sql);
   $result = mysql_query($sql) or die (mysql_error());
   if ($result==1)  { 
    echo "Success";
   }
   else { echo "Failed";}
   }   

  ?>

edited Nov 24, 2014 at 13:46

answered Nov 21, 2014 at 10:56

Randhir

7754 gold badges11 silver badges25 bronze badges

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

4 Comments

Eka Over a year ago

thanks for the reply. i have included more information for detailed undestanding of the script. when a user select particular dropdown value (eg:TOM) the ajax script should fetch the selected value and then pass those value to php script for updating database. The above ajax script is not working with my PHP. I am bad at AJAX,if possible can you provide full script with ajax and php.

Randhir Over a year ago

Please elaborate your question. I didn't understood if you want update selected id in the database or you want to update the name for selected id ?

Eka Over a year ago

i want to pass both ID and name. In the third block, the database update name against a particular id. The real script for third block is like this $sql = "UPDATE table SET name = '$name' WHERE id ='$id'"; $id is the variable of another table.

Randhir Over a year ago

updated according to your requirements.I think now you should not have any issue.

Collectives™ on Stack Overflow

How using ajax can update mysql database from dropdown menu

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related