Question

I want a confirmation to appear when the user submits a form. The problem is that the confirmation is not appearing and instead it is just navigating the form straight to its destination. Why is the confirmation not appearing? It is not even checking the validation before the confirmation.

Below is html code:

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

Below is 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:

Below is my actual code but problem I am receiving is this error:

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

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

You have a syntax error, so the JS is failing and the browser is submiting the form.

This line is missing the end ‘”‘.

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

Change it to:

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

Edit

Change the event you’re triggering the confirmation on. You’re triggering it on an “onClick”, which is probably happening after the form is already submited, change your last line to:

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

That will trigger the box before the submit is executed. Let me know if that fixes it for you.