CODEWITHSUNDEEP
phpjqueryhtml
user1964964
user1964964

Reputation: 255

page still loads if user cancels confirmation

I have a table row which contains a button:

<form id='studentAddForm'>
<table id='removetbl'>
<tr>
<td><button id='submitstudents'>Submit Students</button></td>
</table>
</form>

When the button is clicked, it displays a confirmation box, hoow come though when I click on the Cancel button with in the confirmation box does it still want to load the page? I am getting no errors in my page

Below is jquery code showing click event, confirmation and submit form:

function submitform() {    
    $.ajax({
        type: "POST",
        url: "updatestudentsession.php",
        data: { 
            sessionid:  $('#currentid').val(),
            students:   $('#addtextarea').val()
        },
        dataType:'json',  //get response as json
        success: function(result) {
            if(result.errorflag) {
                //do your stuff on getting error message
                var newHtml="<span style='color: red'>"+result.msg+"</span>"; 
                $("#targetdiv").html(newHtml);  //i am displaying the error msg here
            } else {
                //you got success message
                var newHtml="<span style='color: green'>"+result.msg+"</span>"; 
                $("#targetdiv").html(newHtml);
                $('#targetdiv').show();
            }
        }
    });        
}

function showConfirm() {
    var examInput = document.getElementById('newAssessment').value;
    if (editvalidation()) {
        var confirmMsg=confirm("Are you sure you want to add your selected Students to this Assessment:" + "\n" + "Exam: " + examInput);
         if (confirmMsg==true) {
             submitform();
         }
     }
 } 

 $('body').on('click', '#submitstudents', showConfirm);

UPDATE:

I don't know if the information below will help you even further but below shows all of the forms in the page:

FORM 1:

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

echo $assessmentform;

FORM 2:

$editsession = "
<form id='updateForm'>

    <p><strong>Assessment Chosen:</strong></p>
    <table>
    <tr>
    <th></th>
    <td><input type='hidden' id='currentId' name='Idcurrent' readonly='readonly' value='' /> </td>
    </tr>
<tr>
<th>Assessment:</th>
<td><input type='text' id='currentAssessment' name='Assessmentcurrent' readonly='readonly' value='' /> </td>
</tr>
    </table>
    <div id='currentAlert'></div>
";

echo $editsession;

FORM 3:

    $studentexist="
    <form id='studentExistForm'>
    <p><strong>Current Students in Chosen Assessment:</strong></p>
    <p>{$studentSELECT}</p>
    </form> 
    </div>";

echo $studentexist;

FORM 4:

    $studentremain="<div id='rt-container'>
    <form id='studentRemainForm'>
    <p>{$remainSELECT}</p>
    <table id='addtbl'>
    <tr>
    <td><button type='button' id='addbtn'>Add</button></td>
    <td><button type='button' id='addall'>Select All</button></td>
    <td><button type='button' id='adddeselect'>Deselect All</button></td>
    </table>
    </form>";

echo $studentremain;

FORM 5:

$studentadd="
<form id='studentAddForm'>
<p>{$addSELECT}</p>
<table id='removetbl'>
<tr>
<td><button id='submitstudents'>Submit Students</button></td>
</table>
</form>
</div>";

echo $studentadd;

Upvotes: 1

Views: 113

Answers (5)

Charles
Charles

Reputation: 4538

Try this. 

<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript">
function confirm() {
  //Code to execute before page close
  return 'Any unsaved work will be lost.';
}
window.onbeforeunload=confirm;
</script>

This perhaps the simplest way I've found to confirm when you leave a page (such as by submitting a form).

Upvotes: 0

Dennis Martinez
Dennis Martinez

Reputation: 6512

Always return false unless the user confirms, so just add an onsubmit to your forms.

<form onsubmit="return false;"></form>

Upvotes: 0

Troy Watt
Troy Watt

Reputation: 888

Similar to Jai's answer, since you are posting the form through ajax you need to return false from your click handler to prevent the form from submitting, this is what is causing the page to reload;

function showConfirm(){

    var examInput = document.getElementById('newAssessment').value;

    if (editvalidation()) {

        var confirmMsg=confirm("Are you sure you want to add your selected Students to this Assessment:" + "\n" + "Exam: " + examInput);

         if (confirmMsg==true)
         {
             submitform();   
         }
    }
    // prevent form submission, defer to ajax post
    return false:
}

Upvotes: 1

pzirkind
pzirkind

Reputation: 2338

It seems that this line is what's giving you grief:

var confirmMsg=confirm("Are you sure you want to add your selected Students to this Assessment:" + "\n" + "Exam: " + examInput);

The confirm function is always returning true, examining this function will help you solve the problem.

Upvotes: 0

Jai
Jai

Reputation: 74738

Try using this:

if (confirmMsg){
     submitform();   
 }else{
     return false;
 }

Upvotes: 0

Related Questions