AJAX表单发送信息，PHP无法执行

Question

i had a issue with this exact form a fews days ago and was fixed with a different PHP thanks to you guys. Now i changed one thing in the form and it does not work anymore. I have alerted all the variables being sent through AJAX and they are correct values that i need. Here are the code for the HTML form:

 <?php
        include('php/connect.php');

        $chquery = "SELECT * FROM rooms";
        $chresult = mysqli_query($conn, $chquery);

        while($chrow = mysqli_fetch_array($chresult)){
            echo "<div class='edit_roomRow'>";
            echo "<h1> Rum " . $chrow['Roomnumber'] . "</h1>";
            echo "<form>";
            echo "Rumsnummer:<br> <input id='c-roomnumber' type='text' value = '" . $chrow['Roomnumber'] . "'><br>";
            echo "Beskrivning:<br> <input id='c-description' type='text' value = '" . $chrow['Description'] . "'>";
            echo "</form>";
            echo "<br>";
            *update* echo "<div class='btn btn-warning change-btn' data-value='". $chrow['ID'] . "' style='float: right; margin-top: 100px;'>Ändra</div>";
            echo "</div>";
            echo "<hr/>";
        }

        mysqli_free_result($chresult);

        mysqli_close($conn);

 ?>

The AJAX is here:

<script type="text/javascript">
    $(".change-btn").click(function(){
        var id = $(this).attr("data-value");
        var description = $("#c-description").val();
        var roomnumber = $("#c-roomnumber").val();
        //Call to ajax
        $.ajax({
            method:"GET",
            url: "php/changepost.php",
            data:{ id: id, description: description, roomnumber: roomnumber },
            success: function(){
                $("#c-description").val("");
                $("#c-roomnumber").val("");
                //Reload specific div with rooms, avoid full page reload
                $(".changerooms").load(location.href + " .changerooms");
            }
        })
    })
</script>

I have tried changing around the variables, in the php etc.

<?php
    mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
    include('connect.php');

    if(isset($_GET['id'])){
        $stmt = mysqli_prepare($conn, "UPDATE rooms SET Roomnumber = ?, Description = ?, WHERE ID = ?");
        mysqli_stmt_bind_param($stmt, "isi", $_GET['roomnumber'], $_GET['description'], $_GET['id']);
        mysqli_stmt_execute($stmt);
    }

    mysqli_close($conn);

?>

The DB is setup like this:

ID | Description | Roomnumber| Cleaned | Cleaner | Time

The last three are irrelevant here but figued i show the full db setup. I can add new posts etc. with the same values but when it comes to changing something isn't right with this code. Hope someone can help me with this :)

Answer 1

You're reusing the same IDs in each DIV, you need to use classes instead. Then use DOM traversal functions to get the value of the input in the same DIV as the button the user clicked on.

This will require moving the </div> for the .edit_roomRow DIV to after the .change-btn DIV, so it's in the same DIV as the form.

PHP:

<?php
include('php/connect.php');

$chquery = "SELECT * FROM rooms";
$chresult = mysqli_query($conn, $chquery);

while($chrow = mysqli_fetch_array($chresult)){
    echo "<div class='edit_roomRow'>";
    echo "<h1> Rum " . $chrow['Roomnumber'] . "</h1>";
    echo "<form>";
    echo "Rumsnummer:<br> <input class='c-roomnumber' type='text' value = '" . $chrow['Roomnumber'] . "'><br>";
    echo "Beskrivning:<br> <input class='c-description' type='text' value = '" . $chrow['Description'] . "'>";
    echo "</form>";
    echo "<br>";
    echo "<div class='btn btn-warning change-btn' data-value='". $chrow['ID'] . "' style='float: right; margin-top: 100px;'>Ändra</div>";
    echo "</div>";
    echo "<hr/>";
}

mysqli_free_result($chresult);

mysqli_close($conn);

?>

JS:

$(".change-btn").click(function(){
    var div = $(this).closest(".edit_roomRow");
    var id = $(this).attr("data-value");
    var description = div.find(".c-description").val();
    var roomnumber = div.find(".c-roomnumber").val();
    //Call to ajax
    $.ajax({
        method:"GET",
        url: "php/changepost.php",
        data:{ id: id, description: description, roomnumber: roomnumber },
        success: function(){
            div.find(".c-description").val("");
            div.find(".c-roomnumber").val("");
            //Reload specific div with rooms, avoid full page reload
            $(".changerooms").load(location.href + " .changerooms");
        }
    })
})