javascript - 使用 JS 获取包裹在 PHP while 循环中的输入字段的值

Question

我有一个包含在 while 循环中的输入框，所以我显示数据库中的 ID 或项目。因此，我的输入框为 001,002,003,004,005 ...，每个输入框下方都有一个按钮。

我想要什么

1) 当我点击一个按钮时，我希望 JS 记录相应输入框的值，例如如果我点击输入框 003 下面的按钮，js 应该显示 003。

2) 我还想使用 Ajax 通过 (sendajax.php) 将该值发送到数据库，成功后它应该显示一个带有消息的 div。

我得到了什么

无论我点击哪个按钮，我都会收到 001。

代码

<?php
$booksSql = "SELECT * FROM tblitems";
$getBooks = mysqli_query($con, $booksSql);
while($row = mysqli_fetch_assoc($getBooks)){
$id = $row["itemid"];
?>



<form>
<input id="itemID" name="itemID"  type="text" value="<?php echo $id;  ?>">
<!--it display 001, 002, 003, 004 in the input boxes as it should-->
<input id="submit" onclick="addCart();" type="button" value="Submit">
</form>



<?php
}
?>


<script>
function addCart(){
        var input =  document.getElementById('itemID').value;
        console.log(input);
        //but this keeps displaying 001, no matter which button i click
}
</script>

我当前的sendajax.php

    include("dbconn.php");

    $id = $_POST["id"];


    if (isset($_POST['id'])) {
        $send = "query to insert to db";
    $query = mysqli_query($con, $send);
    }

Answer 1

一个 HTML 元素的 id应该是独一无二的；你给了多个元素相同的 id ，这就是为什么您的函数只获取第一个元素的原因。

而不是 <form>和多个输入，只使用这个:

<input type="button" onclick="addCart(this.value);" value="<?= $id ?>">

现在你可以抓取addCart()中的id :

function addCart(idString) {
    console.log(idString);
}

编辑:应该注意的是，我尽可能避免使用内联代码，而是使用 jQuery，比如

$(function() {
  $("#items input").on("click", function() {
    console.log(this.value);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="items">
  <input type="button" value="001">
  <input type="button" value="002">
  <input type="button" value="003">
  <input type="button" value="004">
  <input type="button" value="005">
</div>

要发布 id，请使用类似的东西:

fetch("sendajax.php", {
  method: "post",
  headers: new Headers({
    "Content-Type": "application/x-www-form-urlencoded"
  }),
  body: "id=" + Number(idString)
}).then(response => response.text()).then(text => {
  alert(text);
});