How to hide or not display form when error message appears

Question

I have a live application here

Please follow steps in order to use app:

1. When you open the app, straight away click on the "Submit Course and Module" submit button. You will see a javascript error message appear stating "Please Select a Course and Module".

2. Now select Course "INFO101...." in the course drop down menu and Module "CHI2513...." in the module drop down menu and click on the submit button.

3. You will see a form display below where it contains text inputs appear which is fine.

4. But this is where the problem lies. Now if you look at the Course and Module drop down menus, they both state "Please Select". So click on the "Submit Course and Module" submit button again. Now it displays the error message like it does in step 1, but it still displays the the form underneath (the text inputs). I don't want the form to be displayed underneath if the error message appears.

So my question is pretty much is that if the error message appears, is there a way I can hide the form or not display the form underneath. Which is ever is best practice?

Below is the code:

Javascript code:

<script type="text/javascript">


     function validation() {

                var isDataValid = true;

                var courseTextO = document.getElementById("coursesDrop");
                var moduleTextO = document.getElementById("modulesDrop");

                var errModuleMsgO = document.getElementById("moduleAlert");

      if (courseTextO.value == "" && moduleTextO.value == ""){
          errModuleMsgO.innerHTML = "Please Select a Course and Module";
          isDataValid = false;
      } else if (courseTextO.value == ""){
          errModuleMsgO.innerHTML = "Please Select a Course";
          isDataValid = false;      
      }else  if (moduleTextO.value == ""){
          errModuleMsgO.innerHTML = "Please Select a Module";
          isDataValid = false;    
        }else{
                errModuleMsgO.innerHTML = ""; 
            }

            return isDataValid;

            }



    </script>

Below is the HTML/php:

<h1>EDIT AN ASSESSMENT'S DATE/START TIME</h1>   

<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validation();">
<table>
<tr>
<th>Course: <?php echo $courseHTML; ?></th>
<th>Module: <?php echo $moduleHTML; ?></th>
</tr>
</table>
<p><input id="moduleSubmit" type="submit" value="Submit Course and Module" name="moduleSubmit" /></p>
<div id="moduleAlert"></div>
<div id="targetdiv"></div>
</form>

<?php

if (isset($_POST['moduleSubmit'])) {    

$outputmodule = ""; 

$moduleInfo = explode("_", $_POST['modules']);
$moduleId = $moduleInfo[0];
$moduleName = $moduleInfo[1];
$outputmodule = sprintf("<p><strong>Module:</strong> %s - %s</p>", $moduleId, $moduleName);


$editsession = "
<div id='rt-container'>
<form id='updateForm'>

    <p><strong>Current Assessment's Date/Start Time:</strong></p>
    <table>
    <tr>
    <th>Assessment:</th>
    <td><input type='text' id='currentAssessment' name='Assessmentcurrent' readonly='readonly' value='' /> </td>
    </tr>
    <tr>
    <th>Date:</th>
    <td><input type='text' id='currentDate' name='Datecurrent' readonly='readonly' value='' /> </td>
    </tr>
    <tr>
    <th>Start Time:</th>
    <td><input type='text' id='currentTime' name='Timecurrent' readonly='readonly' value=''/> </td>
    </tr>
    </table>
    <div id='currentAlert'></div>

    <p><strong>New Assessment's Date/Start Time:</strong></p>
    <table>
    <tr>
    <th>Assessment:</th>
    <td><input type='text' id='newAssessment' name='Assessmentnew' readonly='readonly' value='' /> </td>
    </tr>
    <tr>
    <th>Date:</th> 
    <td><input type='text' id='newDate' name='Datenew' readonly='readonly' value='' /> </td>
    </tr>
    <tr>
    <th>Start Time:</th> 
    <td><input type='text' id='newTime' name='Timenew' readonly='readonly' value=''/></td>
    </tr>
    </table>
    <div id='datetimeAlert'></div>

    </form>

    <p id='submitupdatebtn'><button id='updateSubmit'>Update Date/Start Time</button></p>

    </div>
";

echo $editsession;



}


?>

Answer 1

Since you're using jQuery, just do this:

  if (courseTextO.value == "" && moduleTextO.value == ""){
      $('#form').hide();
      errModuleMsgO.innerHTML = "Please Select a Course and Module";
      isDataValid = false;
  } 

By adding $('#form').hide(); to your condition, you ensure that anytime the message Please Select a Course and Module is displayed that the form will be hidden.

Answer 2

try something like

<?php if(!$error) { ?>
    <form id='updateForm'>
    .
    .
    .
     </form>

<?php } ?>