update the value of select box with php mysql jquery ajax

Question

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.

Thank you in advance..

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

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

No they are dynamically changing see the code is in processing.php page ` — Pavan Baddi, Feb 25 '17 at 08:41
Yes, but you are checking always the same ID. I posted an answer, so you can try it. — Armin, Feb 25 '17 at 08:43
There are so many things wrong I don't know where to start... first off... you can't have more than 1 ID, use classes. Second, you always get the same field... which is why you are always updating the first record... The guy above me had the right idea but his answer is wrong too. You need to add the ID to the attribute and then just get it with $(this).attr(data-id) or something like that or store it all in an js object. — Chris, Feb 25 '17 at 08:57
Post your HTML for Product List instead of Image. Issue is just because of ID's you have used, the script is updating same row again and again. Please use classes, or extract values by using jQuery/javascript object — Gaurav Rai, Feb 25 '17 at 09:02
When the event on change trigger it must take the value of ID= getid to fetch value. But how — Pavan Baddi, Feb 25 '17 at 10:33
@Chris Thanks for reminding me to check my answer. I focused only one one part of the code, forgot to check the rest. — Armin, Feb 27 '17 at 12:24

Armin · Accepted Answer · 2017-02-25T22:31:00.840

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

Thank for solution but their is another problem when i change the values of ` — Pavan Baddi, Feb 27 '17 at 06:09
i have asked question in this link related to my above comment [LINK](http://stackoverflow.com/questions/42480310/update-rows-status-with-jquery-change-and-display-i-respective-tableissue) . You can read the question their and can get an idea of my question . THANKS IN ADVANCE — Pavan Baddi, Feb 27 '17 at 08:04

score 0 · Answer 2 · answered Feb 25 '17 at 23:02

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>

`

update the value of select box with php mysql jquery ajax

2 Answers2

Linked