Не могу получить val () из поля ввода shopify

Question

Shopify auto генерирует форму при оформлении заказа в виде {{ 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

Я собираюсь сделать здесь предположение, ну, на самом деле, просто пару предположений.

1. Сначала прикрепите обработчик события click к родительскому элементу. Лучше работает для динамически создаваемых элементов внутри родительской оболочки.
2. Что еще более важно, предотвращает отправку , который является типом по умолчанию для кнопки, однако, вы также специально установили его на type="submit" - так что он, вероятно, делает это и мешает вашему обработчику кликов .
3. Имеет ли это значение? заставить некоторых там

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