JavaScript 学习（2）表单元素

JavaScript 学习-2

---

1. 表单和表单元素

1.1 form对象

form对象的引用：document.forms[0]或者引用name属性，如：document.forms["formname"],也可以直接使用document.formname调用form对象

1.2 form表单属性和元素

name,target,action,method,enctype

赋值改变:document.forms[0].action或document.formName.action

获得form中的元素使用form.elements[]，如下面将text值清零

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

1.3表单控件

• 文本框 text，文本的最常用的属性是value属性，value属性的内容通常是一个字符串。
• 按钮对象 button，主要是click处理事件
• 复选框对象checkbox,属性为checked，布尔类型
• 单选按钮对象 radio，设置该对象时候需要设置为相同的name，获取单选按钮对象的数量可以使用document.forms[0].groupName.length,检测是否高亮选择使用document.forms[0].groupName[0].checked
• select对象，select对象是符合对象一个包含了option对象数组的对象，访问方法如下document.forms[0].selectName.selectedIndex获得当前选择的下标，document.forms[0].selectName.options[n].text和document.forms[0].selectName.options[n].value，其中text属性是select对象显示的字符串，可以使用onchange事件处理器，比如我们常见的下拉后选择网站后直接导航。

---

<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>

---

1.4向函数传递表单数据和元素

javaScript提供了一个关键字this，它通常指向对象，这个对象包含使用这个关键词的脚本，因此，在一个文本域的onchange事件处理器中，可以使用this作为关键词为函数的参数如

<input type="text" name="entry" onchage="upperMe(this)">

function upperMe(field){ //dosomething }

每个控件都有一个指向所含的表的属性，故可以这么写this.form获取该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>

这段代码有一个比较特殊的逻辑，实验后能发现，在输入框输入之后，点击process requeset之后我们可以看到首次触发是文本框的onchange事件，而process requeset的事件并没有执行。因为text onChange事件的触发是在text离开焦点就触发了，所以在点击text之外的任何的地方都会先触发onChange事件，而按钮的单击在第二次点击后才能执行。这就是组合验证。

1.5提交和验证表单

onsubmit事件处理必须求值得到return true才允许继续提交，或者return false阻止提交。

<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>