JavaScript基础(5)之form表单-基本操作

表单作为与服务器端交互非常重要的一环，html中的表单虽然用的多，但是没有系统地去了解，在者详细了解form的各种特性

基本内容

在HTML中，表单是由元素来表示的，而在JavaScript中，表单对应的则是HTMLFormElement类型。

HTMLFormElement也有它自己下列独有的属性和方法

属性	解释
acceptCharset	服务器能够处理的字符集；等价于HTML中的accept-charset
action	接收请求的URL
elements	表单中所有控件的集合
enctype	请求的编码类型；等价于HTML中的enctype特性
length	表单中控件的数量
name	表单的名称；等价于HTML的name特性
method	表单中所有控件的集合
reset()	将所有表单域重置为默认值
submit()	提交表单
target	用于发送请求和接收响应的窗口名称；等价于HTML的target特性
method	要发送的HTTP请求类型

获取表单

// 用id
var forms = document.getElementById('form');
// 用document.forms属性
var forms = document.forms  // 页面所有表单

提交表单

按钮提交

<!--通用按钮提交-->
<input type="submit" value="submit">
<!--自定义按钮提交-->
<button type="submit">submit</button>
<!--通用按钮提交-->
<input type="image" value="demo.png">

按钮提交的时候会触发submit事件，可以监听submit事件，进行表单验证，阻止默认行为就可以取消表单提交

直接调用submit()方法

var forms = document.getElementById('form');
forms.submit();

阻止表单重复提交

// 只提交一次
<script type="text/javascript">
var isCommitted = false;//表单是否已经提交标识，默认为false
function dosubmit(){
if(isCommitted==false){
isCommitted = true;//提交表单后，将表单是否已经提交标识设置为true
return true;//返回true让表单正常提交
}else{
return false;//返回false那么表单将不提交
}
}

// ajax提交
$.ajax({
url:'your url',
dataType:'json',
data: yourParams
}).done(function(rs){
// rs 既是返回内容
btn.disabled = true;
});

//普通提交，设置按钮为不可点击
function submit()
{
var submitId=document.getElementById('submitId');
submitId.disabled=true;
document.fm.submit();
setTimeout("submitId.disabled=false;",3000); //代码核心在这里，3秒还原按钮代码
}

后台代码控制表单提交有一个好的办法就是使用session

具体可参考http://www.cnblogs.com/xdp-gacl/p/3859416.html

重置表单

按钮重置

<!--通用按钮重置-->
<input type="reset" value="reset">
<!--自定义按钮重置-->
<button type="reset">reset</button>

用户点击重置按钮时会触发reset事件，有时候可以监听它，阻止重置

表单字段

共有的表单字段属性

属性	解释
disabled	布尔值，表示当前字段是否被禁用
form	指向当前字段所属表单的指针；只读
name	当前字段的名称
readonly	布尔值，表示当前字段是否只读
tabIndex	表示当前字段的切换（tab）序号
type	当前字段的类型，如：“checkbox”、“radio”，等等
value	当前字段将被提交给服务器的值

共有的表单字段方法

focus()和blur()

// HTML5新增autofocus
<input type="text" name="uname"autofocus>

共有的表单字段事件

blur：当前字段时区焦点时触发。

change：对于和元素，在它们失去焦点且value值改变时触发；对于元素，在其选项改变时触发。

focus：当前字段获得焦点时触发。

焦点管理

4000
在 HTML5 工作草案中，DOM 属性 activeElement 与方法 hasFocus() 为程序员提供了更好的控制页面交互的能力，特别是对于用户行为引发的交互。例如，它们都可以用于统计使用目的，跟踪页面特定链接的点击次数，计算元素获得焦点的次数等等。此外，当与 AJAX 技术结合以后，将会减少向服务器请求的数目，这取决于用户的活跃程度和页面的布局。具体实现可看MDN

表单文本

选择文本

可以用select()

document.forms[0].elements[0].select();

选择select事件

与select()方法对应的，是一个select事件。在选择了文本框中的文本时，就会触发select事件。

// 取得用户在文本框中选择的文本
function showSelected(text){
alert(text.value.substring(text.selectionStart,text.selectionEnd));
}