javascript - 使用ajax在while循环中更新MySql数据库记录 - 仅更新第一行

Question

当我点击“Upisi”按钮时，它对第一条记录工作正常，但在所有其他记录上它都不起作用。

ocitanja.php:

<?php
include_once("header.php");
require("spajanje.php");
if(!isset($_POST["ulica"]))
{
	header('Location: index.php');
}
else $_SESSION["ulica"] = $_POST["ulica"];
echo "Očitač: " . $_SESSION["ocitac"] . "</br></br>";
echo "<form action='ulica.php'><input type='submit' value='Odabir ulice'></br></br>Odabrana ulica:</br>" . $_POST['ulica'] . "</form>";
echo "</br></br>";
?>
<table>
<?php
$korisnici = mysqli_query($conn, "SELECT * FROM ocitanja WHERE ocitac ='".$_SESSION["ocitac"]."' AND ulica ='".$_POST["ulica"]."'");

while ($row = $korisnici->fetch_assoc()){
    echo "<tr><td><b>" . $row['prezime_ime'] . "</b></td></tr>";
    echo "<tr><td>Kućni broj: <b>" . $row['kbr'] . "</b></td></tr>";
    echo "<form><tr><td>
		<label>Broj plinomjera: </label><input type='text' id='bb' size='8' disabled value = '". $row['bb'] ."'></td></tr>";
    echo "<tr><td>Zadnje očitanje: " . $row['staro_stanje'] . " m<sup>3</sup></td></tr>";
    echo "<tr><td>
		<label>Očitanje: </label>
		<input id='ocitanje' type='text' size='6' value = '". $row['ocitanje'] ."'> m<sup>3</sup>
		<input onclick='myFunction()' type='button' value='Upisi'>
		</td></tr></form>";
}
?>

</table>
<?php
include_once("footer.php");
?>

ajax.js.php:

<?php
$bb2 = $_POST['bb1'];
$ocitanje2 = $_POST['ocitanje1'];
require("spajanje.php");
if (isset($_POST['ocitanje1'])) {
    mysqli_query($conn, "UPDATE ocitanja SET ocitanje='$ocitanje2' WHERE bb='$bb2'"); //Insert Query
    echo "Uspješno upisano očitanje!";
}
?>

脚本.js:

function myFunction() {
    var bb = document.getElementById("bb").value;
    var ocitanje = document.getElementById("ocitanje").value;
// Returns successful data submission message when the entered information is stored in database.
    var dataString = 'bb1=' + bb + '&ocitanje1=' + ocitanje;
    if (ocitanje == '') {
        alert("Unesi očitanje!");
    } else {
// AJAX code to submit form.
        $.ajax({
            type: "POST",
            url: "ajaxjs.php",
            data: dataString,
            cache: false,
            success: function(html) {
                alert(html);
            }
        });
    }
    return false;
}

我做错了什么？还有其他想法如何在 while 循环中分别更新每条记录吗？但是没有刷新页面。 谢谢

Answer 1

Problem

问题很简单。 在 ocitanjia.php 的这一行中:

        <label>Broj plinomjera: </label><input type='text' id='bb' size='8' disabled value = '". $row['bb'] ."'></td></tr>";

每个输入字段都有相同的 id ('bb')，因此在 script.js 中，当您调用此语句时:

    var ocitanje = document.getElementById("ocitanje").value;

jQuery 将返回第一个文本框的值，因为这是 jQuery 在遇到多个具有相同 ID 的元素时的行为方式。

Solution Though many things need to be corrected. Shortest way is to do this: In ocitanjia.php, change this

echo "<tr><td>
    <label>Očitanje: </label>
    <input id='ocitanje' type='text' size='6' value = '". $row['ocitanje'] ."'> m<sup>3</sup>
    <input onclick='myFunction()' type='button' value='Upisi'>
    </td></tr></form>";

为此:

echo "<tr><td>
    <label>Očitanje: </label>
    <input id='ocitanje' type='text' size='6' value = '". $row['ocitanje'] ."'> m<sup>3</sup>
    <input onclick='myFunction(\'". $row['bb'] ."\')' type='button' value='Upisi'>
    </td></tr></form>";

并在 script.js 中更改:

function myFunction() {
var bb = document.getElementById("bb").value;

为此:

function myFunction(bb) {

说明:将bb的值作为参数传递给函数，每次调用函数时都会传递唯一的bb值