0

ここにライブアプリケーションがあります

アプリを使用するには、次の手順に従ってください。

  1. アプリを開いて、すぐに [コースとモジュールを送信] 送信ボタンをクリックします。「コースとモジュールを選択してください」という JavaScript エラー メッセージが表示されます。

  2. コースのドロップダウンメニューでコース「INFO101....」を選択し、モジュールのドロップダウンメニューでモジュール「CHI2513....」を選択して、送信ボタンをクリックします。

  3. テキスト入力が含まれている場所の下にフォームが表示されますが、これは問題ありません。

  4. しかし、ここに問題があります。コースとモジュールのドロップダウンメニューを見ると、どちらも「選択してください」と表示されています。「コースとモジュールの送信」送信ボタンをもう一度クリックします。手順 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;



}


?>
4

2 に答える 2

3

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

于 2012-11-17T16:23:47.617 に答える
1

のようなものを試してください

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

<?php } ?>
于 2012-11-17T16:21:05.747 に答える