Question

我有一个实时应用here

请按照以下步骤使用app：

当您打开应用程序时，请立即单击“提交课程和模块”提交按钮。您将看到一条javascript错误消息，显示“请选择课程和模块”。
现在在课程下拉菜单中选择课程“INFO101 ....”，在模块下拉菜单中选择模块“CHI2513 ....”，然后单击提交按钮。
您会在下面看到一个表单显示，其中包含文本输入，显示正常。
但这就是问题所在。现在，如果您查看“课程和模块”下拉菜单，它们都会显示“请选择”。因此，再次单击“提交课程和模块”提交按钮。现在它显示错误消息，就像它在步骤1中一样，但它仍然显示下面的表单（文本输入）。如果出现错误消息，我不希望表单显示在下面。

所以我的问题是，如果出现错误消息，是否有一种方法可以隐藏表单或不显示下面的表单。哪个是最佳做法？

以下是代码：

Javascript代码：

<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>

下面是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

由于您使用的是jQuery，只需执行以下操作：

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

通过在条件中添加$('#form').hide();，您可以确保在显示消息Please Select a Course and Module时，表单将被隐藏。

Answer 2

尝试类似

的内容

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

<?php } ?>

出现错误消息时如何隐藏或不显示表单

2 个答案: