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

CSDN发布地址http://blog.csdn.net/hope_it/article/details/72857651

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

在HTML中，表单是由<form>元素来表示的，而在JavaScript中，表单对应的则是HTMLFormElement类型。
HTMLFormElement也有它自己下列独有的属性和方法

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

• 共有的表单字段事件
  1. blur：当前字段时区焦点时触发。
  2. change：对于<input>和<textarea>元素，在它们失去焦点且value值改变时触发；对于<select>元素，在其选项改变时触发。
  3. focus：当前字段获得焦点时触发。

在 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));
  }