`

jquery中使用submit提交按钮

阅读更多

1.jquery中使用submit提交按钮时,当return false后,依然会提交表单的

解决的办法是:使用button按钮,而不是submit按钮 看下面的例子

 

<title>用户修改密码</title>
<script type="text/javascript" src="scripts/jquery-2.0.2.js"></script>
<script type="text/javascript">
   function check(){
	   var npassword=$("#npassword").val();
	   var npassword2=$("#npassword2").val();
	   if(npassword==null||npassword==""){
		    alert("密码不能为空!");
		    $("#npassword").focus();
		    return false;
	   } else if(npassword2!=npassword){
		   alert("两次密码不一致");
		   $("#npassword2").attr("value","");
		   $("#npassword2").focus();
		   return false;
	   }else{
		   $("#form").submit();
	   } 
   }

</script>
</head>
<body bgcolor="#E2E4F0">
   <form name="form" id="form" action="selfservice.jsp" method="post" >
     <input type="hidden" name="action" value="modpassword"/>
     <table border="2" align="center" style="margin:200px 100px 200px 400px ">
     <tr>
        <td>新密码:</td>
        <td><input type="password" id="npassword" name="npassword"/></td>
      </tr>      
      <tr>
        <td>确认密码:</td>
        <td><input type="password" id="npassword2" name="npassword2"/></td>
      </tr> 
      <tr>
        <td><input type="button" value="提交" onclick="return check();"></td>
        <td><input type="reset" value="重置"></td>	
      </tr>  
     </table>
   </form>
</body>

2.可以通过下面这篇文章来学习下jquery如何提交表单

 

 

步骤

(1) 创建一个新文件,将它命名为formSubmit.html并保存在chapter1目录中。

(2) 编写以下代码,这段代码将创建一个表单,其中包含一个input按钮(而不是submit按钮)。添加一些将在单击该按钮时触发并提交该表单的jQuery代码。

 

<html>
  <head>
    <title>Submitting forms</title>
  </head>
  <body>
    <form id="myForm">
      <input type="button" value="Submit Form" />
    </form>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      $(document).ready(function ()
      {
        $('input:button').click(function()
        {
          $('#myForm').submit();
        });
      });
    </script>
  </body>
</html>



 

(3) 运行formSubmit.html文件并单击input按钮,它将提交该表单。

1.5.3 原理

在本例中,向input按钮附加click事件处理函数。该事件处理函数将在单击按钮时执行。单击按钮时,将在表单上调用jQuery的submit()方法,这将提交该表单。所有浏览器都有一个原生的提交方法,用于以编程方式提交表单。jQuery将此功能包装到了它自己的submit()方法中。

1.5.4 更多信息

控制表单提交

如果表单有一个submit按钮,那么我们可以控制是否提交该表单。在本例中,必须向表单附加事件处理函数,此事件处理函数将在单击特定表单上的submit按钮时执行。

 

$('#myForm').submit(function()
{
  return false;
});



 

上述代码将在单击ID为myForm的表单上的submit按钮时执行。如果处理函数返回false,不会提交表单。这对验证表单非常方便。验证表单值的代码可以放在处理函数中。如果表单值通过验证,返回true,提交表单。验证失败时,返回false,则不允许提交表单。

另一个选项是使用preventDefault()。由名称可以看出,preventDefault()会阻止执行默认事件。它是event对象的一个属

$('#myForm').submit(function(event)

{

  event.preventDefault()

});




分享到:
评论

相关推荐

    jquery实现submit提交表单

    这个问题太诡异了,是因为form中提交表单的input的name属性为submit,把name改成其他的名称,就可以使用了。 表单可以提交之后,又出现了新的问题。由于基于dz开发,表单提交之后使用submitcheck()这个函数来检查...

    javascript实现点击提交按钮后显示loading的方法

    主要介绍了javascript实现点击提交按钮后显示loading的方法,涉及javascript动态设置页面元素样式的相关技巧,需要的朋友可以参考下

    jQuery中:submit选择器用法实例

    主要介绍了jQuery中:submit选择器用法,实例分析了:submit选择器的功能、定义及匹配提交按钮的使用技巧,需要的朋友可以参考下

    JS和jQuery使用submit方法无法提交表单的原因分析及解决办法

    昨天,在做一个表单异步提交内容的时候,遇到很奇怪的问题,submit()方法无法进行提交,每次提交都是把 当前给刷新了,网络抓包发现,每次都是 get方式去获取 当前页面,完全没有post 请求,想着以前 遇上这样的问题...

    jquery submit()不能提交表单的解决方法

    今天写表单提交的时候需要增加一个确认提示,所以没有使用submit按钮提交,改用jq的submit(),然后问题了 &lt;form class=form-horizontal m-t method=post action=@Url.Action(Edit) id=form&gt; 添加&...

    jQuery基于Ajax方式提交表单功能示例

    本文实例讲述了jQuery基于Ajax方式提交表单功能。分享给大家供大家参考,具体如下: 提交表单一般通过同步的方式提交,提交后页面刷新或跳转到新页面来显示服务器端返回的处理结果。如果表单提交后有另外的操作或...

    jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法

    本文实例讲述了jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法。分享给大家供大家参考。具体实现方法如下: 这里主要通过val方法设置按钮的文字,并用attr方法修改disabled属性实现该功能。 主要代码...

    jQuery实现防止提交按钮被双击的方法

    本文实例讲述了jQuery实现防止提交按钮被双击的方法。分享给大家供大家参考。具体实现方法如下: $("#submit").one('click', function (event) { event.preventDefault(); //do something $(this).prop('...

    jquery中使用$(#form).submit()重写提交表单无效原因分析及解决

    问题:最近使用 jqeury 的 validationEngine 做ajax校验,当表单中的最后一个字段需要做ajax验证时,此时在字段输入完毕后点击回车提交表单时不起作用,必须再按一次/点击submit按钮。 分析:通过个跟踪其源代码,...

    在jQuery ajax中按钮button和submit的区别分析

    代码如下: [removed] $(document).ready(function(){ $(“#submit”).click(function(){ $.post(... [removed] jQuery ajax的post方法这样写应该是没有问题的,点击submit提交按钮,sendPwd.php通过$_POST接收传过

    解决jquery submit()提交表单提示:f[s] is not a function

    jquery submit()无法提交表单 报错:f[s] is not a function, js submit()无法提交表单 报错:document.getElementByIdx_x(…).submit is not...我向可能name=”submit”系统会认为这个才是真正的提交按钮吧,但是点它

    使用JQuery实现Ctrl+Enter提交表单的方法

    有时候我们为了省事就操作键盘组合键去代替使用鼠标,我们今天就使用JQuery实现Ctrl+Enter提交表单。 我们发帖时,在内容输入框中输入完内容后,可以点击“提交”按钮来发表内容。可是,如果你够“懒”,你可以不用...

    阻止表单提交按钮多次提交的完美解决方法

    如果表单是通过onsubmit进行Ajax提交,注意将表单提交按钮input type属性设为button,尽量不要设置为submit类型。 另外,在提交事件发出后,最好将提交按钮设置为disabled,防止由于网络延时问题,让用户有机会进行...

    jQuery中验证表单提交方式及序列化表单内容的实现

    之前项目中使用的表单提交方式 使用form()方法可以将提交事件脱离submit按钮,绑定到任何事件中 代码如下: function addSubmit(){ $(‘#addForm’).form(‘submit’, { url : _basePath + ‘/@Controller/@...

    表单Form的submit事件不响应的解决方法

    虽然用submit方法来提交表单有违Unobtrustive Javascript的原则,但有时候不得不用,比如做搜索提示(auto-complete)选中Item之后就需要用JS来提交搜索表单。 二、问题分析 既然本身不响应事件,那只有手工触发这些...

    Jquery submit()无法提交问题

    代码点击注册按钮时无法提交表单,名称冲突可能会导致混乱的失败,接下来为大家介绍下解决方法,感兴趣的朋友可以了解下

    几种防止表单重复提交的方法

    表单提交后使用Javascript使提交按钮disable。这种方法防止心急的用户多次点击按钮。但有个问题,如果客户端把Javascript给禁止掉,这种方法就无效了。 我之前的文章曾说过用一些Jquery插件效果不错。 Post/Redirect...

    jquery验证邮箱格式并显示提交按钮

    大多数网站的表单采用文本提示的方法,提示用户哪里填写错了,哪里不正确,但我们应该能做得更好:填写不正确就不显示提交按钮! HTML结构 &lt;form class=newsletter&gt; &lt;input type=email value= ...

    jQuery多功能注册表单验证插件代码

    功能介绍:jQuery多功能注册表单验证插件代码,能够验证几乎所有字段,让你...表单提交按钮必须是input,type="submit"; 5.表单里不能再出现p标签; 6.开启手机短信验证,发送短信按钮标签必须是input,type="button

Global site tag (gtag.js) - Google Analytics