我的index.html页面上有以下代码。每当我在此页面上提交表单时,警报将被选中并显示在屏幕上,然后输出表单处理脚本将被转储到#results div中。完美!
$('form').ajaxForm({
beforeSubmit: function() {
alert("Form submitted!");
$('#results').html('Submitting...');
},
success: function(output) {
var $out = $('#results');
$out.html('Your results:');
$out.append('<div>'+ output +'</div>');
}
});
但是,如果我要使用新表单更新页面上的div然后提交这个新的可用表单,我会被重定向到一个空白页面,其中包含表单处理脚本的结果。
有没有办法避免此页面更改并在保留在当前页面时提交表单?
我一直在玩.live()
和其他几个人,但似乎无法理解它......
有什么建议吗?
答案 0 :(得分:1)
只需从form
中取出#results
或更新表单html $('form').html('whatever');
,即可保存您的事件。
答案 1 :(得分:1)
最简单的方法是在创建新的.ajaxForm()
元素后绑定<form/>
。
function before(){
alert("Form submitted!");
$('#results').html('Submitting...');
};
function allGood(){
var $out = $('#results');
$out.html('Your results:');
$out.append('<div>'+ output +'</div>');
}
$('form').ajaxForm({
beforeSubmit: before,
success: allGood
});
//do something to create a new form
var $form = $("<form/>");
$form.ajaxForm({
beforeSubmit: before,
success: allGood
});
$("#someDiv").append($form);
<强> Example on jsfiddle 强>
答案 2 :(得分:1)
或者您可以使用jquery ajax方法并在那里执行必要的成功功能。
在执行AJAX请求时,可以复制像验证等形式的所有好处。
答案 3 :(得分:0)
Ajax处理程序很好但你仍然需要将表单绑定到一个事件,使其通过ajax提交,而不是通过浏览器中的普通POST提交。
试试这个:
$(document).on('submit', 'form', function (e) {
e.preventDefault();
console.log('your logic here');
});
答案 4 :(得分:-1)
您可以使用livequery。 Livequery会将ajaxForm附加到DOM中加载的任何表单
$('form').livequery(function(){
$(this).ajaxForm({
beforeSubmit: function() {
alert("Form submitted!");
$('#results').html('Submitting...');
},
success: function(output) {
var $out = $('#results');
$out.html('Your results:');
$out.append('<div>'+ output +'</div>');
}
});
});