我是 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(响应):See my ajax response in console when i click sell item in the first row

控制台日志(数据):See my ajax data in console when i click sell item in the first row

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

但是，我的数量仍未定义。需要想办法获得该值...

提前致谢

最佳答案

EDIT: I might be approaching this problem the wrong way.. Now im thinking maybe i should find the button that was clicked and then get the previous element's value

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

我已经制作了一个示例代码供您使用:

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' .所以我把它改为类。

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

But still, my quantity is undefined. Need to figure a way to obtain that value...

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'])) dosent detect the button click and says "Undefined index: 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;

关于javascript - 无法为每个输入字段提交右键[单个表单中的多个按钮和输入字段]，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43942859/