Submitting AJAX Forms with JQuery
<form class="js-mailer">
<div class="form-group">
<label class="control-label" for="exampleInputEmail">Email address</label>
<input type="text" name="email" class="form-control" id="exampleInputEmail" placeholder="Email">
</div>
<div class="form-group">
<label class="control-label" for="exampleInputName">Name</label>
<input type="text" name="name" class="form-control" id="exampleInputName" placeholder="Name">
</div>
<button type="submit" class="btn btn-default js-mailer-progress">Submit</button>
</form>
If you need validation, add the "validate" attribute with the value of the validation type ("text" | "email" | "recaptcha") in the form field. When the field does not pass validation, the parent element is assigned the class "has-error". In this example, the parent div element with the class "form-group"
<input validate="email" type="text" name="email" class="form-control" id="exampleInputEmail" placeholder="Email">
<input validate="text" type="text" name="name" class="form-control" id="exampleInputName" placeholder="Name">
<textarea validate="text" class="form-control" rows="3" name="message" id="exampleInputMsg" placeholder="Message"></textarea>
<div validate="recaptcha" class="js-mailer-recaptcha"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/path/to/jquery.mailer.min.js"></script>
<script>
$(function() {
$('.js-mailer').mailer({
// Options will go here
});
});
</script>
A string containing the URL to which the request is sent.
default: "/"
options: string (URL)
The HTTP method to use for the request.
default: "POST"
options: "POST", "GET", "PUT"
The type of data that you're expecting back from the server. If none is specified, jQuery will try to infer it based on the MIME type of the response
default: "json"
options: "xml", "html", "script", "json", "jsonp"
The plugin looks for an element with the class "js-mailer-progress", remembers the current value of the element and inserts the values of option "sendingStr". After the completion of the progress, the old content of the element is returned
default: "Sending..."
options: string (text / html)
Google reCAPTCHA V2 site key (data-sitekey). To use captcha, you need to register with google https://www.google.com/recaptcha/intro/invisible.html . To output the captcha, insert the "div" element with the class "js-mailer-recaptcha" and the "validate" attribute with the value "recaptcha" inside the form. Server Side Integration: https://developers.google.com/recaptcha/docs/verify
default: false
options: string (data-sitekey)
A function to be called if the request succeeds
default: function(){}
options: function(jQueryForm, data){ // your code here }
arguments:
jQueryForm: Current form wrapped in jQuery
data: The data returned from the server, formatted according to the "dataType" parameter
A function to be called if the request fails
default: function(){}
options: function(jQueryForm){ // your code here }
arguments:
jQueryForm: Current form wrapped in jQuery