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

Source: Internet
Author: User
Tags first row

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.