CODEWITHSUNDEEP
javascriptphpjquerymysqlajax
Pavan Baddi
Pavan Baddi

Reputation: 479

update the value of select box with php mysql jquery ajax

I'm facing major issue in changing status in <select> tag to database through jquery-ajax.

Note : I have searched in stackoverflow for this question. but those answere not come close to my question. Here are those links below link1, link2, link3

When i click on first row select box the data is sent through ajax and the status column in table get updated and also it is updated in mysql database. But when is select 2nd, 3rd row it doesn't change not update the status column in html page nor in database here is the output image. output image

Thank you in advance..

Here is the details of my code database table name: ajaxselect Table image from database

HTML file: index.php

 <?php
    include('processing.php');
    $newobj = new processing();
?>
<html>
    <head>
        <title>Jquery Ajax select <tag> with PHP Mysql</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>
    <body>
        <table border="1">
            <tr>
                <th>Id</th>
                <th>Product name</th>
                <th>Status</th>
                <th>Action</th>
            </tr>
            <?php echo $newobj->display();?>
        </table>
        <script>
            $(document).ready(function(){
                $("#selectstatus").change(function(){
                    var statusname = $("#selectstatus").val();                  
                    var getid = $("#getid").val();                  
                    $.ajax({
                        type:'POST',
                        url:'ajaxreceiver.php',
                        data:{statusname:statusname,getid
                        :getid},
                        success:function(result){
                            $("#display").html(result);
                        }
                    });
                });
            });
        </script>
    </body>
</html>

Ajax file : ajaxreceiver.php

 <?php
    include('processing.php');
    $newobj = new processing();

    if(isset($_POST['statusname'],$_POST['getid'])){
        $statusid = $_POST['statusname'];
        $id = $_POST['getid'];

        $newobj->getdata($statusid,$id);
    }
?>

PHP class file : processing.php

    <?php
    class processing{
        private $link;

        function __construct(){
            $this->link= new mysqli('localhost','root','','example');
            if(mysqli_connect_errno()){
                die ("connection failed".mysqli_connect_errno());
            }
        }

        function display(){
            $sql = $this->link->stmt_init();
            $id=1;
            if($sql->prepare("SELECT id,productname,status FROM ajaxselect")){
                $sql->bind_result($id,$productname,$status);
                if($sql->execute()){
                    while($sql->fetch()){   
            ?>
                        <tr>
                            <td><input type="hidden" id="getid" value="<?php echo $id;?>"><?php echo $id;?></td>
                            <td><?php echo $productname;?></td>
                            <td><p id="display"><?php echo $status;?></p></td>
                            <td>
                                <select id="selectstatus">
                                    <option>Pending</option>
                                    <option>Delivered</option>
                                    <option>Cancelled</option>
                                    <option>Amount Paid</option>    
                                </select>
                            </td>
                        </tr>
            <?php   
                    }
                }
            }
        }

        function getdata($statusid,$id){
            $sql = $this->link->stmt_init();
            if($sql->prepare("UPDATE ajaxselect SET status=? WHERE id=?")){
                $sql->bind_param('si',$statusid,$id);
                if($sql->execute()){
                    echo $statusid;
                }
                else
                {
                    echo "Update Failed";
                }
            }
        }
    }
?>

Upvotes: 2

Views: 8023

Answers (2)

Michael Oshosanya
Michael Oshosanya

Reputation: 134

You cant use an id in that case or it will work only for the first occurence

`

<script>
        $(document).ready(function(){
                $(".selectstatus").change(function(){
                    var statusname = $(this).val();                  
                    var getid = $(this).parent().parent().children().eq(0).children().eq(0).val();                  
                    $.ajax({
                        type:'POST',
                        url:'ajaxreceiver.php',
                        data:{statusname:statusname,getid
                        :getid},
                        success:function(result){
                            $("#display").html(result);
                        }
                    });
                });
            });
        </script>

`

Upvotes: 0

Armin
Armin

Reputation: 1178

All of your select-boxes have the same id, so $("#selectstatus").val() will return always the same value. You should get value of changed element. Javascript: this.value or jQuery $(this).val() Example (notice that selectstatus is a class, so you should add a new class): HTML

<tr>
    <td><?php echo $productname;?></td>
    <td><p id="display"><?php echo $status;?></p></td>
     <td>
         <select status-id="<?php echo $id;?>" class="selectstatus" id="selectstatus">
            <option value="Pending">Pending</option>
            <option value="Delivered">Delivered</option>
            <option value="Cancelled">Cancelled</option>
            <option value="Amount paid">Amount Paid</option>    
         </select>
     </td>
   </tr>

JS

$(".selectstatus").change(function(){
     var statusname = $(this).val();                  
     var getid = $(this).attr("status-id");                  
                $.ajax({
                    type:'POST',
                    url:'ajaxreceiver.php',
                    data:{statusname:statusname,getid
                    :getid},
                    success:function(result){
                        $("#display").html(result);
                    }
                });
            });

Upvotes: 1

Related Questions