Javascript Can'；t提交每个输入字段的右按钮[多个按钮和单个表单中的输入字段]

我对jquery和ajax有点陌生，我想知道是否有人可以帮我

我有一个php foreach循环，它打印出一个输入类型=数字和一个按钮。下面的代码创建了一个表，其中每行显示商品名称、一个供用户输入数量的框和一个出售商品的按钮

<div class=verktyg>
    <form action='sell_items.php' method='POST' id='ajax'>
        <table class="inventory">

<?php
    foreach (array_slice($items, 2) as $key => $value) {

        if($value>0){

            echo "<tr>  
                 <td id='verktyg-first-td'>".$key."</td>
                 <td>".$value."</td>
                 <td><input type='number' name='items[$key]' value='0'></td>
                 <td><button type='submit' name='item' value='$key'>sell</button></td>
                 </tr>";
            }
      }
?>  
        </table>
    </form>
</div>

现在来谈谈问题。当我试着卖出2个单位的第一个项目（在第一行）时，我的表单认为我提交了最后一个输入字段（在最后一行），而我没有

这是我在浏览器控制台中尝试销售2台第一款产品时得到的结果：

控制台日志（响应）：

Console.log（数据）：

我尝试用以下内容启动我的js脚本：

$('form#ajax').on('submit', function(){

而不是

$(document).on('submit','form#ajax', function(){

但是它不起作用。。有什么想法吗

编辑： 我可能用错误的方法处理这个问题。。现在我在想，也许我应该找到被点击的按钮，然后通过这样的方式获得上一个元素的值：

var btn= $(this).find("button[type=submit]:focus").val();
        var quantity = $(btn).prev("input[type=number]").val();
        console.log(btn);
        console.log(quantity);

<div class=verktyg>
  <form action='sell_items.php' method='POST' id='ajax'>
    <table class="inventory">
      <tr>
        <td class='verktyg-first-td'>Item 1</td>
        <td>10</td>
        <td>
          <input type='number' name='item_1' value='10'>
        </td>
        <td>
          <button type='submit' class='submit_button'>sell</button>
        </td>
      </tr>
      <tr>
        <td class='verktyg-first-td'>Item 2</td>
        <td>20</td>
        <td>
          <input type='number' name='item_2' value='20'>
        </td>
        <td>
          <button type='submit' class='submit_button'>sell</button>
        </td>
      </tr>
    </table>
  </form>
</div>

 // prevent for submission
 $("form").submit(function(e) {
   e.preventDefault();
 });

 // when submit button is clicked
 $(".submit_button").on("click", function() {
   self = $(this);
   form = self.closest("form");
   url = form.attr('action');
   type = form.attr('method');
   parentTr = self.parent("td").closest("tr"); // get the parent <tr>
   data = {};

   inputElm = parentTr.find("input[type=number]"); // find input element closest to the clicked button
   name = inputElm.attr('name'); // get input name
   value = inputElm.val(); // get input val
   data[name] = value;

   // send ajax request
   $.ajax({
     url: url,
     type: type,
     data: data,
     success: function(response) {
       console.log(response);
     }
   });
 });

但是，我的数量仍然没有定义。需要找到一种获得该值的方法

提前谢谢

编辑：我可能用错误的方法处理这个问题。。现在我 我想也许我应该找到被点击的按钮然后 前一个元素的值

是的，你在这一点上是正确的。你应该采取这种方法

我制作了一个示例代码供您使用：

HTML:

var btn= $(this).find("button[type=submit]:focus").val();
        var quantity = $(btn).prev("input[type=number]").val();
        console.log(btn);
        console.log(quantity);

<div class=verktyg>
  <form action='sell_items.php' method='POST' id='ajax'>
    <table class="inventory">
      <tr>
        <td class='verktyg-first-td'>Item 1</td>
        <td>10</td>
        <td>
          <input type='number' name='item_1' value='10'>
        </td>
        <td>
          <button type='submit' class='submit_button'>sell</button>
        </td>
      </tr>
      <tr>
        <td class='verktyg-first-td'>Item 2</td>
        <td>20</td>
        <td>
          <input type='number' name='item_2' value='20'>
        </td>
        <td>
          <button type='submit' class='submit_button'>sell</button>
        </td>
      </tr>
    </table>
  </form>
</div>

 // prevent for submission
 $("form").submit(function(e) {
   e.preventDefault();
 });

 // when submit button is clicked
 $(".submit_button").on("click", function() {
   self = $(this);
   form = self.closest("form");
   url = form.attr('action');
   type = form.attr('method');
   parentTr = self.parent("td").closest("tr"); // get the parent <tr>
   data = {};

   inputElm = parentTr.find("input[type=number]"); // find input element closest to the clicked button
   name = inputElm.attr('name'); // get input name
   value = inputElm.val(); // get input val
   data[name] = value;

   // send ajax request
   $.ajax({
     url: url,
     type: type,
     data: data,
     success: function(response) {
       console.log(response);
     }
   });
 });

但是您要查找的输入元素位于另一个

中

因此，您必须首先找到最接近的

parentTr=self.parent（“td”）.closest（“tr”）

然后查找
输入[type=number]

inputElm=parentr.find（“输入[type=number]”）

更新：

var btn= $(this).find("button[type=submit]:focus").val();
        var quantity = $(btn).prev("input[type=number]").val();
        console.log(btn);
        console.log(quantity);

<div class=verktyg>
  <form action='sell_items.php' method='POST' id='ajax'>
    <table class="inventory">
      <tr>
        <td class='verktyg-first-td'>Item 1</td>
        <td>10</td>
        <td>
          <input type='number' name='item_1' value='10'>
        </td>
        <td>
          <button type='submit' class='submit_button'>sell</button>
        </td>
      </tr>
      <tr>
        <td class='verktyg-first-td'>Item 2</td>
        <td>20</td>
        <td>
          <input type='number' name='item_2' value='20'>
        </td>
        <td>
          <button type='submit' class='submit_button'>sell</button>
        </td>
      </tr>
    </table>
  </form>
</div>

 // prevent for submission
 $("form").submit(function(e) {
   e.preventDefault();
 });

 // when submit button is clicked
 $(".submit_button").on("click", function() {
   self = $(this);
   form = self.closest("form");
   url = form.attr('action');
   type = form.attr('method');
   parentTr = self.parent("td").closest("tr"); // get the parent <tr>
   data = {};

   inputElm = parentTr.find("input[type=number]"); // find input element closest to the clicked button
   name = inputElm.attr('name'); // get input name
   value = inputElm.val(); // get input val
   data[name] = value;

   // send ajax request
   $.ajax({
     url: url,
     type: type,
     data: data,
     success: function(response) {
       console.log(response);
     }
   });
 });

如果（isset（$_POST['item']）未检测到按钮，请单击并显示
“未定义索引：项”

首先要解决这个问题，将属性重新添加回button元素

e、 g

非常感谢你的帮助，这似乎正是我所需要的。然而，现在唯一的问题是我的php语句：如果（isset（$\u POST['item']）没有检测到按钮，单击并说“Undefined index:item”@DavidMozartAndraws更新了我的答案，现在检查它是否像一个符咒一样工作！真的很感激@戴维莫扎特很好！很高兴它有帮助！