The following editor will bring you a JavaScript-based form script (detailed explanation). The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor and take a look.
What is a form?
A form has three basic components: Form tag: This contains the URL of the CGI program used to process the form data and the method for submitting the data to the server. Form fields: include text boxes, password boxes, hidden fields, multi-line text boxes, check boxes, radio button boxes, drop-down selection boxes and file upload boxes, etc. Form buttons: include submit buttons, reset buttons and general buttons; used to transfer data to CGI scripts on the server or cancel input. Form buttons can also be used to control other processing tasks with defined processing scripts.
The relationship between JavaScript and forms: The initial application of JS was to share the responsibility of the server for processing forms and break the dependence on the server. Although the web and JavaScript have made great progress, web forms still have not been used for this purpose. Many developers provide ready-made solutions for many common tasks, and many developers use JavaScript not only when validating forms, but also to enhance the default behavior of some standard form controls.
1. Basic knowledge of forms
In HTML, the form consists of the form tag. In JavaScript, the form corresponds to the HTMLFormElement type, HTMLFormElement type Inheriting the HTMLElement type, it has the same default attributes as other Element elements, and it also has its own attributes and methods:
acceptCharset: the character set that the server can handle; equivalent to accept-charset in HTML characteristic.
action: Accepts the requested URL; equivalent to the action attribute in HTML.
elements: A collection of all controls in the form (HTMLCollection).
enctype: Requested encoding type; equivalent to the enctype attribute in HTML.
length: The number of controls in the form.
method: The type of HTTP request to be sent, usually "get" or "post"; equivalent to the method attribute of HTML.
name: The name of the form; equivalent to the name attribute of HTML.
reset(): Resets all form fields to default values.
submit(): Submit the form.
target: The name of the window used to send requests and receive responses; equivalent to the target attribute of HTML.
The methods to obtain form form elements are: var form=document.getElementById('form1'); //Get form elements through id
var firstForm=document.forms[0] ; //Get all the form elements in the page through document.forms, and get the first form element through the index value '0'
var form2=document.forms['form2']; //Pass document.forms to get all the form elements in the page, and get the specific form element through the name value
Submit the form:
<!-- 通用提交按钮 --> <input type="submit" value="Submit Form"> <!-- 自定义提交按钮 --> <button type="submit">Submit Form</button> <!-- 图像按钮 --> <input type="image" src="graphic.gif">
Submit in this way form, the browser fires the submit event before sending the request to the server. This gives us the opportunity to validate the form data and use it to decide whether to allow the form submission. Blocking the default behavior of this event can cancel the form submission
In JS we can also programmatically call the submit() method to submit the form:
var form = document.getElementById("myForm");
//提交表单
form.submit();Prevent form submission (prevent default event):
var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止默认事件
EventUtil.preventDefault(event);
});This technique can be used when the form data is invalid and cannot be sent to the server
Re- Reset form:
<!-- 通用重置按钮 --> <input type="reset" value="Reset Form"> <!-- 自定义重置按钮 --> <button type="reset">Reset Form</button>
When resetting the form, all form fields will be restored to their initial values when the page is just loaded
Use JS method to reset Reset the form:
var form = document.getElementById("myForm");
//重置表单
form.reset();Prevent the default action of resetting the form:
var form = document.getElementById("myForm");
EventUtil.addHandler(form, "reset", function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止表单重置
EventUtil.preventDefault(event);
});Form fields:
Each form has an Element property, which is a collection of all form elements (fields) in the form. This collection is an ordered list. The order in which each form field appears in the element collection is the same as the order in which it appears in the tag. They can be accessed by position and name value. Common form fields include input, select, and fieldset. To obtain the form fields in the form:
var form = document.getElementById("form1");
//取得表单中的第一个字段
var field1 = form.elements[0];
//取得名为"textbox1"的字段
var field2 = form.elements["textbox1"];
//取得表单中包含的字段的数量
var fieldCount = form.elements.length;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) sequence number of the current field.
type: The type of the current field, such as "checkbox", "radio", etc.
value: The value of the current field that will be submitted to the server. For file fields, this attribute is read-only and contains the path of the file on the computer.
Except the form attribute, any other attribute can be dynamically modified through JavaScript.
Being able to dynamically modify form field attributes means that we can dynamically operate the form at any time and in any way.
用户可能会重复单击表单的提交按钮。在涉及信用卡消费时，这就是个问题：因为会导致费用翻番。
为此，最常见的解决方案，就是在第一次单击后就禁用提交按钮。只要侦听 submit 事件，并在该事件发生时禁用提交按钮即可 ：
//避免多次提交表单
EventUtil.addHandler(form, "submit", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//取得提交按钮
var btn = target.elements["submit-btn"];
//禁用它
btn.disabled = true;
});除了