Ggthjy

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>

Your question is about avoiding the javascript being so cumbersome, but I wonder whether once you've worked out an elegant script to write the table, whether elegant javascript code will be easier to work out.

One trick for tables is to create them in entirely in javascript. The following example isn't for the entirety of your table, but it includes some of the sorts of logic I think you would use.

var branches = ["military_branch1","military_branch2"];



military_table_html = '<table>';



for(var i=0; i<branches.length; i++){



  military_table_html += "<tr><td>" +branches[i]+"</td></tr>";

 

 if(branches[i] == "military_branch1"){

    military_table_html += "<tr><td>that was the first branch</td></tr>";

  } else {

   military_table_html += "<tr><td>that was the second branch</td></tr>";

  }

}

military_table_html += '</table>';



document.getElementById("military_table").innerHTML = military_table_html;

<span id="military_table"></span>

is there a more efficient method to write the code rather than repeating the cumbersome boolean logic shown below?

Yes. Yes there is. Think about the logic at any given question/answer and make it work for every question/answer. The result will be a single function.

We are at question #2:

• Evaluate the previous question's answer:
  
  
  
  
  • NO: display this question
  
  
  • YES: hide this question
  
  
  
  

Make that a function. Call it for every question, in order. Every time any question is answered always call it for all questions (in order) as this will handle arbitrarily changed answers.

To make more questions I need to copy and paste the code and change the boolean conditions and the Element IDs for each question.

No. No you don't. Reuse the function; passing in 1) prev. question's answer 2) this question's ID. Perhaps the questions are numbered and that should suffice as an identifier.

Organize your code

• Build the question table separately as @AnthonyHaffey says


• Add an event handler that calls that displayHide function. Every question uses this one handler.


• A javascript array holding all the original questions. Pass that into the table building function.


• Each question has a unique identifier. In the HTML table make an appropriate element property to hold it.