Possible Duplicate:
Scroll to top after Ajax content load
I have an ajax form which when submitted shows error or success messages, ideally I'd like to scroll the browser to the top of the form so the user can see these messages, however when I implement this it doesn't seem to work properly and I've no idea how to fix it :-/ it either doesn't scroll high enough or it refreshes? :( I'm at a loss, if you could guide me that would be great :)
$('#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>
Actually i would do it in two ways:
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();
});
});
Here i have created a function submitForm() and click of the input type button i am submitting it.
or a better way with a submit button:
SECOND: (I LIKE THIS WAY)
$(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');
}
});
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With