contact form on one page site jumps to top on submit

You need to cancel the default action of the button.

If you're using jQuery, and the button had an ID, you should be able to use jQuery to target the button, then code it to "return false".

But it does still need to send the form.

I haven't tested that, but I believe that is the way to do it. Randy correct me if I'm wrong.

Hi Ric , I am using php - as per "ENHANCING A SIMPLE PHP APPLICATION"

I understand. You can still use jQuery along with php.

$('form').submit(function() {
 return false;
});

something like the above? but then it stops the from from submitting...hmmmm

And that is where I get stuck as well. By no means am I a guru, especially with JS or PHP. So perhaps I'm going about it the wrong way. How do we get it to submit the form without reloading the page? That is what is causing it to jump to the top of the page.

In the Shirts4Mike php course, Randy has the contact.php and the form submits to the same page because he has the form validation on the same page in the code.

Therefore perhaps you could put your contact validation and mailer on the same page as your one page site and then use an if statement to add a success message after the form?

I hope someone with more knowledge will be able to help you out!

<form method="post" action="index.php#contact" id="contactform">

The above worked - no more scrolling to top of page and error messages appeared nicely above the form.

But when all was valid and then hit Submit - Form disappeared lol !!!

I'll try again ...

you can try:

$('id of the button').on({ click: function(e) { e.PreventDefault(); } });

and for the php form you can use: $_SERVER["PHP_SELF"]

When the form has all areas completed and I submit

• the form disappears-

When I refresh is reappears.

oh my bigger problems

I think for this you don't actually want to submit the form and navigate away from the page. For something like this, you would want to use JavaScript to submit the form information behind the scenes with an Ajax request so that it could leave the user on the same page. This is pretty complicated, though, because you'd have to write a PHP web service that could receive such an Ajax request and then handle all the processing on the server.

I'm hoping to cover something like this (building a simple PHP web service) in my next project.

This is pretty complicated

Yep, I concur however if you are feeling adventurous ...

Check out this tutorial http://www.elated.com/articles/slick-ajax-contact-form-jquery-php/

@Randy. I have taken dumped my form on my site. Never realized it was that complicated :(

@James. Do you think if I really really really followed the tutorial it would work???