Understanding the basics of JavaScript forms_javascript tips

HTMLFormElement inherits HTMLElement, and its unique properties and methods are:

• acceptCharset: The character set that the server can handle, equivalent to the accept-charset feature of HTML
• action: The URL to receive the request, which is equivalent to the action feature in HTML.
• elements: a collection of all controls in the form (HTMLCollection)
• enctype: requested encoding type
• length: the number of controls in the form
• method: The type of HTTP request to be sent, usually get or post
• name: the name of the form
• reset(): Resets all form fields to default values ​​
• submit(): Submit the form
• target: window name used to send requests and receive responses;
  

Obtaining the reference of the form element can be getElementById, or it can be the numerical index or name value in document.forms;

1. Submit the form

There are three types of buttons for submitting forms:

<input type="submit" value="Submit Form">
<button type="submint">Submit Form</button>
<input type="image" src="">

Submitting the form in the above method will trigger the submit event before the browser request is sent to the server, so that the form data can be verified and whether to allow submission of the form. For example, the following code can prevent the submission of the form:

var form = document.getElementById("myForm");
form.addEventListener("submit", function () {
  event.preventDefault();
});

In addition, you can also submit the form by calling the submit() method through a js script. Calling submit() to submit the form will not trigger the submit event.

var form = document.getElementById("myForm");
form.submit();

If there is no response for a long time after submitting the form for the first time, users will become impatient and often click the submit button multiple times, resulting in repeated submission of the form. Therefore, the submit button should be disabled or use onsubmit after submitting the form for the first time. The event prevents subsequent operations.

var submitBtn = document.getElementById("submitBtn");
submitBtn.onclick = function () {
  //处理表格和提交等等
  submitBtn.disabled = true;
};

2. Reset form

Reset form should use input or button:

<input type="reset" value = "Reset Form">
<button type="reset">Reset Form</button>

When the user clicks the reset button to reset the form, the reset event will be triggered, and the reset operation can be canceled when necessary: ​​

var resetBtn = document.getElementById("resetBtn");
resetBtn.addEventListener("reset", function () {
  event.preventDefault();
});

In addition, you can also reset the form by calling the reset() method through a js script. When the reset() method is called to reset the form, the reset event will be triggered.

var form = document.getElementById("myForm");
form.reset();

3. Form fields

Each form has an elements attribute, which is a collection of all forms (fields) in the form:

var form = document.forms["myForm"];
var list = [];
//取得表单中第一个字段
var firstName = form.elements[0];
list.push(firstName.name);
//取得表单中名为lastName的字段
var lastName = form.elements["lastName"];
list.push(lastName.name);
// 取得表单中包含的字段的数量
var fieldCount = form.elements.length;
list.push(fieldCount);
console.log(list.toString()); //firstName,lastName,4

If multiple form controls use one name (radio button), a NodeList named after that name will be returned:

<form id="myForm" name="myForm">
  <ul>
    <li><input type="radio" name="color" value="red">red</li>
    <li><input type="radio" name="color" value="yellow">yellow</li>
    <li><input type="radio" name="color" value="blue">blue</li>
  </ul>
  <button type="submint">Submit Form</button>
  <button type="reset">Reset Form</button>
</form>

names are all color. When accessing elements["color"], NodeList is returned:

var list = [];
var form = document.forms["myForm"];
var radios = form.elements["color"];
console.log(radios.length) //3

Common form field attributes

• disabled: Boolean value, indicating whether the current field is disabled;
• form: pointer to the form to which the current field belongs: read-only;
• name: the name of the current field;
• readOnly: Boolean value, indicating whether the current field is read-only;
• tabIndex: indicates the switching (tab) number of the current field;
• type: the type of the current field;
• value: The value of the current field submitted to the server. For file fields, this attribute is read-only and contains the path of the file on the computer;
  

The submit button can be disabled after submitting the form through the submit event, but the onclick event cannot be used because there is a "time difference" in onclick in different browsers;

Shared form field methods

• focus(): activates the field so that it can respond to keyboard events;
• blur(): loses focus and triggers; rarely used;
  

You can add the focus() method on the load event of the listening page:

window.addEventListener("load", function () {
  document.forms["myForm"].elements["lastName"].focus();
});

需要注意，第一个表单字段是input，如果其type特性为“hidden”，或者css属性的display和visibility属性隐藏了该字段，就会导致错误。

在HTML5中，表单中新增加了autofocus属性，自动把焦点移动到相应字段。

autofocus
如：

<input type="text" name="lastName" autofocus>

或者检测是否设置了该属性，没有的话再调用focus()方法：

window.addEventListener("load", function () {
  var form = document.forms["myForm"];
  if (form["lastName"].autofocus !== true) {
    form["lastName"].focus();
  };
});

共有的表单字段事件

除了支持鼠标键盘更改和HTML事件之外，所有的表单字段都支持下列3个事件：

blur： 当前字段失去焦点时触发；
change：input元素和textarea元素，在它们失去焦点且value值改变时触发；select元素在其选项改变时触发（不失去焦点也会触发）；
focus：当前字段获得焦点时触发；
如：

var form = document.forms["myForm"];
var firstName = form.elements["firstName"];

firstName.addEventListener("focus", handler);
firstName.addEventListener("blur", handler);
firstName.addEventListener("change", handler);

function handler() {
  switch (event.type) {
    case "focus":
      if (firstName.style.backgroundColor !== "red") {
        firstName.style.backgroundColor = "yellow";

      };
      break;
    case "blur":
      if (event.target.value.length < 1) {
        firstName.style.backgroundColor = "red";
      } else {
        firstName.style.backgroundColor = "";
      };
      break;
    case "change":
      if (event.target.value.length < 1) {
        firstName.style.backgroundColor = "red";
      } else {
        firstName.style.backgroundColor = "";
      };
      break;
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助。