I’m using PHP HTML and JavaScript to write questions that need to be shown/hidden based on inputs from the user. I have several rows in a table, each row contains a <td> with a question and a <td> with an input (for the answer to the question) and I am using JavaScript to hide/show rows that contain questions that sometimes aren’t applicable to the user if they’ve answered questions with a certain answer.
For example, Question 1 should always be displayed, Question 2 only displays if the answer to question one is not yes (I have to allow the possibility that the answer is blank). Question 3 should display if Question 2’s answer is not yes.
Also, if question 1’s answer is changed to something other than yes. Question 2 and 3 should be hidden.
The code works correctly, but is there a more efficient method to write the code rather than repeating the cumbersome boolean logic shown below? To make more questions I need to copy and paste the code and change the boolean conditions and the Element IDs for each question.
// question asks them if they served in a second branch of the military // if hideAllQuestions is true, then all questions that rely on this // question and questions relying on those questions should disappear. // if showMainQuestion is true, then all immediate follow up questions var secondBranchLogic = function(hideAllQuestions = false, showMainQuestion = true) { var mainQuestionTagID = [ "#secondbranch_row" ]; if (showMainQuestion) { // functions that cycle through each question in mainQuestionTagID and show them, set them to required, or hide them. enableQuestions(mainQuestionTagID); requireQuestions(mainQuestionTagID); } else { disableQuestions(mainQuestionTagID); } // boolean logic that determines if the main question's answer should show/hide the sub questions. var answer = $ ("#secondbranch").val(); var hasSecondBranch = ( answer === 'Yes'); var showSubQuestions = (showMainQuestion && hasSecondBranch && !hideAllQuestions); // all immediate sub questions that should be shown/hidden, but not the sub questions below said sub questions. var questionTagIDs = [ "#militarybranch2_row", "#militarybranch2length_row", "#militarybranch2rank_row", "#militarybranch2job_row" ]; if (showSubQuestions) { enableQuestions(questionTagIDs); requireQuestions(questionTagIDs); } else { disableQuestions(questionTagIDs); } // boolean logic determining if dischargeLogic should hide/show some questions. var hideNextQuestions = ( answer === '' || hideAllQuestions ); var showNextMainQuestion = ( !hideNextQuestions); dischargeLogic(hideNextQuestions, showNextMainQuestion); }; // question asking if they were discharged honorably // this function behaves much like the previous one. var dischargeLogic = function(hideAllQuestions = false, showMainQuestion = true) { var mainQuestionTagID = [ "#honorabledischarge_row" ]; if (showMainQuestion) { enableQuestions(mainQuestionTagID); requireQuestions(mainQuestionTagID); } else { disableQuestions(mainQuestionTagID); } var answer = $ ("#honorabledischarge").val(); var answered = (answer !== ''); var questionTagIDs = [ "#dischargedescription_row" ]; if (answered) { honorablyDischarged = (answer === 'Yes'); showSubQuestion = (!honorablyDischarged && !hideAllQuestions); if (showSubQuestion) { enableQuestions(questionTagIDs); requireQuestions(questionTagIDs); } else { disableQuestions(questionTagIDs); } } else { disableQuestions(questionTagIDs); } var hideNextQuestions = ( answer === '' || hideAllQuestions); var showNextMainQuestion = (!hideNextQuestions); deploymentsLogic(hideNextQuestions, showNextMainQuestion); }; Now, here’s the PHP/HTML code for it:
<tr style="display:none;" id="secondbranch_row"> <td class="Question"> Have you served in another military branch? </td> <td style="width:100px;"> <select type="text" id="secondbranch" name="secondbranch" style="width:100%;" class="needs_saved_military" required> <option value=''></option> <option value='Yes'>Yes</option> <option value='No'>No</option> </select> </td> </tr> <tr style="display:none;" id="militarybranch2_row"> <td> Which branch did you serve in? </td> <td> <select type="text" id="militarybranch2" name="militarybranch2" style="width:100%;" class="needs_saved_military" required> <option value=''></option> <!-- all caps means it's a global constant array --> <?php foreach (MILITARY_BRANCH as $ iBranch) {?> <option value = "<?php echo $ iBranch?>"><?php echo $ iBranch?> </option> <?php }?> </select> </td> </tr> <tr style="display:none;" id="militarybranch2length_row"> <td> How long? </td> <td> <select type="text" id="militarybranch2length" name="militarybranch2length" style="width:100%;" class="needs_saved_military" required> <option value=''></option> <?php foreach (MILITARY_YEARS_SERVED as $ iYears) {?> <option value = "<?php echo $ iYears?>"><?php echo $ iYears?> </option> <?php }?> </select> </td> </tr> <tr style="display:none;" id="militarybranch2rank_row"> <td> What was your rank? </td> <td> <input type="text" id="militarybranch2rank" name="militarybranch2rank" style="width:100%;" class="needs_saved_military" required></input> </td> </tr> <tr style="display:none;" id="militarybranch2job_row"> <td> What was your job? </td> <td> <input type="text" id="militarybranch2job" name="militarybranch2job" style="width:100%;" class="needs_saved_military" required></input> </td> </tr> <!-- HONORABLE DISCHARGE --> <tr style="display:none;" id="honorabledischarge_row"> <td class="Question"> Were you honorably discharged? </td> <td style="width:100px;"> <select type="text" id="honorabledischarge" name="honorabledischarge" style="width:100%;" class="needs_saved_military" required> <option value=''></option> <option value='Yes'>Yes</option> <option value='No'>No</option> </select> </td> </tr> <tr style="display:none;" id="dischargedescription_row"> <td> What was the discharge? </td> <td> <input type="text" id="dischargedescription" name="dischargedescription" style="width:100%;" class="needs_saved_military" required></input> </td> </tr> 
