CODEWITHSUNDEEP
javascriptphpjquerymysqlajax
Eka
Eka

Reputation: 15000

How using ajax can update mysql database from dropdown menu

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

Upvotes: 1

Views: 3546

Answers (1)

Randhir
Randhir

Reputation: 765

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";}
   }   

  ?>

Upvotes: 2

Related Questions