'Return "success" message after form submit

I am trying to return a "Thank you" message after a successful jquery email validation and form submission. I want to show the "Thank you" message and prevent the page from redirecting to the action url but still process the data server side. While researching I think a Jquery callback sounds about right but need some more direction as the examples I found were a bit all over the place. Can anyone provide some input?

$("#emailsignup_form").validate();
});

$('#submitemail').click(function() {
    app.ajax.load({
         reqName : 'emailSubmit',
         url: "$httpUrl('Bronto-OptIn')$?email=" + $('#email').val(), 
         selector : '#emailbox',
         callback: function(responseText, textStatus) { }
return false;
    }
});

<form id="emailsignup_form" method="post" action="$httpUrl('Bronto-OptIn', 'fid', 'information')$">
<input id="cemail" name="email" size="25"  class="required email" />
<input class="submit" id="submitemail" type="submit" value="Submit"/>
</form>
<div id="emailbox"></div>


Solution 1:[1]

Assuming that you add a div to show the result of your post

<form id="emailsignup_form" method="post" action="">
    <input id="cemail" name="email" size="25"  class="required email" />
    <input class="submit" id="submitemail" type="submit" value="Submit"/>
</form>
<div id="postresult">
</div>

You can post your data with $.post() like this

$(function(){
    $("form#emailsignup_form").submit(function(e){
        e.preventDefault();
        $.post(
            "processdata.php", 
            $(this).serialize(), 
            function(data){
                //Your code to process returned data goes here
                $("#postresult").text("Thank you!");
            }
        );
    });        
});

Solution 2:[2]

I was able to achieve returning a success message by modifying my above code to:

$('#emailsignup_form').validate({
    rules: {
        email: {
            required: true,
            email: true
        }
    },
    messages: {
        email: {
            required: "this is required",
            email: "this must be a valid email"
        }
    },
    submitHandler: function (form) {
        app.ajax.load({
        reqName : 'emailSubmit',
        url: "$httpUrl('Bronto-OptIn')$?email=" + $('#email').val(), 
        selector : '#emailbox',
        callback: function(responseText, textStatus) {  }
        });
        return false;
    }
});
});

<div id="emailbox">
<form id="emailsignup_form" name="emailsignup_form" method="post" action="">
<input type="text" name="email" id="email" />
<input type="submit" name="submitemail" id="submitemail" value="Submit" />
</form>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 peterm
Solution 2 Jgunzblazin