I am looking to show form fields only if the user inputs a specific value in a different field. Specifically, I am asking users to input the number of children they have. If the user inputs 1, then a set of fields will appear for the user to add additional information on their child. If the user inputs 2, then 2 sets of fields will appear, one per child. From a JS perspective, I am looking to hide the field sets based on the response.
This is my HTML: Form field based on which the JS should be based on:
<html>
<div class="_form_element _field10 _full_width ">
<label for="field[10]" class="_form-label">
How many children do you have? <span style="color: #eb636d;">*</span>
</label>
<div class="_field-wrapper">
<input type="text" id="field[10]" name="field[10]" value="" placeholder="" required />
</div>
</div>
</html>
Field set to appear based on value entered in the field above:
<html>
<div id=1 class="child_1">
<div class="_form_element _field51 _full_width " >
<label for="field[51]" class="_form-label">
First child's name
</label>
<div class="_field-wrapper">
<input type="text" id="field[51]" name="field[51]" value="" placeholder="" />
</div>
</div>
<div class="_form_element _field55 _full_width " >
<label for="field[55]" class="_form-label">
First child's birthdate
</label>
<div class="_field-wrapper">
<input type="date" class="date_field" id="field[55]" name="field[55]" value="" placeholder="" />
</div>
</div>
</div>
</html>
Thanks