成功/错误消息在提交表单时不断消失
我有一个应用程序(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>";
}
?>
好了,通过你的代码杂草,执行表单提交,这是所有你需要的Ajax调用
function submitupdate() {
$.ajax({
type: "POST",
url: "/updatedatetime.php",
data: $('#updateForm').serialize(),
success: function(html){
$("#targetdiv").html(html);
}
});
}
这是假设
/updatedatetime.php
计算正确,回声成功或更新失败,
这里是一个FIDDLE向你展示你需要的窗体本身的最小值。您不需要在窗体本身上放置任何方法或操作,只需要放置窗体标签。
至于按钮提交......你可以把任何地方,让它什么,只是确保你给它一个ID并附加一个单击处理程序将其提交表单。
嗨,我已经更新代码的问题,我知道你使用'$('body')。on('click', '#update',submitupdate);'。我不知道我是否可以使用相同的东西,因为我想要做的是当用户点击“更新日期/开始时间”按钮时,它将通过验证功能(检查是否没有空白文本输入),如果没有验证,则显示确认,为了能够执行提交,我需要在代码中添加哪些最后部分。如果用户点击确认提交并确认,那么消息不会出现 – user1819709
@ user1819709对于上述评论,请参阅http://jsfiddle.net/videsignz/4VVxs/7/使noteconfirm()函数的注释,验证这个函数内的输入。另外,不要使用id来使用documentgetelement,而要使用Jquery简写。 – VIDesignz
嗨,大问题,当我提交并确认,它不执行更新,或显示回声,我有更新的代码有问题。 – user1819709
您必须在通话后再次移除提交表单的行,并且该行可以显示为updateFormO.submit();
。通过post方法,您可以进行ajax调用,并在成功函数中重新提交表单。
我可以吗请问在进行ajax调用时,post方法应该是什么样子以确保它是正确的 – user1819709
post方法应该是这样的: '$ .post('updatedatetime.php',{ Assessmentnew:$(“#newAssessment” ).val(), Datenew:$(“#Datenew”)。val(), Timenew:$(“#Timenew”)。val()}, function(data){ $(“#targetdiv “).html(data); }); ' 我刚才看到你不能使用serialize方法将你的数据发送到服务器。 serialize方法对get方法(.get而不是.post)来说是完美的。 –
@VIDesignz会发生什么事是,当我在确认点击“确定”,它显示的信息,而该页面提交(你可以看到浏览器选项卡上的页面加载),当页面提交自己,然后它消失了。我已经包括半结肠顺便说一句,没有变化 – user1819709
@VIDesignz是的这就是正确 – user1819709
@VIDesignz这可能是问题所在。我只是想从'updatedatetime.php'检索回声和运行这个'$(“#targetdiv”),将其放置在'targetdiv' div标签HTML(数据);'。如果'#targetdiv'需要在页面加载时设置,那么这就是我出错的地方,它应该设置什么? – user1819709