腾讯云618限量抢购

JavaScript onsubmit 事件:表单被提交

最后更新:2012-05-19 12:54阅读:31800

JavaScript onsubmit 事件

表单被提交时发生时会触发 onsubmit 事件。点击 submit 提交按钮后,onsubmit 事件是先于表单提交发生的,因此可以利用 onsubmit 事件执行一些代码,如表单内容检测等。

下面的例子演示了,在提交表单时,弹出消息确认框进行确认,如果点击否,就不提交表单:

<html>
<head>

<script type="text/javascript">

function checkSubmit(){
    if ( confirm("确认提交表单吗?")){
        var your_name = testform.your_name.value;
        if( your_name == "" ){
            alert("请填写您的名字!");
	    testform.your_name.focus(); 
            return false;
        }
        alert("您好" + your_name + "!");
    } else {
        return false;
    }
}

</script>

</head>
<body>
<form name="testform" onsubmit="return checkSubmit();">
<p>
您的名字:<input type="text" name="your_name" />
<input type="submit" value=" 提交 " />
</p>
</form>
</body>
</html>

您可以在下面试试本例子效果:

您的名字:

语法解释

  1. 表单被提交则触发 onsubmit 事件,checkSubmit() 函数前要加上 return ,否则表单总是会被提交
  2. 例子中通过 confirm 确认框进行表单提交确认
  3. 当检测到没有填写名字时,进行提示并利用 return false 语句阻止表单提交
  4. testform.your_name.focus() 用语在阻止表单提交后,将输入焦点设置到 input 文本输入框,这是开发中系统人性化的一个体现

本章节内容共分 22 部分:
  1. 1. JavaScript 事件
  2. 2. JavaScript onclick 事件:鼠标点击页面某个对象
  3. 3. JavaScript ondblclick 事件:鼠标双击页面某个对象
  4. 4. JavaScript onmousedown 事件:鼠标任何一个按键被按下
  5. 5. JavaScript onmouseup 事件:鼠标任何一个按键被松开
  6. 6. JavaScript onmouseover 事件与 onmouseout 事件:鼠标指针移动到对象上或离开对象
  7. 7. JavaScript onkeydown 事件:键盘上某个按键被按下
  8. 8. JavaScript onkeypress 事件:按下或按住一个键盘按键
  9. 9. JavaScript onkeyup 事件:键盘按键被松开
  10. 10. JavaScript onblur 事件:页面元素失去焦点
  11. 11. JavaScript onfocus 事件:页面元素获得焦点
  12. 12. JavaScript onchange 事件:表单文本域或选择域发生改变
  13. 13. JavaScript onsubmit 事件:表单被提交
  14. 14. JavaScript onreset 事件:表单被重置
  15. 15. JavaScript onload 事件:页面或图像加载完成后
  16. 16. JavaScript onunload 事件:关闭页面或页面被改变为其他页面
  17. 17. JavaScript onerror 事件:加载页面或图像时发生错误
  18. 18. JavaScript onresize 事件:当浏览器窗口或 HTML 对象改变大小
  19. 19. JavaScript onscroll 事件:滚动条发生滚动及利用 onscroll 来实现 返回顶部 效果
  20. 20. JavaScript onselect 事件:文本框中的文本被选中
  21. 21. JavaScript oncopy 事件:文本被复制及利用 oncopy 实现拷贝内容时增加版权信息
  22. 22. JavaScript oncut 事件与 onpaste 事件:文本域文本被剪切或粘贴(禁止粘贴实例)
腾讯云618限量抢购