FORM表单 onclick()与onsubmit()

FORM表单中onclick()、submit()与onsubmit()的问题

最近遇到一次处理form数据的过滤，采用了button的onclick事件来检查，发现return false后表单仍然提交了。

于是仔细研究了下onclick、onsubmit、submit集合函数之间的关系和区别

onsubmit:

You can override this event by returning false in the event handler.

Use this capability to validate data on the client side to prevent invalid data from being submitted to the server.

If the event handler is called by the onsubmit attribute of the form object,

the code must explicitly request the return value using the return function,

and the event handler must provide an explicit return value for each possible code path in the event handler function.

The submit method does not invoke the onsubmit event handler.

submit:

The submit method does not invoke the onsubmit event handler.

Call the onsubmit event handler directly.

When using Microsoft? Internet Explorer 5.5 and later,

you can call the fireEvent method with a value of onsubmit in the sEvent parameter.

首先生成一个form

<form action="#" method="POST" name="A" onsubmit="return X();">

<input type="text" value="" />

<input onclick="Y()" type="submit" value="提交" />

</form>

自己写X()、Y()函数，我们会发现，这几个函数的执行顺序

1) onclick: Y();

2) onsubmit: X();

3) submit();

也就是说

只要 onclick 未 return false 那么就继续执行 onsubmit

只要 onsubmit 未return false 那么表单就被提交出去了

另外一点写法上注意一定要 “return X();” 才能取得函数的返回值，否则只是调用函数，返回值未被传递

正确写法：
<input type=submit onclick=”return X();”>
//X() 返回false后，form的submit会被终止

错误写法:
<input type=submit onclick=”X()”>
//X() 返回false后未传递给onclick事件，form的submit会继续

时间： 2024-11-08 23:58:58

FORM表单 onclick()与onsubmit()的相关文章

JS中 submit提交与Form表单里的onsubmit的调用问题？

最近在开发中遇到了表单提交前验证的问题,用一个普通的button按钮代替submit按钮,在提交前触发这个button的onclick事件,在其事件中触发form的submit事件.问题出现了: <form action="http://www.baidu.com/s?wd=this.form.submit%28%29%3B&cl=3" method="post" name="form1" onsubmit="return

form表单的简单验证onsubmit

form表单的代码 <form name="myform" action="" method="post"> <input type="text" name="search" id="scontent" placeholder="请输入" value=""/> <select id="stype"

form表单提交的两种方式 button和submit的使用方法

1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在jsp的前端页面写:有两种方法,一种是用submit提交.一种是用button提交.方法一: 在jsp的前端页面的头部插入一个js方法: function checkUser(){ var result = document.getElementById("userid").value; var password = document.getElementById("userpass

form表单提交的两种方式

form表单的两种提交方式，submit和button的用法

一种是用submit提交.一种是用button提交.方法一: 在jsp的前端页面的头部插入一个js方法: function checkUser(){ var result = document.getElementById("userid").value; var password = document.getElementById("userpassid").value; if(result == "" ){ alert(

javaScript2：（DOM对象，form表单操作）

1.open,setTimeout,setInterval,clearInterval,clearTimeout <!DOCTYPE> <html> <head> <meta charset="UTF-8"></meta> <title></title> <script type="text/javascript"> // BOM:浏览器对象,broswer object

form表单的字符串进行utf-8编码

<form>表单有assept-charset属性.该属性规定字符的编码方式,默认是"unknown",与文档的字符集相同. 该属性除了Internet explorer几乎所有的浏览器支持. 语法:<form accept-charset="value"> Value:常用的有utf-8和iso-8859-1. 因为Internet explorer不支持assept-charset属性,所以用JavaScript调用"dociu

使用ajax方法实现form表单的提交

转http://www.cnblogs.com/han-1034683568/p/7199168.html 写在前面的话在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说想要将控制权放在前端,通过js来操作页面的跳转或者数据变化. 一般这种异步的操作,我们都会想到ajax方式,因此在实现了功能后就整理了这篇文章,通过ajax方法实现form表单的提交并进行后续

使用js提交form表单的两种方法

提交form表单的时候瑶族一些简单的验证,验证完后才能提交,避免无效提交. 1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在前端页面写:有两种方法,一种是用submit提交.一种是用button提交.方法一: 在jsp的前端页面的头部插入一个js方法: function checkUser(){ var result = document.getElementById("userid").value; var password = document