JSFiddle - React, Tailwind, and code Playground

by helgatheviking

HTML

<form class="cart" action="https://sandbox.lndo.site/product/nyp/" method="post" enctype="multipart/form-data" data-form-type="shopping_basket">
  <div class="nyp" data-hide-minimum="" data-min-price="0" data-max-price="" data-initial-price="" data-minimum-error="Please enter at least %%MINIMUM%%." data-hide-minimum-error="Please enter a higher amount." data-maximum-error="Please enter less than or equal to %%MAXIMUM%%." data-empty-error="Please enter an amount.">


    <label for="nyp-1">Name your price <span class="woocommerce-Price-currencySymbol">( $ )</span></label>


    <input type="text" id="nyp-1" class="input-text amount nyp-input text" name="nyp" value="" title="Name your price ( $ )" placeholder="" inputmode="decimal" data-form-type="other">

    <input type="hidden" name="update-price" value="">
    <input type="hidden" name="_nypnonce" value="">

    <div id="nyp-error-1" class="woocommerce-nyp-message" aria-live="assertive" style="display: none">
      <ul class="woocommerce-error wc-nyp-error">
        <li>Please enter an amount.</li>
      </ul>
    </div>
  </div>

  <label for="nyp-2">Extra text field</label>


  <input type="text" id="nyp-2" class="input-text text" name="extra" value="" title="Extra field" placeholder="" data-form-type="other">


  <div class="quantity">
    <label class="screen-reader-text" for="quantity_65ca66bbb5b65">NYP quantity</label>
    <input type="number" id="quantity_65ca66bbb5b65" class="input-text qty text" name="quantity" value="" aria-label="Product quantity" size="4" min="1" max="" step="1" placeholder="" inputmode="numeric" autocomplete="off" data-form-type="other">
  </div>

  <input type="hidden" name="is-descendent-of-single-product-block" value="false"><button type="submit" name="add-to-cart" value="1877" class="single_add_to_cart_button button alt wp-element-button nyp-disabled" data-form-type="other">Do the thing</button>

</form>

JavaScript

$('form').on('submit', function(e) {
   e.preventDefault();
   console.debug('form submitted');
});