Radio Buttons to enable/disable and make required/not required a textfield

Highlighted
New Member
1 0 0

Hello,

I am trying to implement a code in the cart page where the customer can choose to receive an invoice which will include their VAT. Thus, I would like a radio button group with 2 buttons one for a simple receipt and one for an invoice. I have implemented the radio buttons from the UI ELEMENTS GENERATOR. It looks like this

<p class="cart-attribute__field">
  <label></label><br>
  <input required class="required" type="radio" name="attributes[]" value="Απόδειξη"{% if cart.attributes[""] == "Απόδειξη" %} checked{% endif %}> <span>Απόδειξη</span><br>
  <input required class="required" type="radio" name="attributes[]" value="Τιμολόγιο"{% if cart.attributes[""] == "Τιμολόγιο" %} checked{% endif %}> <span>Τιμολόγιο</span><br>
</p>
<p class="cart-attribute__field">
  <label for=""></label>
  <input required class="required" id="" type="text" name="attributes[]" value="{{ cart.attributes[""] }}">
</p>

 Now what I need is whenever the first radio button (which I would also like it to be the default one) is checked, the text field should hide and become non required. Whenever the second radio button is selected the opposite should happen. 

 

Thank you in advance

0 Likes
Highlighted

Hello,

It would require Liquid/CSS/Javascript knowledge to implement this feature, I'm afraid that unfortunately there is no simple copy-paste solution otherwise I'd happily guide you through.

In case you're unfamiliar with these technologies you'll likely want to hire a Shopify developer to assist you.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Needing urgent help? I'm available for hire, same day response guaranteed: diego.boarutto.fortes@gmail.com
◦ My app free for limited time: Add a navigation styled like Instagram Stories to your website!
0 Likes