JS操作表单

操作表单

表单操作和DOM操作基本相同，表单也是DOM树的一部分。

假如有一个表单：

<form id='test-form''>

-------<input type='text' id='input' name='text'>

------<buttont type='submit' id='submit'>Submit</button>

</form>

假如已经获取了一个节点：var input=document.getElementById('input')

获取输入的值：input.value;

更新文本框的值：input.value='更新的内容'

这种方法适用于text,password,hidden和select，但是对于单选可复选框应该用：

获取值：input.checked; // true  or false

更新值：input.checked=true;

提交表单

在表单提交的时候可以用响应<form>的onsubmit事件来对表单进行修改，HTML代码：

<form id='test-form' οnsubmit='return function'>

-------<input type='text' id='input' name='text'>

-------<button type='submit' id='submit'>Submit</button>

</form>

<script>

function(){

-------form=document.getElementById('test-form');

//执行代码

-------return true

}

</script>

会在表单提交的时候调用function函数，记得最后要return true，如果renturn false表单就不会提交，这用来检查表单是否有错误。

还可以响应<button>的onclick事件来提交表单：

<form id='test-form' >

-------<input type='text' id='input' name='text'>

-------<button type='submit' id='submit  οnclick='function()''>Submit</button>

</form>

<script>

function(){

-------form=document.getElementById('test-form');

//执行代码

-------return true

}

</script>

但是这种方法扰乱了表单的正常提交，建议使用第一种方法。