代码之家 › 专栏 › 技术社区 › rimraf

无法从shopify输入字段获取val()

shopify jquery javascript

rimraf · 技术社区 · 6 年前

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

1 回复 | 直到 6 年前

Mark Schultheiss 6 年前

我要在这里猜一猜,其实只是一对猜测。

首先,将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>