title: How to hide/show messages in javascript when they should be hidden/shown?
body: <p>I have a code below where it contains a form which contains text inputs a drop down menu:    </p>
  
  <pre><code>$editsession = "
      &lt;form id='updateCourseForm'&gt;
  
          &lt;p&gt;&lt;strong&gt;Current Course Details:&lt;/strong&gt;&lt;/p&gt;
          &lt;table&gt;
          &lt;tr&gt;
          &lt;th&gt;Course ID:&lt;/th&gt;
          &lt;td&gt;&lt;input type='text' id='currentCourseNo' name='CourseNocurrent' readonly='readonly' value='' /&gt; &lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;/table&gt;
          &lt;div id='currentAlert'&gt;&lt;/div&gt;
  
          &lt;p&gt;&lt;strong&gt;New Course Details:&lt;/strong&gt;&lt;/p&gt;
          &lt;table&gt;
          &lt;tr&gt;
          &lt;th&gt;Course ID:&lt;/th&gt;
          &lt;td&gt;&lt;input type='text' id='newCourseNo' name='CourseNoNew' value='' /&gt; &lt;/td&gt;
          &lt;/tr&gt;
          &lt;/table&gt;
          &lt;div id='newAlert'&gt;&lt;/div&gt;
  
          &lt;/form&gt;
  
          &lt;p id='submitupdatebtn'&gt;&lt;button id='updateSubmit'&gt;Update Course&lt;/button&gt;&lt;/p&gt;
  
      ";
  
      echo $editsession;
  </code></pre>
  
  <p>Now I want to validate the form using Javascript and below is the code for the javascript validation:</p>
  
  <pre><code>function editvalidation() {
  
  var isDataValid = true;
  
  var currentCourseO = document.getElementById("currentCourseNo");
  var newCourseNoO = document.getElementById("newCourseNo");
  
  var currentCourseMsgO = document.getElementById("currentAlert");
  var newCourseMsgO = document.getElementById("newAlert");
  
  
  if (currentCourseO.value == ""){
  currentCourseMsgO.innerHTML = "Please Select a Course to edit from the Course Drop Down Menu";
  $('#newAlert').hide();
  isDataValid = false; 
  }else{
  currentCourseMsgO.innerHTML = ""; 
  }
  
  
  if (newCourseNoO.value == ""){
  newCourseMsgO.innerHTML = "Please fill in the Course ID in your Edit";
  $('#newAlert').show();
  isDataValid = false;
  } else{
  newCourseMsgO.innerHTML = ""; 
  }
  
  
  return isDataValid;
  
  }
  </code></pre>
  
  <p>Now this is the problem I am getting:</p>
  
  <p>What I am trying to state in my javascript validation is that if the <code>#currentCourseNo</code> is empty (text input is blank), then it displays the error message for this which belongs to the div tag <code>#currentAlert</code>, but it hides messages which are displayed in the div tag <code>#newAlert</code>. If the  <code>#currentCourseNo</code>is not empty then show the <code>#newAlert</code> error messages if there are any. </p>
  
  <p>The problem I am having is that it is still showing the <code>#newAlert</code> error messages when the <code>#currentCourseNo</code> text input is empty, when it really should be hidden. What needs to be changed in the javascript above in order to achieve what I want to achieve?</p>