Prevent form redirect OR refresh on submit?

Question

Hey guys. I've searched through a bunch of pages, but can't find my problem, so I had to make a post.

I have a form that has a submit button, and when submitted I want it to NOT refresh OR redirect. I just want jQuery to perform a function.

Here's the form:

<form id="contactForm">
  <fieldset>
  <label for="Name">Name</label>
  <input id="contactName" type="text" />
  </fieldset>

  <fieldset>
  <label for="Email">Email</label>
  <input id="contactEmail" type="text" />
  </fieldset>

  <fieldset class="noHeight">
  <textarea id="contactMessage" cols="20"></textarea>
  <input id="contactSend" class="submit" type="submit" onclick="sendContactForm()" />
  </fieldset>

 </form>        
 <small id="messageSent">Your message has been sent.</small>

And here is the jQuery:

function sendContactForm(){
                $("#messageSent").slideDown("slow");
                setTimeout('$("#messageSent").slideUp();$("#contactForm").slideUp("slow")', 2000);
           }

I've tried with and without an action element on the form, but don't know what I'm doing wrong. What has annoyed me more is that I have an example that does it perfectly: Example Page

If you want to see my problem live, goto stormink.net (my site) and check out the sidebar where it says "Send me and email" and "RSS Subscription". Both are forms that I'm trying to get this to work on.

Thanks so much.

Answer 1

It looks like you're missing a return false.

Answer 2

Just handle the form submission on the submit event, and return false:

$('#contactForm').submit(function () {
 sendContactForm();
 return false;
});

You don't need any more the onclick event on the submit button:

<input class="submit" type="submit" value="Send" />

Answer 3

Here:

function submitClick(e)
{
     e.preventDefault();
     $("#messageSent").slideDown("slow");
     setTimeout('$("#messageSent").slideUp();
     $("#contactForm").slideUp("slow")', 2000);
}

$(document).ready(function() {
    $('#contactSend').click(submitClick(e));
});

Instead of using the onClick event, you'll use bind an 'click' event handler using jQuery to the submit button (or whatever button), which will take submitClick as a callback. We pass the event to the callback to call preventDefault, which is what will prevent the click from submitting the form.