確認在提交後不出現

Question

我想要確認在用戶提交表單時出現。問題是確認沒有出現，而是直接將表單導航到目的地。爲什麼沒有出現確認？它甚至在確認之前不檢查驗證。

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

UPDATE：

下面是我實際的代碼，但我收到問題是這樣的錯誤：

Jquery code：

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

} 



?> 

Answer 1

你有一個語法錯誤，所以JS失敗，而瀏覽器submiting形式。

此行缺少結束「'

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

這會觸發方塊之前的提交被執行。讓我知道如果這可以解決它。

Answer 2

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