I have a form which automatically refreshes the page on submit, I have tried adding:
onSubmit="return false;"
to the form element, but then the form just stops and nothing happens when you click submit.
I wouldnt mind the page refresh so much but the form is at the bottom of the page and the refresh kicks you back to the top. So I tried this approach:
<form name='test' method='POST' action="index.php" onSubmit="window.scrollTo(5000,500);">
This works for a split second but then something else overrides it (not sure what)
I have also tried using php: header.location
just to get a "headers have already been sent" error.
The site in question can be seen here, and the form is at the very bottom.
The only two jquery libraries I am using that I could foresee any conflicts with are nicescroll and (more likely) waypoints, but i dug through them both and couldn't find any conflicting issues.
If anyone knows of a way to keep the functionality of the form but stop the refresh of the page, that would be wonderful Thanks
EDIT: After reading the answers below, it looks like I will have to use ajax to acomplish this, I have absolutely no experience with ajax, so I will see how that goes.
It seems you need to go through of way of AJAX submission in that case. In that case, you can use jQuery $.ajax()
method to do that. A sample below:
HTML
<form name='test' method='POST' action="index.php">
jQuery
$('form[name=test]').submit(function(e) {
e.preventDefault();
window.scrollTo(5000,500);
// a sample AJAX request
$.ajax({
url : this.action,
type : this.method,
data : $(this).serialize(),
success : function(response) {
}
});
});
Here, .preventDefault()
is for stop page refresh on form submit.
What about using AJAX instead of a normal form submit?
Why not submit the form to a hidden IFRAME?
<iframe name="myiframe" style="display: none;"></iframe>
<form name='test' method='POST' action="index.php" target="myiframe">
...
</form>