Question

Shopify会在结帐时通过{{ content_for_order_summary }}自动生成一个表单，其中有一个礼品卡输入：

<input placeholder=“Gift card or discount code” class=“field__input” data- 
discount-field=“true” data-trekkie-id=“reduction_code_field” 
autocomplete=“off” aria-required=“true” size=“30” type=“text” 
name=“checkout[reduction_code]” id=“checkout_reduction_code”>

我试图通过以下方式获得此输入的值： $(‘#checkout_reduction_code’).val();

但这不起作用。我可以注入一个值，然后使用相同的选择器就可以正常检索它，因此我知道它已正确选择。

我的问题正是这样：有谁知道为什么/以前有过这个经验？我到底如何获得输入值？我和我的同事几乎都尝试过。

这是整个表格的工作密码笔。 codepen

Answer 1

我将在这里进行猜测，实际上只是一对猜测。

首先，将click事件处理程序附加到元素的父级。更好地适用于父包装内部动态创建的元素。
更重要的是，防止提交（这是按钮的默认类型），但是，您还专门将其设置为type="submit"-因此它可能会这样做并且会妨碍您的点击处理程序。
它有价值吗？强迫一些

// just for the test, force content in there
$("#checkout_reduction_code").val("test me");
$('.order-summary__section').on("click", ".field__input-btn", function(event) {
  event.preventDefault(); //prevent the default submit
  console.log("Clicked");
  console.log($("#checkout_reduction_code").length);
  const cardCode = $("#checkout_reduction_code").val();
  console.log(cardCode.length, ":" + cardCode + ":");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="order-summary__section order-summary__section--discount" data-reduction-form="update">
  <h3 class="visually-hidden">Gift card or discount code</h3>
  <form class="edit_checkout animate-floating-labels" action="/8572698682/checkouts/ec0c9981ed8878d2c547acd14bc66825" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="_method" value="patch"><input type="hidden" name="authenticity_token" value="uy4G7N445kuNoDYYrwNwZqANThycax+sD1ZgsPNdJEgpu7VFCRlc8EZtdGMSFfxNukx/VjJZK/9rapjY7nM8mg==">
    <input type="hidden" name="step" value="payment_method">
  </form>

  <form class="edit_checkout animate-floating-labels" action="/8572698682/checkouts/ec0c9981ed8878d2c547acd14bc66825" accept-charset="UTF-8" method="post" _lpchecked="1"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="_method" value="patch"><input type="hidden" name="authenticity_token" value="CIbBD3nktheTkrboQ8CE6WBzA4KDgv5iJFC6wMP+x3iaE3KmrsUMrFhf9JP+1gjCejIyyC2wyjFAbEKo3tDfqg==">
    <input type="hidden" name="step" value="payment_method">
    <div class="fieldset">
      <div class="field field--show-floating-label">

        <div class="field__input-btn-wrapper">
          <div class="field__input-wrapper"><label class="field__label field__label--visible" for="checkout_reduction_code">Gift card or discount code</label>
            <input placeholder="Gift card or discount code" class="field__input" data-discount-field="true" data-trekkie-id="reduction_code_field" autocomplete="off" aria-required="true" size="30" type="text" name="checkout[reduction_code]" id="checkout_reduction_code">
          </div>

          <button name="button" type="submit" class="field__input-btn btn" data-trekkie-id="apply_discount_button" aria-busy="false">
              <span class="btn__content visually-hidden-on-mobile" aria-hidden="true">
                Apply
              </span>
              <span class="visually-hidden">
                Apply Discount Code
              </span>
              <svg class="icon-svg icon-svg--size-16 btn__icon shown-on-mobile" aria-hidden="true" focusable="false"> <use xlink:href="#arrow"></use> </svg>
              <svg class="icon-svg icon-svg--size-18 btn__spinner icon-svg--spinner-button" aria-hidden="true" focusable="false"> <use xlink:href="#spinner-button"></use> </svg>
</button> </div>

      </div>
    </div>
  </form>
</div>

无法从shopify输入字段获取val（）

1 个答案: