» » Ajax form submission plugin - jquery form

 

Ajax form submission plugin - jquery form

Author: bamboo06 on 10-11-2014, 04:31, views: 2883

2
jQuery Form plug-in is an excellent Ajax form plugin, we can very easily use it to value processing form controls, clear and reset form controls, attachment uploads, and the completion of Ajax form submission. jQuery Form has two core methods ajaxForm () and ajaxSubmit (), in this article we focus on ajaxSubmit () applications.

HTML
First, we load jquery library and jquery.form.js plugins. Then we go to the HTML part.
jquery.form.js plugin official website address: http: //www.malsup.com/jquery/form/
   <div class="demo">
   		<form id="my_form" action="submit.php" method="post"> 
    		<p>Name: <input type="text" name="uname" id="uname" class="input"></p>
            <p>Sex: <input type="radio" name="sex" value="1" checked> Man <input type="radio" name="sex" value="2"> Female </p>
            <p>Age: <input type="text" name="age" id="age" class="input" style="width:50px"></p>
            <p style="margin-left:30px"><input type="submit" class="btn" value="Submit"><span id="msg"></span></p>
		</form>
		<div id="output"></div>
   </div>

Script should be refered:
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.form.min.js"></script> 

Form, asks for name, gender and age, and then submitted to the submit.php treatment, under normal circumstances, and click "submit" button, the page will go submit.php process form data, and we use jquery.form plug-in, page does not jump directly completed an ajax interaction.
jQuery
We are very convenient to call jquery.form plugin using ajaxSubmit () makes the whole form ajax submission process becomes very simple.
$(function(){
	var options = { 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse,  // post-submit callback
		resetForm: true, 
		dataType:  'json' 
    }; 
 
    // bind to the form's submit event 
    $('#my_form').submit(function() { 
        $(this).ajaxSubmit(options); 
        return false; 
    }); 
});
// pre-submit callback 
function showRequest(formData, jqForm, options) { 
	var uname = $("#uname").val();
	if(uname==""){
		$("#msg").html("Name can't be empty!");
		return false;
	}
	
	var age = $("#age").val();
	if(age==""){
		$("#msg").html("Age can't be empty!");
		return false;
	}
	$("#msg").html("Submiting...");    
    return true; 
} 
 
// post-submit callback 
function showResponse(responseText, statusText)  { 
	$("#msg").html('Successful submit.');
	var sex = responseText.sex==1?"Man":"Female";
	$("#output").html("Name: "+responseText.uname+"&nbsp;Sex: "+sex+"&nbsp;Age: "+responseText.age);
}

The code above before submitting completed forms submitted after verification and processing. After the form data submitted to submit.php, we can according to the actual situation by submit.php test data, the data is written to the database, return to the operating result, and so the operation, this is no longer listed in the code. You can see the demo example.
jquery.form plug-in also provides formToArray (), formSerialize (), fieldSerialize (), fieldValue (), clearForm (), clearFields () and resetForm () and other methods. Usually we can use forms authentication plug-ins and jquery.form used together, it will be better.

Tags: ajax, jquery, form

Category: PHP Scripts / Plugins

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 0 Comments
  • 0 Articles
2 August 2017 22:29

Beverly Marshall

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
I didn't even know how to load jquery library and jquery.form.js plugins before. The guys at www.pay4essayonline.com gave me an introduction to javascript and I've been helped plenty. Java's becoming more and more important every passing day.

<
  • 0 Comments
  • 0 Articles
9 February 2018 01:35

Becky Ray

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
All these commands are so helpful for the C language learners. I am going to provide it's tutorial on my essayontime.com review. I hope C language learners would find it helpful.

Information
Comment on the news site is possible only within (days) days from the date of publication.