Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

425
Visualizações
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
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda