Question

我有一个包含按钮的表格行：

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

单击该按钮时，会显示一个确认框，当我点击确认框中的Cancel按钮时，是否仍然要加载页面？我的页面没有错误

以下是显示点击事件，确认和提交表单的jquery代码：

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

更新

我不知道以下信息是否会对您有所帮助，但下面显示了该页面中的所有表单：

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

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

表格3：

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

echo $studentexist;

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

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

Answer 1

与Jai的回答类似，由于您通过ajax发布表单，因此需要从Click处理程序返回false以防止表单提交，这是导致页面重新加载的原因;

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

Answer 2

尝试使用：

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

Answer 3

试试这个。

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

这可能是我发现在您离开页面时确认的最简单方式（例如提交表单）。

Answer 4

这条线似乎让你感到悲伤：

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

confirm函数始终返回true，检查此函数将帮助您解决问题。

Answer 5

除非用户确认，否则始终返回false，因此只需在表单中添加onsubmit。

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

如果用户取消确认，页面仍会加载

5 个答案: