I’ve created a multi-page form (5 pages) – each page has radio inputs and only one selection can be made per page (all fields are marked as required). Most answers will be assigned a ‘product’, some answers will be assigned the same product – I need to output the recommended assigned products on the confirmation page. at minimum, one product will be recommended as all questions on the first page have a product assigned, maximum there could be 5 products recommended if the user makes selections where the answer is associated to a product.
Simplified tables for context:
page 1 answers | page 1 products |
---|---|
Choice A | Product 1 |
Choice B | Product 1 |
Choice C | Product 2 |
Choice D | Product 3 |
Choice E | Product 1 |
Choice F | Product 4 |
page 2 answers | page 2 products |
---|---|
Choice A | Product 1 |
Choice B | Product 2 |
Choice C | Product 3 |
Choice D | no product |
Choice E | no product |
and so on…
I sourced some jQuery(?) on another post, and made some edits to interact with the IDs association to my options
<script>
$('input[type=radio]').on("change", buttonChanged);
function buttonChanged() {
if ($("#7_1").is(':checked') && $("#14_12").is(':checked') && $("#12_12").is(':checked') && $("#10_12").is(':checked') && $("#22_12").is(':checked')) {
$(".test-display1").show();
} else if ($("#7_2").is(':checked') && $("#14_13").is(':checked') && $("#12_13").is(':checked') && $("#10_13").is(':checked') && $("#22_13").is(':checked')) {
$(".test-display2").show();
}
}
</script>
The above works just fine, and the correct confirmation block displays – however, I’m just guessing there has to be an easier way to calculate/generate all possible combinations rather than writing each possible combo and having a lot of confirmation blocks in the code… I can use jQuery or JavaScript with the form tool I’m using – how to write this a bit easier?
Some of the HTML form code also (build is in progress still):
<form>
**PAGE 1**
<div class="ee_list_item_label">
<span class="input"><input type="radio" name="7" id="7_1" value="1" required="required"></span>
<label class="ee_editable ee_answertext" for="7_1"><font>Improved Hair, Skin & Nails</font>
</label></div>
</div><div class="option-wrapper">
<div class="ee_list_item_label">
<span class="input"><input type="radio" name="7" id="7_2" value="2" required="required"></span>
<label class="ee_editable ee_answertext" for="7_2"><span>Bones & Joint Support</span>
</label></div>
</div><div class="option-wrapper">
<div class="ee_list_item_label">
<span class="input"><input type="radio" name="7" id="7_3" value="3" required="required"></span>
<label class="ee_editable ee_answertext" for="7_3"><span>Healthy Energy</span>
</label></div>
</div><div class="option-wrapper">
<div class="ee_list_item_label">
<span class="input"><input type="radio" name="7" id="7_4" value="4" required="required"></span>
<label class="ee_editable ee_answertext" for="7_4"><span>Exercise Support</span>
</label></div>
</div><div class="option-wrapper">
<div class="ee_list_item_label">
<span class="input"><input type="radio" name="7" id="7_5" value="5" required="required"></span>
<label class="ee_editable ee_answertext" for="7_5"><span>Anti-Aging Support</span>
</label></div>
</div><div class="option-wrapper">
<div class="ee_list_item_label">
<span class="input"><input type="radio" name="7" id="7_8" value="8" required="required"></span>
<label class="ee_editable ee_answertext" for="7_8"><span>General Wellness</span>
</label></div>
**PAGE 2**
<div class="ee_list_item_label">
<span class="input"><input type="radio" name="14" id="14_12" value="12" required="required"></span>
<label class="ee_editable ee_answertext" for="14_12"><span>30 mins or more intense exercise 5-7 times a week</span>
</label></div>
</div><div class="option-wrapper">
<div class="ee_list_item_label">
<span class="input"><input type="radio" name="14" id="14_13" value="13" required="required"></span>
<label class="ee_editable ee_answertext" for="14_13"><span>30 mins or more moderate exercise daily</span>
</label></div>
</div><div class="option-wrapper">
<div class="ee_list_item_label">
<span class="input"><input type="radio" name="14" id="14_14" value="14" required="required"></span>
<label class="ee_editable ee_answertext" for="14_14"><span>30 mins exercise 3-4 times a week</span>
</label></div>
</div><div class="option-wrapper">
<div class="ee_list_item_label">
<span class="input"><input type="radio" name="14" id="14_15" value="15" required="required"></span>
<label class="ee_editable ee_answertext" for="14_15"><span>Daily walking</span>
</label></div>
</div><div class="option-wrapper">
<div class="ee_list_item_label">
<span class="input"><input type="radio" name="14" id="14_16" value="16" required="required"></span>
<label class="ee_editable ee_answertext" for="14_16"><span>Little to no exercise</span>
</label></div>
</form>