PHP错误的数据库编辑

Question

I'm setting up a dynamic webpage that will be used as a time stamp for employes. After you log in, you will write down when you started work, how long the break was, when you finished and so on.. Problem is that every time I wanna change something on the webpage, for example I want to change my break time, it won't change and shows me the user_id instead. I'm still a beginner when it comes to PHP and don't know where the problem is..here are some code snippets

<div class="header">
    <ul>
        <li>
            <p class="text">HourBook</p>
        </li>
    </ul>
</div>

<table class="table table-striped table-bordered">
    <tr>
        <th class="luecke1">Name</th>
        <th class="luecke2">Start Time</th>
        <th class="luecke3">Pause</th>
        <th class="luecke4">End Time</th>
        <th class="luecke5">Comments</th>
        <th class="luecke6">Duration</th>
    </tr>

    <?php
    $connect = new mysqli('localhost', 'root', '', 'hourbook');

    $result = $connect->query("SELECT * FROM data");
    if ($result->num_rows > 0) {
        while ($row = $result->fetch_assoc()) {
            $id = $row['id'];
            echo "<tr>";
            echo "<td class='luecke1'><input style='border:none; width:100%; background:rgba(0,0,0,0)' contenteditable='true' id='editor" . $id . "' value='" . $row['user_id'] . " ' onchange='pruefung({currentid:" . $id . ",currentfieldname:\"user_id\"})'></input></td>";
            echo "<td class='luecke2'><input style='border:none; width:100%; background:rgba(0,0,0,0)' contenteditable='true' id='editor" . $id . "' value='" . $row['start_time'] . " ' onchange='pruefung({currentid:" . $id . ",currentfieldname:\"start_time\"})'></input></td>";
            echo "<td class='luecke3'><input style='border:none; width:100%; background:rgba(0,0,0,0)' contenteditable='true' id='editor" . $id . "' value='" . $row['pause_time'] . " ' onchange='pruefung({currentid:" . $id . ",currentfieldname:\"pause_time\"})'></input></td>";
            echo "<td class='luecke4'><input style='border:none; width:100%; background:rgba(0,0,0,0)' contenteditable='true' id='editor" . $id . "' value='" . $row['end_time'] . " ' onchange='pruefung({currentid:" . $id . ",currentfieldname:\"end_time\"})'></input></td>";
            echo "<td class='luecke5'><input style='border:none; width:100%; background:rgba(0,0,0,0)' contenteditable='true' id='editor" . $id . "' value='" . $row['comments'] . " ' onchange='pruefung({currentid:" . $id . ",currentfieldname:\"comments\"})'></input></td>";
            echo "<td class='luecke6'><input style='border:none; width:100%; background:rgba(0,0,0,0)' contenteditable='true' id='editor" . $id . "' value='" . $row['total_time'] . " ' onchange='pruefung({currentid:" . $id . ",currentfieldname:\"total_time\"})'></input></td>";
        }
    } else {
        echo "No results!";
    }
    ?>

    <script>
        var oldValue;

        function pruefung(params) {
            var newValue = document.getElementById('editor' + params.currentid).value; //editor id verknüpfung falsch?
            if (oldValue == newValue) {
                console.log("no changes");
            } else {
                console.log("changes");
                $.ajax({
                    url: "update.php",
                    type: "POST",
                    data: {
                        value: newValue,
                        id: params.currentid,
                        fieldname: params.currentfieldname
                    },
                    success: function(data) {
                        alert("Saved successfully!");
                        document.location.reload(true);
                    },
                    error: function(data) {
                        alert("error: " + data);
                    }
                })
            }
        }
    </script>


</table>

Answer 1

In your AJAX call you have : var newValue = document.getElementById('editor' + params.currentid).value;

In your table, for each row you have : id='editor" . $id . "'. This is a duplicate of ids.

When doing var newValue = document.getElementById('editor' + params.currentid).value; You are getting the first element that has this id, that's why newValue is always the id (the first row holding the id value)

I suggest you to remove that var newValue = ... but instead insert the value in the object you pass as parameter of pruefung(), such as onchange='pruefung({currentid:" . $id . ",currentfieldname:\"user_id\",value:\"" . $row['user_id'] . "\"}) for the id row, onchange='pruefung({currentid:" . $id . ",currentfieldname:\"user_id\",value:\"" . $row['start_time'] . "\"}) for the start time row, and so on...

And then, in your AJAX call, replace var newValue = document.getElementById(...) by var newValue = params.value