成功/錯誤消息在提交表單時不斷消失

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調用，並在成功函數中重新提交表單。