1

ユーザーがフォームを送信したときに確認を表示したい。問題は、確認が表示されず、代わりにフォームを目的地まで直接ナビゲートしていることです。確認が表示されないのはなぜですか? 確認の前に検証をチェックすることすらありません。

以下はhtmlコードです：

<form id='choiceForm' action='assessment.php' method='post'>
    <select name='currentperson' id='currentperson'>
        <option value=''>Select</option>
        <option value='one'>John Trigger</option>
    </select>

    <p id='submitchoicebtn'><button id='choiceSubmit'>Choose Assessment</button></p>
    <div id='currentAlert'></div>
</form>

以下はjqueryです：

    function choicevalidation() {
var isDataValid = true;
var currentPerson = document.getElementById("currentperson");
var currentPersonMsg = document.getElementById("currentAlert");
currentPersonMsg.innerHTML = "";

if (currentPerson.value == "") {
    currentPersonMsg.innerHTML = "Please Select a Person";
    isDataValid = false; 
}
else {
    currentPersonMsg.innerHTML = "";
}
    return isDataValid;
}

function showConfirm(){
   console.log(choicevalidation());
   if (choicevalidation()) {
      var confirmMsg = confirm("Are you sure you want to Proceed");
      if (confirmMsg == true) {
        return true;   
      } else {
        return false;
      }
   } else
   {
      return false;
   }
} 

$('#choiceForm').on('submit', showConfirm);

アップデート：

以下は私の実際のコードですが、私が受け取っている問題はこのエラーです:

Jクエリコード:

    <script type="text/javascript">


       function choicevalidation() {

                var isDataValid = true;

                var currentAssesO = document.getElementById("currentAssessment");

                var currentAssesMsgO = document.getElementById("currentAlert");

          currentAssesMsgO.innerHTML = "";


      if (currentAssesO.value == ""){
          $('#targetdiv').hide();
          currentAssesMsgO.innerHTML = "Please Select an Assessment to edit from the Assessment Drop Down Menu";
          isDataValid = false; 
        }else{
            currentAssesMsgO.innerHTML = "";
        }
            return isDataValid;


        }


             function showConfirm(){

              var examInput = document.getElementById('curentAssessment').value;
              var dateInput = document.getElementById('currentDate').value;
              var timeInput = document.getElementById('currentTime').value;

              if (choicevalidation()) {

             var confirmMsg=confirm("Are you sure you want to take the following Assessment:" + "\n" + "Exam: " + examInput +  "\n" + "Date: " + dateInput + "\n" + "Time: " + timeInput);

             if (confirmMsg==true)
             {
             return true;    
         }else {
        return false;
      }
  } else{
      return false;
   }
} 

   $('#choiceForm').on('submit', showConfirm);    


    </script>

PHP/HTML コード:

<?php

// connect to the database


//query which compiles modules drop down menu


$moduleHTML = "";
$moduleHTML .= '<select name="modules" id="modulesDrop">' . PHP_EOL;
$moduleHTML .= '<option value="">Please Select</option>' . PHP_EOL;

while ($sqlstmt->fetch()) {
    $moduleHTML .= sprintf('<option value="%1$s_%2$s_%3$s">%1$s - %2$s</option>' . PHP_EOL, $dbModuleNo, $dbModuleName, $dbModuleId);
}

$moduleHTML .= '</select>';

$pHTML = "";


?> 

<h1>TAKE AN ASSESSMENT</h1>   

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

<?php

if (isset($_POST['moduleSubmit'])) {
    //query which compiles drop down menu below


    $sessionHTML = '<select name="session" id="sessionsDrop">' . PHP_EOL;
    $sessionHTML .= '<option value="">Please Select</option>' . PHP_EOL;

    while ($sessionqrystmt->fetch()) {
        $sessionHTML .= sprintf("<option value='%s'>%s - %s - %s</option>", $dbSessionId, $dbSessionName, date("d-m-Y", strtotime($dbSessionDate)), date("H:i", strtotime($dbSessionTime))) . PHP_EOL;
    }


    $sessionHTML .= '</select>';


    $assessmentform = "<div id='lt-container'> 
<form action='" . htmlentities($_SERVER['PHP_SELF']) . "' method='post' id='assessmentForm'> 
<p id='warnings'>{$pHTML}</p> 
{$outputmodule} 
<p><strong>Assessments:</strong> {$sessionHTML} </p>   
</form> 
</div>";

    echo $assessmentform;

    $choosesession = " 
<div id='rt-container'> 
<form id='choiceForm' action='assessment.php' method='post'> 

    <p><strong>Chosen Assessment:</strong></p> 
    <table> 
    <tr> 
    <th></th> 
    <td><input type='hidden' id='currentId' name='Idcurrent' readonly='readonly' value='' /> </td> 
    </tr> 
    </table> 
    <p id='submitchoicebtn'><button id='choiceSubmit'>Choose Assessment</button></p> 
    <div id='currentAlert'></div> 
    </form> 

    </div> 
";

    echo $choosesession;

}



?>
4

2 に答える 2

2

構文エラーがあるため、JSは失敗し、ブラウザはフォームを送信しています。

この行には、末尾の'"'がありません。

 var confirmMsg=confirm("Are you sure you want to Proceed);

次のように変更します。

 var confirmMsg=confirm("Are you sure you want to Proceed");

編集

確認をトリガーするイベントを変更します。「onClick」でトリガーします。これは、フォームが既に送信された後に発生する可能性があります。最後の行を次のように変更します。

   $('#choiceForm').on('submit', showConfirm);

これにより、送信が実行される前にボックスがトリガーされます。それで問題が解決するかどうか教えてください。

于 2013-01-14T12:33:04.827 に答える
1

Deleteman の回答は機能しますが、何も選択されていない場合、または確認ポップアップで [キャンセル] をクリックした場合は、送信しないようにする必要があります。だから私はちょうど条件に追加します：

return false;

したがって、js全体は次のようになります。

function choicevalidation() {
var isDataValid = true;
var currentPerson = document.getElementById("currentperson");
var currentPersonMsg = document.getElementById("currentAlert");
currentPersonMsg.innerHTML = "";

if (currentPerson.value == "") {
    currentPersonMsg.innerHTML = "Please Select a Person";
    isDataValid = false; 
}
else {
    currentPersonMsg.innerHTML = "";
}
    return isDataValid;
}

function showConfirm(){
   console.log(choicevalidation());
   if (choicevalidation()) {
      var confirmMsg = confirm("Are you sure you want to Proceed");
      if (confirmMsg == true) {
        return true;   
      } else {
        return false;
      }
   } else
   {
      return false;
   }
} 

$('#choiceForm').on('submit', showConfirm);
于 2013-01-14T13:24:08.593 に答える