jQuery addClass example

Change class name on click in jQuery

by helgatheviking

HTML

<body>
  <form class="cart" action="http://sandbox.test/product/simple-nyp/" method="post" enctype="multipart/form-data">

    <div class="nyp" data-price="0" data-minimum-error="Please enter at least %%MINIMUM%%." data-hide-minimum="" data-hide-minimum-error="Please enter a higher amount." data-max-price="9999" data-maximum-error="Please enter less than or equal to %%MAXIMUM%%." data-min-price="49">


      <label for="nyp">
        <span class="nyp-field-label">
          Name your price ( $ ) </span>
        <p class="minimum-price"><span class="minimum-text">Minimum price:</span> <span class="amount"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>49.00</span></span></p>
      </label>

      <input type="text" class="input-text amount nyp-input text" name="nyp" value="">
      <div class="woocommerce-nyp-message" role="alert" style="display: none">
        <ul class="woocommerce-error"></ul>
      </div>
    </div>

    <div class="quantity">
      <label class="screen-reader-text" for="quantity_5e20c0f5c9142">Simple NYP quantity</label>
      <input type="hidden" id="quantity_5e20c0f5c9142" class="input-text qty text"  name="quantity" value="1" title="Qty" inputmode="numeric">
    </div>

    <button type="submit" name="add-to-cart" value="36" class="single_add_to_cart_button button alt">Add to cart</button>

  </form>
</body>

CSS

body {
  background: #FFF;
  padding: 20px;
  font-family: Helvetica;
}



button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

JavaScript

// find elements
var button = $("button")

// handle click and add class
button.on("click", function(){
  alert('clicked')
})

// handle click and add class
S('form').on("submit", function(){
  alert('submitted')
})