Question

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

我想要什么

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

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，比如

＆＃13;

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

＆＃13;

<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>

＆＃13;

要发布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);
});

Answer 2

关于重复ID的注释是绝对正确的，可能是您现有代码的唯一问题，但我建议您也不要解析DOM，以便在调用它时可以传递给函数，就像这样。 ..

<强> PHP

<input id="something-unique" name="something-unique" type="text" value="<?php echo $id; ?>">
<input id="submit" onclick="addCart('<?php echo $id; ?>');" type="button" value="Submit">

<强> Javscript

function addCart(itemId){
    // send the itemId to a php page...
    $.ajax({
        url: "sendajax.php?itemId=" + itemId
    })
    .done(function(data) {
        // you may want to check the value of 'data' here - if you return anything from PHP
        alert("value sent");
    })
    .fail(function() {
        alert("There was a problem sending the data");
    });
}

使用JS获取PHP while循环中包含的输入字段的值

2 个答案: