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

时间:2018-04-01 18:44:09

标签: javascript php jquery ajax

我正在生成一个包含待售产品的表格,一个用于选择产品数量的输入,以及一个用于处理每行购买的按钮。然后我正在进行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>

如果有人能帮助我,我会非常感激。

2 个答案:

答案 0 :(得分:0)

你错过了报价&#34;&#34;。 改变这个

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

到这个

id

如果您使用class代替product_qty css选择器

,则不会出错

类似于将button_id与$("#product_qty_"+button.id).val();

结合使用

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

并将html更新为

if keydown in [enter, ","]: // logic of function "doneTyping" text = parse(text) // get text from textarea and grab latest value if text is valid: renderTag(text) // put the text in a tag element updateHiddenForm(text) // update the hidden form to include the tag else: notifyUserOfInvalidTag(text) // alert user else: // logic of function "stillTyping" suggest = bloodhoundSearch(text) // use twitter typeahead updateSuggestionBox(suggest) // display results from typeahead

答案 1 :(得分:-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>