我有一个表单,它有下拉列表选项、输入框和提交按钮。选择选项是动态编译的。我在我的页面上插入以下内容:;
<div id="dropdown">
<?php include("./listforward.php"); ?>
</div>
listforward.php包含;
...
<form id="changeforwardForm" method="post" action="changeforward.php" class="ajaxform">
...
</form>
changeforward.php做了一些工作并给出了一条消息;
<?php echo '<div style="color:red">'.$msg.'</div>'; ?>
提交后,此消息显示在页面顶部附近
<div id="testDiv"></div>
并且,将重新加载整个表单以显示更新的列表选项。我遇到的问题是,第一次提交后,消息只在顶部显示一次,而在第二次提交时,它会打开一个空白页面并显示在那里。
我知道这与.live()或.on()有关,但就我的一生而言,我不知道如何应用它。
我的外部Javascript文件
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
jQuery表单插件
<script type="text/javascript">
// prepare the form when the DOM is ready
$(document).ready(function(){
var options = {
target: '#testDiv', // target element(s) to be updated with server response
success: showResponse // post-submit callback
};
// bind form using 'ajaxForm'
$('.ajaxform').ajaxForm(options);
});
// post-submit callback
function showResponse(responseText, statusText, xhr, $form) {
$("#dropdown").load("index.php #dropdown");
}
</script>
我在同一页上还有另一个表单(当前已禁用)。我想把这个表单的输出作为目标,并让它在#testDiv上显示消息。
如果踢向正确的方向,我们将不胜感激!
尊敬的Steven
您还没有显示所有的代码,但据我所知,您使用的是:
$('.ajaxform').ajaxForm(options);
});
将您的函数附加到from submit。然后,正如您所说,您重新加载表单,以便不再附加该函数。然后,当您重新提交时,它的行为类似于常规提交。
你应该在重新加载后将你的方法重新附加到表单上,即再次运行这个:
$('.ajaxform').ajaxForm(options);
});