Execute after multi conditions are true

Question

I want to make dynamic form field. for instance, depends on the selection of form field, I want to show hidden field or hide showed block.

For example, if I selected first field with 'high school', then show 'Marital Status' field. This field is hidden by default.

See the example code here

Thank you so much!!

Here is HTML

    <!-- fieldsets -->
    <fieldset>
        <h2 class="fs-title">Check your eligibility</h2>
        <h3 class="fs-subtitle">About yourself</h3>
         <label for="educationLevel" tabindex="1">Education:<select name="educationLevel" class="pie" id="educationLevel" onchange="myfunction();">
            <option value="0">Select an option</option>
            <option value="1">High School</option>
            <option value="2">College</option>
            <option value="3">Grad School</option>
        </select></label>

        <label for="quiz-applicantCountry" tabindex="1" id="yourself">YOUR COUNTRY OF BIRTH:<select name="applicantCountry" id="your-applicantCountry" class="pie" onchange="myfunction();">
            <option value="0">Select a Country</option>
            <option value="54">Afghanistan</option>
            <option value="93">Albania</option>
            ...
            <option value="52">Zambia</option>
            <option value="53">Zimbabwe</option>
        </select></label>
      <label for="maritalStatus" tabindex="2" id="marital">Marital Status:<select name="maritalStatus" class="pie" id="maritalStatus" onchange="myfunction();">
            <option value="0">select</option>
            <option value="1">YES</option>
            <option value="2">NO</option>
        </select></label>
      <label for="quiz-applicantCountry" tabindex="1" id="spouse">YOUR SPOUSE COUNTRY OF BIRTH:<select name="applicantCountry" id="spouse-applicantCountry" class="pie" onchange="myfunction();">
            <option value="0">Select a Country</option>
            <option value="54">Afghanistan</option>
            ...
            <option value="52">Zambia</option>
            <option value="53">Zimbabwe</option>
        </select></label>


        <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>

</form>

Here is Javascript

    function myfunction(){
    var birthSelectedCountry = $("select#your-applicantCountry option:selected").val();
    // console.log(birthSelectedCountry);
    var country = "-" + birthSelectedCountry + "-";
    var eligibleCountries = "-61-65-81-86-82-91-266-223-95-102-175-104-106-112-120-140-146-156-163-221-190-177-181-183-187-261-262-189-194-56-182-38-279-287-267-115-123-280-288-286-137-281-289-282-283-149-270-284-285-1000-";

    var birthSpouseSelectedCountry = $("select#your-applicantCountry option:selected").val();
    // console.log(birthSpouseSelectedCountry);
    var spouseCountry = "-" + birthSpouseSelectedCountry + "-";
    var eligibleSpouseCountries = "-61-65-81-86-82-91-266-223-95-102-175-104-106-112-120-140-146-156-163-221-190-177-181-183-187-261-262-189-194-56-182-38-279-287-267-115-123-280-288-286-137-281-289-282-283-149-270-284-285-1000-";
    var maritalStatus = $("select#maritalStatus option:selected").val();
    // console.log(maritalStatus);
    var marital = "-" + maritalStatus + "-";
    var eligibleMarital = "-1-2-";
    var educationLevel = $("#educationLevel option:selected").val();
    var education = "-" + educationLevel + "-";
    var eligibleEducationLevel = "-2-3-";

console.log(education);
console.log(marital);
console.log(country);
console.log(eligibleEducationLevel.indexOf(education));
console.log(eligibleMarital.indexOf(marital));
console.log(eligibleCountries.indexOf(country));

if( eligibleEducationLevel.indexOf(education) < 0 && eligibleCountries.indexOf(country) < 0 ) { 
  console.log("Are you married?");
  // $('#marital').fadeIn();
  $('#marital').css('display', "block");
}

Answer 1

Try this:

JAVASCRIPT

if ($("#educationLevel").val() == "1"){
    $("#maritalStatus").show();
} else {
    // Do something else..
}

This is if I understood the question correctly.

Answer 2

In your document.ready() event hide all the controls by referencing them by their ids. The document.ready() function is used to initialize the entire behaviour of the entire page.

$(document.ready(function(){

      //hide the maritalStatus dropdown initially at pageload.
      $('#maritalStatus').hide(); 
      $('#spouse-applicantCountry').hide();
      $('#maritalStatus').val(0); 
      $('#spouse-applicantCountry').val(0);

      //This the onchange event of the select
      $('#educationLevel').on('change', function() {
          $('#maritalStatus').show();

          //Put your conditions here
          if($('#maritalStatus').val() == "1"){
            $('#spouse-applicantCountry').show();  
          }
      });
}));

The dropdown onChange functions wont work properly as expected as the select control is often rendered before the function is defined.

Hope this helps ! Cheers !