I am trying to build a form using Accelerated Mobile Pages (AMP) and I need to hide or show inputs based on user selection.
I have a <select> where users can choose the country:
<select name="country" id="country" required>
<option value="UK">United Kingdom</option>
<option value="ES">Spain</option>
</select>
And if the user chooses United Kingdom I want to hide this inputs:
<input type="text" id="idcard" name="idcard">
<input type="text" id="mobile" name="mobile">
I have already tried using the "on" attribute inside the <option> tag:
<option value="UK" on="tap:idcard.hide,mobile.hide">United Kingdom</option>
but it doesn't work and it is only valid on the <select> tag even the documentation says "All elements".
I need to use <select> and <option> tags as there are a lot of countries and not just 2, otherwise with a radio input the "on" attribute would work.
Is there any kind of trigger or event I can use to hide or show inputs based on user selection?
Hope anyone can help! Thanks!