Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

433
Views
Disable Button with JS based on Select Options

I need help disabling/enabling a button based on a dropdown select option.

I'm trying to accomplish two things on a Shopify product page and I'm halfway there. I need to create an option for customers to decide on whether they want to buy a add-on product in addition to the main product. I have a dropdown with three options: Select, No, and Yes. When they chose Yes, the element with the product appears. That part is working. However, I want to disable the Add To Cart button when the option is at the default 'Select' option so they are forced to make a selection before they can add the item to the cart.

Here is the code so far. I've tried several things based on searches but I can't seem to get it right. The Add To Cart button is located in a separate form just above the code for the add on product.

<form>
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if settings.addto_btn_an %} btnzoom{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
   Add To Cart
  </span>
</button>
</form>


<script type="text/javascript">
  function ShowHideDiv() {
    var pfa_option = document.getElementById("pfa_option");
    var pfa_select = document.getElementById("pfa_select");
    pfa_select.style.display = pfa_option.value == "Y" ? "block" : "none";
   }
</script>
 <span>Do you need a Print for Approval (PFA)?</span>
 <select required id="pfa_option" onchange="ShowHideDiv()">
   <option value="S">Select</option>
   <option value="N">No</option>
   <option value="Y">Yes</option>            
  </select>
  <hr />
  <div id="pfa_select" style="display: none">
    <div class=add-on-product-style>
      <form method="post" action="/cart/add">
        <input type="hidden" name="id" value="41287631601846" />
        <input type="hidden" value="1" id="quantity" name="quantity" />
         Add Print for Approval +$25.00 &nbsp;&nbsp;
         <button type="submit" name="add" class="btn product-form__cart-submit">Add</button>
         <input type="hidden" name="return_to" value="back" />
       </form> 
     </div>
  </div>
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!