form表单提交与input的关系,以及jquery调用按钮的问题

工作中遇到这样的问题,在一个form表单中,有一个input输入框+一个a标签作为提交按钮,jquery检测a标签的点击事件

大概就是这样

<form>

<input type='text'>

<a> <span>提交</span></a>

</form>


jquery :

$("a.id").click(function(){

alert("开始做提交工作");

});

,这样并没有任何问题,再添加了一个输入框 变成这样

<form>

<input type='text'>

<input type='text'>

<a> <span>提交</span></a>

</form>


于是问题出现了

当我在第二个文本框中输入好内容后 按回车键不能触发默认的提交动作了,因为form表单中含有两个input 所以浏览器不能默认提交了


先讲解决办法,我们在form表单中内置一个 <input type=''submit' style="display:none"> 隐藏的提交框,这样我们再次尝试再第二个文本框中敲击enter时可以提交了

我们截取提交动作 使他运行我们自己的函数<input type='text' onclick=“return myfunction()”>

我们把onclick动作截取到我们自己的函数中,,注意那个rutun mufunction 而不是 myfuction 这样如果如果我们返回false 表单就不能继续提交了,我们返回true才能继续提交

所以我们再没有function中这样写

function myfunction(){

$('a.id').trigger('click');

return false;

}


也就是 我们再拦截到点击事件时,我们自己用jquery把提交按钮点击以下,然后返回false; 屏蔽fiorm自己的提交动作,这样我们再input中输入回车,或者点击提交按钮就都可以用我们自己的方式提交了







猜你喜欢

转载自blog.csdn.net/woaiqianzhige/article/details/78105366