10 practical jQuery form operation code snippets

JQuery is definitely a great open-source JavaScript class library and a powerful tool to help us develop front-end applications quickly and efficiently. We may often process JavaScript related to forms in our daily development process. In today's code snippet sharing article, we have collected 10 extremely useful jQuery form processing codes, we hope to help you better and more quickly handle issues related to forms during development!

1. Disable the "Enter key" in the form" 

You may need to prevent users from submitting forms accidentally in form operations. The following code is very helpful:

Javascript code

1. $ ("# Form"). keypress (function (e ){
2. If (e. which = 13 ){
3. Return false;
4. }
5. });

Online debugging/Online demonstration

2. Clear all form data 

You may need to call clear methods of different types for different form forms. However, using the following method can save a lot of effort.

Javascript code

1. Function clearForm (form ){
2. // Iterate over all of the inputs for the form
3. // Element that was passed in
4. $ (': Input', form). each (function (){
5. Var type = this. type;
6. Var tag = this. tagName. toLowerCase (); // normalize case
7. // It's OK to reset the value attr of text inputs,
8. // Password inputs, and textareas
9. If (type = 'text' | type = 'Password' | tag = 'textea ')
10. This. value = "";
11. // Checkboxes and radios need to have their checked state cleared
12. // But shoshould * not * have their 'value' changed
13. Else if (type = 'checkbox' | type = 'Radio ')
14. This. checked = false;
15. // Select elements need to have their 'selectedindex 'property set to-1
16. // (This works for both single and multiple select elements)
17. Else if (tag = 'select ')
18. This. selectedIndex =-1;
19. });
20. };

Online debugging/Online demonstration

3. Disable the buttons in the form. 

The following code is very useful for ajax operations. You can effectively prevent users from submitting data multiple times, which is also frequently used by individuals:

Javascript code

1. // Disable the button:
2. $ ("# Somebutton"). attr ("disabled", true );
3. // Start button:
4. $ ("# Submit-button"). removeAttr ("disabled ");

Online debugging/Online demonstration

You may often use. attr ('Disabled ', false);, but this is an incorrect call.

4. Enter the content and enable the submit button. 

This code is similar to the above, and is used to help users control the form submission button. After using this code, the submit button can be started only after you enter the specified content.

Javascript code

1. $ ('# Username'). keyup (function (){
2. $ ('# Submit'). attr ('Disabled ',! $ ('# Username'). val ());
3. });

Online debugging/Online demonstration

5. Multiple forms cannot be submitted. 

Submitting forms multiple times is a headache for web applications. The following code can help you solve this problem:

Javascript code

1. $ (Document). ready (function (){
2. $ ('Form'). submit (function (){
3. If (typeof jQuery. data (this, "disabledOnSubmit") = 'undefined '){
4. JQuery. data (this, "disabledOnSubmit", {submited: true });
5. $ ('Input [type = submit], input [type = button] ', this). each (function (){
6. $ (This). attr ("disabled", "disabled ");
7. });
8. Return true;
9. }
10. Else
11. {
12. Return false;
13. }
14. });
15. });

Online debugging/Online demonstration

6. highlight the current highlighted input box 

Sometimes you need to prompt the user's current operation input box, you can use the following code to highlight the display:

Javascript code

1. $ ("Form: input"). focus (function (){
2. $ ("Label [for = '" + this. id + "']"). addClass ("labelfocus ");
3. }). Blur (function (){
4. $ ("Label"). removeClass ("labelfocus ");
5. });

Online debugging/Online demonstration

7. dynamically add form elements 

This method can help you dynamically add elements in a form, such as input:

Javascript code

1. // Change event on password1 field to prompt new input
2. $ ('# Password1'). change (function (){
3. // Dynamically create new input and insert after password1
4. $ ("# Password1"). append ("<input type = 'text' name = 'password2 'id = 'password2'/> ");
5. });

Online debugging/Online demonstration

8. automatically import data to selectbox 

The following code uses ajax data to automatically generate content in the selection box

Javascript code

1. $ (Function (){
2. $ ("Select # ctlJob"). change (function (){
3. $. GetJSON ("/select. php", {id: $ (this). val (), ajax: 'true'}, function (j ){
4. Var options = '';
5. For (var I = 0; I <j. length; I ++ ){
6. Options + = '<option value = "' + j [I]. optionValue + '">' + j [I]. optionDisplay + '</option> ';
7. }
8. $ ("Select # ctlPerson" pai.html (options );
9. })
10. })
11. })

Online debugging/Online demonstration

9. check whether a check box is selected. 

The Code is as follows:

Javascript code

1. $ ('# Checkbox'). attr ('checked ');

Online debugging/Online demonstration


10. Use code to submit the form 

The Code is as follows:

Javascript code

1. $ ("# Myform"). submit ();

Online debugging/Online demonstration

I hope this jQuery code will be helpful for your development. If you have similar code, please share it with us!