'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 |