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（响应）：See my ajax response in console when i click sell item in the first row

Console.log（数据）：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);

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

提前致谢

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']））dosent检测按钮点击并说 “未定义的索引：项目”

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

e.g。

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

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

1 个答案: