How do I organize the default submission of forms? [Active for test], organization form submission

Source: Internet
Author: User

How do I organize the default submission of forms? [Active for test], organization form submission

In a recently developed project, my part has form verification. I clicked the submit button, but I didn't want him to jump to the page to submit. So after a variety of Baidu, various stackoverflow, and a variety of legs, the following solutions are available:

The key is to prevent the default submission behavior of form submit (). One method uses return false and the other is event. preventDefault (); both methods can be used, but they are different. You need to select one based on your actual situation. What is the difference? I will tell you after reading the article.

First, the code in html is as follows:

1 <! Doctype html> 2 

 

The code in js is as follows:

1 $ ('# myForm'). submit (function (event) {2 if (! $ ('# Name'). val () {3 alert ('name cannot be blank'); 4 event. preventDefault (); 5}; 6 })

When the table name value is blank, a prompt box is displayed to prevent the jump. Code Demo: http://plnkr.co/edit/CZ9TYOMKXheCvq7fMQ7f? P = preview

Of course, you can also use return false to block it. The Code is as follows:

1 $ ('# myForm'). submit (function (event) {2 if (! $ ('# Name'). val () {3 alert ('name cannot be blank'); 4 return false; 5}; 6 })

Code Demo: http://plnkr.co/edit/CZ9TYOMKXheCvq7fMQ7f? P = preview

 

If you are using an angularjs framework, you only need to add ng-controller, ng-app, and so on to this code.

 

Finally, return false and event. preventDedault (): If you want to do something else after blocking the form submission, use event. preventDefault (), such as adding a red border to the empty input to remind users, because the code after return false will not be executed. If you don't want to do anything, there is no difference between the two. You are willful!

Red border code:

1 $ ('# myForm'). submit (function (event) {2 if (! $ ('# Name '). val () {3 alert ('name cannot be blank '); 4 event. preventDefault (); 5 items ('your name'your .css ('border-color', 'red'); 6} 7 })

 

Ps: event. preventDefault (); what is it? Http://www.w3school.com.cn/jsref/event_preventdefault.asp

 

What are you looking ?! Comment and follow!

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.