无法为每个输入字段提交右键[单个表单中的多个按钮和输入字段]

Question

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

这是我的jquery/ajax代码:

$(document).on('submit','form#ajax', function(){
            var that = $(this); 
                url = that.attr('action');
                type = that.attr('method');
                data = {};

            that.find('[name]').each(function(index, value){
                var that = $(this);
                        name = that.attr('name');
                        value = that.val();
                        data[name] = value;
                });

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

            return false;
        });

现在来问题了.当我试图出售第一个项目的2个单位(在第一行)时,我的表单认为我提交最后一个输入字段(在最后一行),当我不是..

当我尝试销售第一件商品的2个单位时,这就是我在浏览器控制台中获得的内容:

Console.log(响应):当我点击第一行中的sell item时,在控制台中查看我的ajax响应

Console.log(data):当我点击第一行中的sell item时,在控制台中查看我的ajax数据

我尝试用以下命令启动我的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);

但是,我的数量仍未定义.需要想办法获得这个价值......

提前致谢

Answer 1

编辑：我可能会以错误的方式处理这个问题..现在我想也许我应该找到被单击的按钮，然后获取前一个元素的值

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

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

HTML：

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

jQuery：

 // 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);
     }
   });
 });

首先，我修复了您的代码的一些问题。ID就像循环时有多个相同的一样id='verktyg-first-td'。所以我把它改为课堂。

我改变了你触发功能的方式。不是在提交表单时触发，而是在单击按钮时触发。

但是，我的数量仍然不确定。需要找到一种方法来获得该值......

var quantity = $(btn).prev("input[type=number]").val();

是的，如果您的结构是：

    <td>
      <input type='number' name='item_1' value='10'>
      <button type='submit' class='submit_button'>sell</button>
    </td>

但您要查找的输入元素位于另一个<td>.

所以你必须先找到最接近的<tr>

parentTr = self.parent("td").closest("tr");

然后寻找那个input[type=number]。

inputElm = parentTr.find("input[type=number]");

更新：

if(isset($_POST['item'])) 未检测到按钮单击并显示“未定义索引：item”

首先要解决此问题，请将属性重新添加回按钮元素。

例如

<button type='submit' class='submit_button' name="item" value='button_value'>sell</button>

然后在下面添加这段代码data[name] = value;

// get button val
value = self.val();
name = self.attr('name');
data[name] = value;