javascript code to work on form load

Question

Hope I am clear now with my question.

I have a sharepoint list where I hide/show certain fields based on the data in another field (a Yes/No drop down). Say for example, I have column 1 with Yes and No drop downs. If the value in this Column 1 is chosen as Yes, then the four columns A, B, C and D should get displayed. If column 1 is No, then A, B, C and D should be hidden. It is working good when the form loads.

However, when the form returns an error upon save, the fields that were shown with the selection of "Yes" in the dependent field, will get hidden even though the dependent field is still "Yes" and I have to toggle between the Yes and No choices to show the fields again.

Below is the code I have used.

<script src="https://code.jquery.com/jquery-1.7.2.min.js" type=text/javascript></script>
<script type="text/javascript">
// Execute the following JavaScript after the page has fully loaded, when it's ".ready"
$(document).ready(function() {
  $('nobr:contains("Question 1")').closest('tr').hide();
  $('nobr:contains("Question 2")').closest('tr').hide();
  $('nobr:contains("Question 3")').closest('tr').hide();
  $('nobr:contains("Question 4")').closest('tr').hide();

  //Show/hide columns based on Drop Down Selection 
  $("select[title='Do you know Java Scripting']").change(function() {
    if ($("select[title='Do you know Java Scripting']").val() != "Yes") {
      $('nobr:contains("Question 1")').closest('tr').hide();
      $('nobr:contains("Question 2")').closest('tr').hide();
      $('nobr:contains("Question 3")').closest('tr').hide();
      $('nobr:contains("Question 4")').closest('tr').hide();
    } else {
      $('nobr:contains("Question 1")').closest('tr').show();
      $('nobr:contains("Question 2")').closest('tr').show();
      $('nobr:contains("Question 3")').closest('tr').show();
      $('nobr:contains("Question 4")').closest('tr').show();
    }
  });
});

Answer 1

You have your if () statement inside of a change event. You need to have a similar check outside the event so that every time the page loads the check is performed and the columns are displayed or hidden accordingly.