- Jquery Ajax Form provides the facility to submit a form Asynchronously.
- This plugin is really helpful form Asynchronous file upload.However in this post I am showing only normal field submit.
- You can find more about this plugin from the below link:-
http://malsup.com/jquery/form/
- In this Demo “We will create a form and style them in bootstrap and initialize them with Jquery Ajax form plugin”.
- The directory structure for this demo is as below:-
- In this Demo We are submitting the form field to same page(just for demo purpose).You can use URL property in ajax form or providing the URL in ACTION attribute in Form DOM element.
- We have create a form element having 3 input fields (name, subject, roll) and a submit button.The HTML markup used is as below. The HTML Markup as below,
<!DOCTYPE html>
<html>
<head>
<title>Jquery AjaxForm With Bootstrap Style</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/my-style.css">
</head>
<body>
<form id="my-detail-form">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Ajax Form With Bootstrap</h3>
</div>
<div class="panel-body">
<div class="alert alert-warning my-message-error">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-success my-message-success">
<a href="#" class="alert-link">...</a>
</div>
<input name='name' type="text" class='form-control' placeholder="Enter Your Name">
<input name='subject' type="text" class='form-control' placeholder="Enter Your Subject">
<input name='roll' type="text" class='form-control' placeholder="Enter Your Roll Number">
</div>
<div class="panel-footer">
<button type="submit" class="btn btn-info">SUBMIT</button>
</div>
</div>
</form>
<script src="lib/jquery-1.10.1.min.js"></script>
<script src="lib/jquery.form.min.js"></script>
<script src="my-form-script.js"></script>
</body>
</html>
- The below script shows the initialization of Form element with Ajax form.It has beforeSubmit handler which does the validation of required field.If the required field is missing then it displays the error message in the top.It has success handler to indicate the form is submitted successfully and response is arrived.
/**
* Created by saan on 10/6/13.
*/
var TS_AJAX_FORM ={
/*ERROR Message Display Element Reference*/
MY_MESSAGE_ERR : $(".my-message-error"),
/*SUCCESS Message Display Element Reference*/
MY_MESSAGE_SUC : $(".my-message-success"),
/*Shows the input message and hides it in 5 seconds*/
showMessage:function(msg, type){
var message = (type === 'ERR')? this.MY_MESSAGE_ERR : this.MY_MESSAGE_SUC,
txt = $(message).find('a');
$(txt).html(msg);
message.fadeIn('fast',function(){
message.fadeOut(5000);
})
},
/*
*Handler: success, Once the form is submitted and response
*arrives, it will be activated.
*/
successHandler: function(responseText, statusText, xhr, form){
TS_AJAX_FORM.showMessage("Form Submitted Status("+statusText+").", "SUC");
},
/*
*responseText, statusText, xhr, $form: beforeSubmit, for validation Let, title and roll is your required field.
*Let's show an error message if these fields are blank.
*/
beforeSubmitHandler:function(arr, form, options){
var isValid = true;
$.each(arr,function(index, aField){
if('name' === aField.name && aField.value === ""){
TS_AJAX_FORM.showMessage("Name Can not be Empty.", "ERR");
isValid = false;
}else if('roll' === aField.name && aField.value === ""){
TS_AJAX_FORM.showMessage("Roll Can not be Empty.", "ERR");
isValid = false;
}
});
return isValid;
},
/*Initializing Ajax Form*/
initMyAjaxForm:function(){
$("#my-detail-form").ajaxForm({
beforeSubmit:this.beforeSubmitHandler,
success:this.successHandler,
clearForm:true
});
}
};
/*My Small Tutorial: Execution point*/
$(document).ready(function(){
TS_AJAX_FORM.initMyAjaxForm()
});
- The initial form will look like below on page loaded,
- The blow screenshot shows the error message when we submitted the field without entering the roll input field.This is done using beforeSubmit handler and returning a false when roll or name is empty.
- The below screen shows the success message when the form is submitted and response arrived.If you set ‘clearForm‘ or ‘resetForm‘ to true then after successful submission all the form fields will be cleared.
- Demo code Download Link :-
