Home > Developer > JavaScript
The following describes how to use JavaScript to perform simple basic operations on the form:
Obtain the reference of a form.
You must obtain the reference of the form <form> before programming the form. You can use the following methods to complete this operation.
1) Use the getelementbyid () method of locating elements in the typical DOM tree. You only need to input the Form ID to obtain the reference of the form:
VaR vform = Document. getelementbyid ("form1 ");
2) You can also use the forms set of document and reference it through the position of the form in the form set or the name feature of the form:
VaR oform = Document. Forms [0];
VaR oform = Document. Forms ["formz"];
Access form field
Each form field, whether it is a button, text box or other content, is included in the elements set of the form. you can use their name feature or their location in the set to access different fields:
VaR ofirstfield = oform. elements [0];
VaR otextbox1 = oform. elements ["textbox1"];
In addition, you can directly access fields by name, such:
VaR otextbox1 = oform. textbox1;
If the name is marked, you can mark it with square brackets:
VaR otextbox1 = oform ["text box 1"];
Get and set text domain content
Example: Sum
Function getsum (){
// Obtain the form object
VaR theform = Document. Forms ["myform2"];
// Calculate and assign a value to 3rd text boxes
Theform. elements ["sum"]. value = eval (theform. elements ["X"]. Value) + eval (theform. elements ["Y"]. value );
}
+=
The most common method to access form fields
Document. getelementbyid () is the simplest and most commonly used method for accessing form elements. For example:
<Input type = "text" name = "count"
Value = ""/>
The code for retrieving the content of this element in JS is:
VaR name = Document. getelementbyid ("name"). Value
This method can be used regardless of whether the form element is in that form or even not. In general, it is the first choice for us to access the form element with Js.
Since document. getelementbyid is relatively long, you can replace it with the following function:
Function $ (ID ){
Return document. getelementbyid (ID );
}
Put this function in a common JS library and reference it on the JSP page using the following method:
<Head>
<Title> "Add Resource" page </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<SCRIPT src = "Web/JS/check. js" type = "text/JavaScript"> </SCRIPT>
<LINK rel = "stylesheet" REV = "stylesheet" href = "Web/CSS/style.css"
Type = "text/CSS"/>
</Head>
Then you can directly use $ to access the content in the form element:
VaR name = $ ("name"). value;
Get the form value and pay the value to the array
VaR list = Document. getelementsbytagname ("input ");
VaR strdata = "";
// Traverse all input in the form
For (VAR I = 0; I <list. Length & list [I]; I ++)
{
// Determine whether it is a text box
If (list [I]. type = "text ")
{
Strdata + = list [I]. value;
Alert (strdata );
}
}
Commonalities of form fields
Below are all form fields (except hidden fields)
Disabled can be used to obtain or set whether the form control is disabled.
The form feature is used to point to the form where the field is located.
The Blur () method causes the form field to lose focus.
The focus () method enables the form field to get the focus.
When the field loses focus, a blur event occurs and the onblur event handler is executed.
When the field obtains the focus, the focus event occurs and the onfocus event processing function is executed.
Focus on the first field when loading the page
Write this in the body code:
<Body onload = "focusonfirstelm ()">
JS functions are written as follows:
Fucntion focusonfirstelm (){
Document. Forms [0]. elements [0]. Focus ();
}
If the first field is not a hidden field, this method is useful. If so, change the subscript of elements to the subscript of a non-hidden field.
The control form is submitted only once.
Due to Web response problems, users may click the submit button multiple times to create duplicate data or cause errors. We can use js to set the submit button so that the form can be submitted only once.
<Input type = "Submit" value = "Submit" onclick = "This. Disabled = true; this. Form. Submit ()"/>
Here, when you click the submit button, two JavaScript codes are executed, one of which is this. disabled = true; this is used to disable the submit button; one is this. form. submit () is the form where the button is submitted.
Check users' buttons in the form Element
Add the onkeydown event processing for the control, and then view the keycode in the function to know the user's buttons. The Code is as follows:
<Input type = "text" name = "test"
Value = "" onkeydown = "testkey (this, event)"/>
The JS Code is as follows:
Function testkey (OBJ, event ){
Alert (event. keycode );
}
This technique is often used to improve user experience, such as submitting forms by pressing the Enter key.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
