jquery+php implementation Ajax form submission instance (recommended) (1/2)

The first step is to create a form HTML page

Here, we show only the main part of the HTML structure code for the form:
Copy code code as follows:

The code is as follows

Copy Code

<div id= "Contact_form" > <form name= "Contact" method= "POST" action= "" > <fieldset> <label for= "name" id= "Name_label" > Name </label> <input type= "text" name= "name" id= "name" size= "" value= "" class= "Text-input"/> " <label class= "error" for= "name" id= "Name_error" > This must be filled </label> <label for= "Email" id= "Email_label" > Your email</label> <input type= "text" name= "email" id= Email "size=" value= "" class= "Text-input"/> <label class= "error" for= "email" id= "Email_error" > This must be filled </label> <label for= "Phone" id= "Phone_label" > Your tel </label> <input type= "text" name= "phone" id= "Phone" size= "value=" "class=" Text-input "/>" <label class= "error" for= "Phone" id= "Phone_error" > This must be filled </label> <br/> <input type= "Submit" name= "Submit" class= "button" id= "submit_btn" value= "I want to send"/> </fieldset> </form> </div>

A few notes:

This contains the entire containing information with an ID of contact_form, which is meaningful and will be used later when JavaScript interacts with the user.
It should be noted that here the form tag's properties contain both method and action; This is not very meaningful, because JavaScript directly manipulate the DOM, so it is possible to have no these two attributes;
Be sure to add a separate ID to the <input> tag that the user entered, which is similar to the 2nd principle. Otherwise, you cannot see the normal effect.

Step two, start adding jquery code

Let's say you've downloaded the jquery Kikuyu from the jquery official website and uploaded it to your Web server and added it to the Web page you're using.

Now another new JS file, add the following code:
Copy code code as follows:

The code is as follows	Copy Code
$ (function () { $ (". Button"). Click (function () { Logic for handling form validation and handing back to the background }); });

The function () functions in the first row are the same as the Document.ready function of jquery, which is automatically triggered when the DOM is ready.
The second line contains a click Trigger function (), note that you need to place a class named "button" on the HTML page submission button to simulate the functionality of implementing the SUBMI submission form.
From the 2nd we can see that jquery can be a good separation of structure and logic.
Step three, write the validation code

Home 1 2 last page