Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > JavaScript form processing implementation code_basic knowledge

JavaScript form processing implementation code_basic knowledge

WBOY
Release： 2016-05-16 16:04:26
Original
1235 people have browsed it

One form introduction

In HTML, the form is represented by the

element, while in JavaScript, the form corresponds to the HTMLFormElement type;

//HTMLFormElement inherits HTMLElement; therefore it has the default attributes of HTML elements, and also has its own attributes and methods;
HTMLFormElement properties and methods
Attribute or method description
acceptCharset The character set that the server can handle;
action accepts the requested URL;
elements A collection of all controls in the form;
enctype requested encoding type;
length The number of controls in the form;
method The type of HTTP request to send, usually 'get' or 'post';
name The name of the form;
target window name used to send requests and receive responses;
reset() resets all forms;
submit() submit the form;

1. Get the form object;
document.getElementById('myForm'); // Use ID to get the element;
document.getElementsByTagName('form')[0]; // Use to get the first element in the form element collection;
document.forms[0]; // Use the numeric subscript of forms to get the element;
document.forms['myForm']; // Use the form's name subscript to get the element;

2. Submit the form

(1). Through the event object, you can prevent the default behavior of submit. The default behavior of the submit event is to jump to the specified page with data;

Copy code The code is as follows:

​ addEvent(fm,'submit',function(evt){
          preDef(evt);
});

(2). We can use the submit() method to customize the triggering of the submit event; that is, it is not necessary to click the submit button to submit;

Copy code The code is as follows:

If(e.ctrlKey && e.keyCode ==13){
                                                                                                                                                                                              }
// PS: Try to avoid using names such as name="submit" or id="submit" in the form. This will conflict with the submit() method and result in failure to submit;

(3). Repeat submission

// When a piece of data is submitted to the server, there will be a delay and no reflection for a long time, causing the user to keep clicking submit,
// As a result, many same requests are submitted repeatedly, or errors are caused or multiple pieces of the same information are written to the database;

Copy code The code is as follows:
AddEvent(fm,'submit',function(evt){ // Simulate server delay;
          preDef(evt);
Settimeout (function () {// 3 seconds before processing submitted to the server;
                                 fm.submit();
},3000);
});
// Solve duplicate submission plan

// The first type: disable the click button immediately after submission;
Document.getElementById('sub').disabled = true; // Disable the button;
// Second type: After submission, cancel subsequent form submission operations;
var flag = false; var flag = false; //Set a listening variable;
if(flag == true)return; // If it exists, return the exit event;
flag = true; // Otherwise, it must be the first time, change the value of the listening variable;

3. Reset form 

// 用户点击重置按钮时,表单会被初始化;
// 虽然这个按钮还得以保留,但目前Web已经很少去使用了;因为用户填好信息后,不小心点击了重置就会全部清空,用户体验极差;
// 有两种方法调用reset事件:第一个就是直接type="reset"即可;第二个就是使用fm.reset()方法调用;
  <input type="reset" value="重置" />          // 不需要JS代码即可实现;
  addEvent(document,'click',function(){
    fm.reset();                   // 使用JS方法实现重置;
  });
Copy after login

4.表单字段

// 表单处理中,建议使用HTMLDOM,它有自己的elements属性,该属性是表单中所有元素的集合;
fm.elements[0]; // 获取第一个表单字段元素;
fm.elements['user']; // 获取name值是user的表单字段元素;
fm.elements.length; // 获取所有表单字段的数量;

(1).共有的表单字段属性
// 除了

元素之外,所有表单字段都拥有相同的一组属性;
属性 说明
disabled 布尔值,表示当前字段是否被禁用;
form 指向当前字段所属表单的指针,只读;
name 当前字段的名称;
readOnly 布尔值,表示当前字段是否只读;
tabIndex 表示当前字段的切换;
type 当前字段的类型;
value 当前字段的值;
fm.elements[0].value; // 获取和设置value;
fm.elements[0].disabled = true; // 禁用当前字段;

(2).共有的表单字段方法
方法 说明
focus() 将焦点定位到表单字段里;
blur() 从元素中将焦点移走;

(3).共有的表单字段事件


事件名 说明
blur 当字段失去焦点时触发;
change 对于和