Show/Hide Submit on Dropdown

JavaScript
1

Hello,
I am new to coding and have been asked to modify some code. We have a form that hides the submit button until a drop down menu is selected, it also brings in other options depending on the menu item selected. The problem is that when they select Choose an option after selecting a true option the submit button is still there. I want the submit button to be hidden again if they go back to Choose an option, any help would be greatly appreciated.

  Thanks

Here is the code

  <script type="text/javascript">
function showForm(id) {
document.getElementById('submitForm').style.display = "block";
for (var i=1;i<4;i++) {
if(i==id) {
document.getElementById(i).style.display = 'block';
} else { document.getElementById(i).style.display ='none';
}
}
}
function validateForm(theForm) {
if (theForm.readInstructions.checked == false) {
alert ('Please check the I have read the instructions carefully checkbox');
return false;
} else { return true;
}
}
  </script>


      <form action="emailRequest.asp" method="post"
 onsubmit="return validateForm(this)">
        <h1> Drop/Add/Level Change FORM </h1>
        <div id="0" style="display: block;">
        <p> Last Name: <input name="lastName"
 type="text"> <br>
First Name: <input name="firstName" type="text"> <br>
Phone Number: <input name="phoneNumber" type="text">
        <br>
Email: <input name="email" type="text"> <br>
        </p>
        </div>
        <p><b> I wish to: </b></p>
        <select id="dropdownMenu" name="dropdownMenu"
 onchange="javascript: showForm(document.getElementById('dropdownMenu').value);">
        <option value="0"> Choose an option </option>
        <option value="1">Add</option>
        <option value="2">Drop</option>
        <option value="3">Level Change</option>
        </select>
        <div id="3" style="display: none;">
        <h2> You selected Level Change </h2>
        <p> Class for which level change requested: <input
 name="class" size="10" type="text"><br>
Current Skill Level: <input name="currentLevel" size="4"
 type="text"> <br>
Requested Skill Level: <input name="requestedLevel" size="4"
 type="text">)<br>
        </p>
        </div>
        <div id="1" style="display: none;">
        <h2> You selected Add Course </h2>
        <p> Class to Add: <input name="classAdd"
 size="10" type="text"><br>
Reason: <br>
        <textarea name="reasonAdd" rows="3" cols="40"></textarea>
        <br>
        </p>
        </div>
        <div id="2" style="display: none;">
        <h2> You selected Drop Course </h2>
        <p> Class to Drop: <input name="classDrop"
 size="10" type="text"><br>
Reason: <br>
        <textarea name="reasonDrop" rows="3" cols="40"></textarea>
        <br>
        </p>
        </div>
        <div id="submitForm" style="display: none;">
        <p> <input name="readInstructions"
 type="checkbox"> I have read the instructions carefully <br>
        <input value="Submit" type="submit"> </p>
        </div>
      </form>
2

I added the following:

    if (id == 0) {
        document.getElementById('submitForm').style.display = "none";
    }
3

Thank you that worked great!