成功/错误消息在提交表单时不断消失

Question

我有一个应用程序(editsessionadmin.php)，用户在相关文本输入中显示其评估的名称，日期和时间。现在，当用户提交时，它将显示一个确认信息，当用户确认时，然后通过使用ajax，它将导航到updatedatetime.php，在那里它将更新数据库中的评估时间和日期，并将成功或错误消息显示在顶部editsessionadmin.php页面。

但我有一个小问题。

问题：使用div标签，我能够从updatedatetime.php脚本更新后，检索错误或成功的消息，并通过使用此jQuery代码$("#targetdiv").html(data)在editsessionadmin.php脚本显示。问题在于，当用户提交表单时，它显示消息，然后消息在表单提交后消失。我希望信息显示在editsessionadmin.php页面的顶部，并且不会消失。它为什么会消失？

下面是editsessionadmin.php代码

 <script> 

    function submitform() {  

    $.ajax({ 
     type: "POST", 
     url: "/updatedatetime.php", 
     data: $('#updateForm').serialize(), 
     success: function(html){ 
      $("#targetdiv").html(html); 
     } 
    });   
} 

     function showConfirm(){ 

      var examInput = document.getElementById('newAssessment').value; 
      var dateInput = document.getElementById('newDate').value; 
      var timeInput = document.getElementById('newTime').value; 

      if (editvalidation()) { 

     var confirmMsg=confirm("Are you sure you want to update the following:" + "\n" + "Exam: " + examInput + "\n" + "Date: " + dateInput + "\n" + "Time: " + timeInput); 

     if (confirmMsg==true) 
     { 
     submitform(); 
    } 
    } 
} 

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

      </script> 

     <h1>EDIT AN ASSESSMENT'S DATE/START TIME</h1> 

     <p>You can edit assessment's Date and Start time on this page. Only active assessments can be editted.</p> 

     <div id="targetdiv"></div> 

     <form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validation();"> 
     <table> 
     <tr> 
     <th>Course: INFO101</th> 
     <th>Module: CHI2513</th> 
     </tr> 
     </table> 
     <p><input id="moduleSubmit" type="submit" value="Submit Course and Module" name="moduleSubmit" /></p> 

     </form> 


     .... 


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

     <p><strong>New Assessment's Date/Start Time:</strong></p> 
     <table> 
     <tr> 
     <th>Assessment:</th> 
     <td><input type='text' id='newAssessment' name='Assessmentnew' readonly='readonly' value='' /> </td> 
     </tr> 
     <tr> 
     <th>Date:</th> 
     <td><input type='text' id='newDate' name='Datenew' readonly='readonly' value='' /> </td> 
     </tr> 
     <tr> 
     <th>Start Time:</th> 
     <td><input type='text' id='newTime' name='Timenew' readonly='readonly' value=''/><span class='timepicker_button_trigger'><img src='Images/clock.gif' alt='Choose Time' /></span> </td> 
     </tr> 
     </table> 
     <div id='datetimeAlert'></div> 

<button id='updateSubmit'>Update Date/Start Time</button> 


     </form> 
     "; 

     echo $editsession; 


     } 

     ?> 

下面是updatedatetime.php代码：

<?php 

// connect to the database 
include('connect.php'); 

    /* check connection */ 
    if (mysqli_connect_errno()) { 
    printf("Connect failed: %s\n", mysqli_connect_error()); 
    die(); 
    } 

echo 'sumbit successful'; 

$sessionname = (isset($_POST['Assessmentnew'])) ? $_POST['Assessmentnew'] : ''; 
$sessiondate = (isset($_POST['Datenew'])) ? $_POST['Datenew'] : ''; 
$sessiontime = (isset($_POST['Timenew'])) ? $_POST['Timenew'] : ''; 

$formatdate = date("Y-m-d",strtotime($sessiondate)); 
$formattime = date("H:i:s",strtotime($sessiontime)); 

$updatesql = "UPDATE Session SET SessionDate = ?, SessionTime = ? WHERE SessionName = ?";           
$update = $mysqli->prepare($updatesql); 
$update->bind_param("sss", $formatdate, $formattime, $sessionname); 
$update->execute(); 

echo 'update successful'; 

$query = "SELECT SessionName, SessionDate, SessionTime FROM Session WHERE SessionName = ?"; 
// prepare query 
$stmt=$mysqli->prepare($query); 
// You only need to call bind_param once 
$stmt->bind_param("s", $sessionname); 
// execute query 
$stmt->execute(); 
// get result and assign variables (prefix with db) 
$stmt->bind_result($dbSessionName, $dbSessionDate, $dbSessionTime); 
//get number of rows 
$stmt->store_result(); 
$numrows = $stmt->num_rows(); 

echo 'select successful'; 

if ($numrows == 1){ 

echo "<span style='color: green'>Your Assessment's new Date and Time have been updated</span>"; 

}else{ 

echo "<span style='color: red'>An error has occured, your Assessment's new Date and Time have not been updated</span>"; 

} 

     ?> 

Answer 1

好了，通过你的代码杂草，执行表单提交，这是所有你需要的Ajax调用

function submitupdate() {  

    $.ajax({ 
     type: "POST", 
     url: "/updatedatetime.php", 
     data: $('#updateForm').serialize(), 
     success: function(html){ 
      $("#targetdiv").html(html); 
     } 
    });   
} 

这是假设

/updatedatetime.php 

计算正确，回声成功或更新失败，

这里是一个FIDDLE向你展示你需要的窗体本身的最小值。您不需要在窗体本身上放置任何方法或操作，只需要放置窗体标签。

至于按钮提交......你可以把任何地方，让它什么，只是确保你给它一个ID并附加一个单击处理程序将其提交表单。

Answer 2

您必须在通话后再次移除提交表单的行，并且该行可以显示为updateFormO.submit();。通过post方法，您可以进行ajax调用，并在成功函数中重新提交表单。