使用ajax更新while循環中的MySql數據庫記錄 - 僅更新第一行

Question

當我點擊按鈕「Upisi」時，它對第一條記錄正常工作，對所有其他記錄無法正常工作。

ocitanja.php：

<?php 
 
include_once("header.php"); 
 
require("spajanje.php"); 
 
if(!isset($_POST["ulica"])) 
 
{ 
 
\t 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> 
 
\t \t <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> 
 
\t \t <label>Očitanje: </label> 
 
\t \t <input id='ocitanje' type='text' size='6' value = '". $row['ocitanje'] ."'> m<sup>3</sup> 
 
\t \t <input onclick='myFunction()' type='button' value='Upisi'> 
 
\t \t </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!"; 
 
} 
 
?>

的script.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

很難知道問題出在哪裏，但我可以看到可能出現的問題。

首先，IDs are unique在兩個元素中不應該有相同的ID。這可能是它無法正常工作的原因，因爲您總是在您的AJAX調用中使用同一對元素。所以讓我們把它們變成類。

其次，讓我們leverage jQuery，因爲你正在使用它。如果您正在使用此庫，那麼確實沒有理由使用onclick（或任何其他事件）屬性。讓我們刪除按鈕上的該屬性，然後給它一個類，例如我們將很快參考的upisi。

三，您不能將<form/>標籤置於<tr/>之間。這是無效的HTML。由於我們不需要，請將其刪除。如果要將<tr/>元素分組，請使用<tbody/>元素。現在

while ($row = $korisnici->fetch_assoc()){ 
    echo "<tbody>"; 
    echo "<tr><td><b>" . $row['prezime_ime'] . "</b></td></tr>"; 
    echo "<tr><td>Kućni broj: <b>" . $row['kbr'] . "</b></td></tr>"; 
    echo "<tr><td> 
     <label>Broj plinomjera: </label><input type='text' class='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 class='ocitanje' type='text' size='6' value='". $row['ocitanje'] ."'> m<sup>3</sup> 
     <input type='button' value='Upisi' class='upisi'> 
     </td></tr>"; 
    echo "</tbody>"; 
} 

，在你的JavaScript，讓我們重視的onclick事件處理程序.upisi按鈕。

$('.upisi').click(function() { 
    // find bb and ocitange relative to the tbody 
    var tbody = $(this).closest('tbody'); 
    // var bb = tbody.find('.bb').val(), ocitanje = tbody.find('.ocitanje').val(); 
    var bb = $('.bb', tbody).val(), ocitanje = $('.ocitanje', tbody).val(); 

    alert('bb: ' + bb + ', ocitanje: ' + ocitanje); 

    if (ocitanje == '') { 
     alert('Unesi očitanje!'); 
    } else { 
     $.ajax({ 
      type: 'POST', 
      url: 'ajaxjs.php', 
      data: { bb1: bb, ocitanje1: ocitanje }, // cleaner 
      cache: false, 
      success: function (html) { 
       // Returns successful data submission message when the entered information is stored in database. 
       alert(html); 
      } 
     }); 
    } 
}); 

最後，在使用它們之前，應該始終檢查是否有POST字段。

<?php 
require("spajanje.php"); 
if (isset($_POST['bb1'], $_POST['ocitanje1'])) { 
    $bb2 = $_POST['bb1']; 
    $ocitanje2 = $_POST['ocitanje1']; 
    if (mysqli_query($conn, "UPDATE ocitanja SET ocitanje='$ocitanje2' WHERE bb='$bb2'")) { 
     echo "Uspješno upisano očitanje!"; 
    } else { 
     echo "Something went wrong"; // I have no idea what language you are using, so I'm not even going to try 
    } 
} 
?> 

備註：您應該在您的PHP中使用prepared statements。因爲它超出了你的問題的範圍，所以我沒有包括它。

Answer 2

問題

問題是簡單的。 在ocitanjia.php，在這一行：

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

每個輸入字段有相同的ID（ 'BB'），所以腳本。JS，當你調用這個語句：

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

jQuery將返回第一個文本框的值，因爲這是在遇到有相同ID的多個元素的jQuery的行爲。

解決方案 雖然很多事情需要加以糾正。最簡單的辦法是做這樣的： 在ocitanjia.php，改變這種

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的唯一值的函數