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

更新

以下是我的实际代码，但我收到的问题是这个错误：

Jquery代码：

    <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失败并且浏览器正在提交表单。

这一行缺少结尾'“'。

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

确认没有在提交后出现

2 个答案: