如何在模态按钮触发的ajax调用中使用输入值变量？答案

【问题标题】：How to use an input value variable in an ajax call triggered by a modal button?如何在模态按钮触发的ajax调用中使用输入值变量？
【发布时间】：2018-04-01 18:44:09
【问题描述】：

我正在动态生成一个表格，其中包含待售产品、用于选择产品数量的输入以及用于处理每一行中的购买的按钮。然后我进行 AJAX 调用来处理所有这些数据并显示一个显示数据的模式对话框。

类似：

产品单价编号

产品A 12【输入金额】【购买按钮】

我打算获得一个带有“您以 $ * 的价格购买了 * 个 * 的物品”的模式。

工作正常，但是当我尝试捕获输入值以显示项目数时，一切都被破坏了。

这是表格主体：

          <?php

          foreach ($result as $doc) {

            $price = $doc['2'];
            $name = $doc['1'];
            $rd_price = round($price, 2);
            ?>

            <tr>
                <td><?php echo $name; ?></td>
                <td class="product_price"><?php echo $rd_price; ?></td>
                <td><input type="text" name="qty" class="product_qty" value="0"></td>
                <td class="amount_sub_total">0</td>
                <td><button  data-toggle = "modal" data-target = "#myModal" id="<?php echo $name; ?>" value="<?php echo $rd_price; ?>" onclick="showDetails(this)">
                   <i class="fas fa-shopping-cart"></i>
                </button></td>
            </tr>
      <?php } ?>
        </tbody>

还有脚本：

<script>

function showDetails(button) {
  var customerNumber = button.id;
  var customerPrice = button.value;
  var selectedAmount = $(.product_qty).val();


      $.ajax({
      url: "customer.php",
      method: "GET",
      data: {"customerNumber": customerNumber, "customerPrice": customerPrice, "selectedAmount": selectedAmount},
      success: function(response){
        $("#value").text(response);

      }

  });

}

 </script>

如果有人能帮我解决这个问题，我将不胜感激。

【问题讨论】：

标签： javascript php jquery ajax

【解决方案1】：

你错过了引号“”。改变这个

$(.product_qty).val();

到这里

$(".product_qty").val();

如果您使用id 而不是class css 选择器，那么出错率会更低

类似于将 button_id 与 product_qty 结合使用

$("#product_qty_"+button.id).val();

并将 html 更新为类似

<input type="text" name="qty" class="product_qty" value="0" id="'product_qty_'+<?php echo $name; ?>">

【讨论】：

抱歉，在更彻底的测试中，我刚刚意识到它有效，但仅适用于桌面上的第一项。其余行仅显示默认值。
那是因为你使用class csss 选择器来选择集合.. 试试上面的代码
所以你的意思是在输入中添加一个 id="product_qty_" 然后像 var selectedAmount = $("#product_qty_"+button.id).val();?
是的.. 类似<input type="text" name="qty" class="product_qty" value="0" id="'product_qty_'+<?php echo $name; ?>">

【解决方案2】：

你错过了一些东西。

    <tbody>
<?php
    foreach ($result as $doc) {
        $price = $doc['2'];
        $name = $doc['1'];
        $rd_price = round($price, 2); ?>
        <tr>
            <td><?php echo $name; ?></td>
            <td class="product_price"><?php echo $rd_price; ?></td>
            <td><input type="text" name="qty" class="product_qty" value="0"></td>
            <td class="amount_sub_total">0</td>
            <td><button  data-toggle = "modal" data-target = "#myModal" id="<?php echo $name; ?>" value="<?php echo $rd_price; ?>" onclick="showDetails(this)">
                <i class="fas fa-shopping-cart"></i>
            </button></td>
        </tr>
  <?php } ?>
</tbody>

<script>

function showDetails(button) {
    var customerNumber = button.id;
    var customerPrice = button.value;
    var selectedAmount = $(button).parents('tr').find(".product_qty").val();
    $.ajax({
        url: "customer.php",
        method: "GET",
        data: {"customerNumber": customerNumber, "customerPrice": customerPrice, "selectedAmount": selectedAmount},
        success: function(response){
            $("#value").text(response);
        }
    });
}
 </script>

【讨论】：