Question

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

但我有一些小问题。

问题：使用div标签，我可以在updatedatetime.php脚本更新后检索错误或成功消息，并使用此jquery代码{{1}将其显示在editsessionadmin.php脚本中}}。问题是当用户提交表单时，它会显示消息，然后在提交表单后消息消失。我希望消息显示在$("#targetdiv").html(data)页面的顶部而不会消失。为什么它会消失？

以下是editsessionadmin.php的代码

editsessionadmin.php

以下是updatedatetime.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;


        }

        ?>

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调用，然后在success函数中重新提交表单。

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

2 个答案: