我有一个ajax表单,当提交时显示错误或成功消息,理想情况下我想将浏览器滚动到表单的顶部,以便用户可以看到这些消息,但是当我实现它时,似乎没有工作正常,我不知道如何解决它: - 它要么滚动不够高还是刷新? :(我很茫然,如果你能引导我那会很棒:)
$('#submit').bind('click', function(){
$('body, html').animate({scrollTop:$('form').offset().top}, 'slow', 'easeInCubic');
$.ajax({
url:$(this).attr('action'),
type:'POST',
data:$('form').serialize(),
dataType:'json',
success:function(respond) {
if(respond.result == 'false') {
var error_msg = '<h3>Please correct the following errors:</h3><ul>'+respond.errors+'</ul>';
$('.error_msg').html(error_msg);
} else {
var success_msg = '<h3>Success!</h3>';
$('.error_msg').empty();
$('.success_msg').html(success_msg);
$('form').find("input[type=text], textarea").val("");
setTimeout(function() {
$('.success_msg').slideUp();
}, 5000);
}
}
});
return false;
});
HTML:
<form method="post" action="form.php">
<div class="error_msg"></div>
<div class="success_msg"></div>
<label for="name">Name?</label>
<input type="text" value="" name="name" />
<label for="email">Email?</label>
<input type="text" value="" name="email" />
<input id="submit" type="submit" value="Submit" name="submit" />
</form>
答案 0 :(得分:5)
实际上我会以两种方式做到这一点:
FIRST:
$(function(){
function submitForm(){
$.ajax({
url:"a.php",
type:"post",
success:function(data){
alert(data);
},
complete:function(){
$('body, html').animate({scrollTop:$('form').offset().top}, 'slow');
}
});
}
$('#submit').click(function(){
submitForm();
});
});
这里我创建了一个函数submitForm(),然后单击我提交的输入类型按钮。
或使用提交按钮的更好方式:
第二:(我喜欢这个方式)
$(function(){
$('form').submit(function(e){
e.preventDefault();
$.ajax({
url:"a.php",
type:"post",
success:function(data){
alert(data);
},
complete:function(){
$('body, html').animate({scrollTop:$('form').offset().top}, 'slow');
}
});
});
});