How can I update any row rather than only the top row with the update button on each side in PHP and AJAX

3024 views javascript
-3

just starting out so gonna sound like a noob question but how can I use the update button to update individual rows rather than only the top row. Whenever I use the update button, the request only goes through if it was the top row.

This is the code for the index.php

<html>
<head>
    <title>Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <center>
    <h3>UPDATE DATA</h3>

    <?php
    $run = 0;
    $conn = new mysqli('localhost', '', '', '');
    $sql = "SELECT * FROM moderator";
    $result = $conn->query($sql);
    while ( $row=mysqli_fetch_assoc($result)) {
        $run = $run + 1;
       ?>
       <div>

       ID<input type="text" id="id" value="<?php echo $row['id']; ?>">;
       Moderator<input type="text" id="mod" value="<?php echo $row['name']; ?>">;         
       Category<input type="text" id="ctgr" value="<?php echo $row['category']; ?>">;

       <button type="submit" id="update" rel="<?php echo $run; ?>">UPDATE</button>
       </div>
       <?php
    }?> 

    </center>
    <script>
        $(document).ready(function(){
            $("#update").click(function(){
                var name=$("#mod").val();
                var ctgr=$("#ctgr").val();
                var id=$("#id").val();
                $.ajax({
                    url:'update.php',
                    method:'POST',
                    data:{
                        name:name,
                        ctgr:ctgr,
                        id:id
                    },
                    success:function(response){
                        alert(response);
                    }
                });
            });
        });
    </script>
</body>

This is the code for the update.php

<?php

$conn = new mysqli('localhost', '', '', '');
$name=$_POST["name"];
$ctgr=$_POST["ctgr"];
$id=$_POST["id"];
$sql="UPDATE moderator set name='$name', category='$ctgr' where id='$id'";
if($conn->query($sql)===TRUE){
    echo "DATA updated";
}
?>

You can probably see I'm trying to create an individual variable for each row but I can't figure it out. Sorry, code's very messy too.

I've removed datebase information but the rows display when credentials are inserted.

answered question

Each of your form inputs are going to be sharing the same ID which is incorrect. Each element should have their own ID. The best way to handle this is to give each input their own unique ID and then pass the entire form request via your AJAX. Then in your PHP you can loop over the values for your update statement.

2 Answers

0

You need to change your logic to inputs have unique ID and then use the value properly.

posted this
1

All your rows input elements have same id attribute

Like id of first rows elements are like id, mod, ctgr

Also id of second rows elements are id, mod ctgr

Jquery find first element, if multiple elements of same id there

You can make unique id by apppending a uniqe thing like row number or id itself

posted this

Have an answer?

JD

Please login first before posting an answer.