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
<button type="submit" name="add" class="btn product-form__cart-submit">Add</button>
<input type="hidden" name="return_to" value="back" />
</form>
</div>
</div>