JavaScript learning (2) form element_html/css_WEB-ITnose-HTML Tutorial-php.cn

JavaScript learning (2) form element_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:50:38

Original

898 people have browsed it

##JavaScript Learning-2

1. Forms and form elements

1.1 form object

Reference of form object: document.forms [0] Or reference the name attribute, such as: document.forms["formname"], or you can directly use document.formname to call the form object

1.2 form form attributes and elements

name, target , action, method, enctype
assignment change: document.forms[0].action or document.formName.action

To obtain the elements in the form, use form.elements[], as shown below to clear the text value Zero

var form=window.document.forms[0];for(var i=0;i<form.elements.length;i++){    if(form.elements[i].type=="text"){        form.elements.value="";    }}

Copy after login

1.3 Form control

Text box text, the most commonly used attribute of text is the value attribute, and the content of the value attribute is usually a string.

Button object button, mainly click processing event

Checkbox object checkbox, attribute is checked, Boolean type

Single selection Button object radio. When setting this object, it needs to be set to the same name. To obtain the number of radio button objects, you can use document.forms[0].groupName.length. To detect whether the highlight selection is made, use document.forms[0].groupName[ 0].checked

select object. The select object is an object that contains an array of option objects. The access method is as follows document.forms[0].selectName.selectedIndex to obtain the currently selected index. document.forms[0].selectName.options[n].text and document.forms[0].selectName.options[n].value, where the text attribute is the string displayed by the select object, you can use the onchange event handler, For example, we often drop down to select a website and then navigate directly.

<html><head><title></title><script type="text/javascript">function goThere () {    var list=document.forms[0].urlList;    location.href=list.options[list.selectedIndex].value;}</script></head><body><form name="radiolist">    <select name="urlList" onchange="goThere()">    <option selected value="http://www.baidu.com">baidu    <option value="http://www.qq.com">qq    </select></form></body></html>

Copy after login

1.4 Passing form data and elements to functions

javaScript provides a keyword this, which usually points to an object. This object contains scripts that use this keyword. Therefore, in a In the onchange event handler of the text field, you can use this as the keyword as the parameter of the function, such as

function upperMe(field){ //dosomething }

Each control has an attribute pointing to the contained table, so you can write this.form to get the form

<html><head><title>js_4</title><script type="text/javascript">function processData (formthis) {    for(var i=0;i<formthis.Beatles.length;i++){        if(formthis.Beatles[i].checked){            break;        }    }    var beatle=formthis.Beatles[i].value;    var song=formthis.song.value;    alert("chcecking whether "+song+" feature in " +""+beatle);}function varifySong(entry){    var song=entry.value;    alert("checking whether "+song+" is a beatles tunes");}</script></head><body><form onsubmit="return false"><p>choose your favoriate Beatle:<input type="radio" name="Beatles" value="Jhon" checked>John<input type="radio" name="Beatles" value="Markey">Markey</p><p> input your song name:<br><input type="text" name="song" value="song search" onchange="varifySong(this)"><input type="button" name="process " value="process requset..." onclick="processData(this.form)"></p></p></form></body></html>

Copy after login

This section The code has a rather special logic. After experiments, we can find that after inputting in the input box and clicking process request, we can see that the first trigger is the onchange event of the text box, but the process request event is not executed. Because the text onChange event is triggered when the text leaves the focus, the onChange event will be triggered first when clicking anywhere other than the text, and the button click will not be executed until the second click. This is combined verification.

1.5 Submission and verification form

The onsubmit event handler must evaluate to return true to allow continued submission, or return false to prevent submission.

<html><head><title>js_5</title><script type="text/javascript">    function checkForm(fomr1){        for (var i = 0; i < fomr1.elements.length; i++) {            if(fomr1.elements[i].type=="text" &&fomr1.elements[i].value==""){                alert("fill all the name");                return false;            }        };    }</script></head><body><form onsubmit="return checkForm(this)">Please enter all requested information:<br>FirstName: <input type="text" name="FirstName"><br>LastName :<input type="text" name="LastName"><br><input type="submit"></form></body></html>

Copy after login