如何在表单提交上停止页面刷新

Question

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.

Answer 1

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.