用js提交表单解决一个页面有多个提交按钮的问题

JavaScript017

用js提交表单解决一个页面有多个提交按钮的问题,第1张

用js提交表单解决一个页面有多个提交按钮的问题,主要是判断是否为提交文本,然后再执行相应的动作,比较简单。

<pre class="javascript" name="code">function check(txt){ 

$j("form").submit(function(){ 

if($txt=="提交"){ 

this.action="doAddMessage.action?button=提交" 

this.submit() 

}else{ 

this.action="doAddMessage.action?button=保存" 

this.submit() 

}) 

}</pre><br> 

<input type="IMAGE" src="style/blue/images/button/send.png" name="button" value="提交" onclick="check(this)"/><input type="IMAGE"src="style/blue/images/button/saveToDraftBox.png" name="button" value="保存" onclick="check(this)"/> 

<pre></pre> 

<p><br> 

例如:页面中有两个图片按钮的提交,我们这个时候可以给他们都绑定onclick事件,这个时候我们借助jquery的form表单有个事件,叫做submit的。</p> 

<p>如图,由于,我的项目里面用了dwr,我把jquery的控制权转让给dwr,jquery重新指定 了一个$j,我们获取表单,然后使用submit事件,通过判断value的值,从而可以进行多个页面的跳转。</p> 

<p> </p> 

<p> </p>

表单提交是刚开始学js的朋友很迷惑的一个问题,怎么提交,怎么阻止默认提交,怎么提交表单不跳转等等问题,下面是一些示例

原始的表单提交有 button 按钮提交和 <input />类型的。它们又什么区别呢?

(1) 默认表单提交

(2)默认不会提交表单

(3) 如果在 form ,我们使用了 type=''submit 属性,但是不让表单默认提交,有什么办法呢?看下面

(4) 如果在 form ,我们使用了 type=''button 属性,但是还是需要提交表单,这是可以使用ajax来提交,好处是可以自己控制提交,并且页面不会跳转

(5)若是使用默认提交的方法,且提交之前验证表单,方法看下面

(6) 若是使用了 type='button' 属性,但是还是想实现默认提交的方式怎么办? 看下面

(7) 下面的提交会发生什么?

分析 : 点击提交按钮:

(1)当表单验证失败时,不会触发 form.submit() 函数,所以可以触发 <form>的 onsubmit 句柄,又因为该句柄 return false 所以表单不会从该句柄处默认提交,所以 会在控制台打印出 表单的onsubmit事件句柄在form.submit()调用时失效'

(2)当表单验证成功时,会触发 form.submit() 函数提交表单,又因为 form.submit()提交表单的方式与用户单击 Submit 按钮一样,但是表单的 onsubmit 事件句柄不会被调用,所以 控制台不会打印出 表单的onsubmit事件句柄在form.submit()调用时失效

现在表单默认提交的方式基本没人用了,都是ajax异步提交。但是了解一些还是好的。。。