`

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完整注册表单提交验证

    例如,使用`.on('submit', function() {...})`监听表单提交事件,并在回调函数中进行所有验证。如果所有验证都通过,再提交表单到服务器;否则,显示相应的错误信息。 在实际项目中,还可以考虑使用现有的验证库,...

    jquery实现submit提交表单

    本文将深入探讨如何使用jQuery实现submit提交表单,并解决在实际应用中可能遇到的问题。 首先,让我们了解jQuery中的`submit()`函数。这个函数是用于监听和处理HTML表单的submit事件。当用户点击表单内的提交按钮...

    jQuery中:submit选择器用法实例

    总之,:submit选择器是jQuery中一个非常实用的工具,它可以帮助开发者轻松地选择和操作页面中的提交按钮,提升开发效率和用户体验。无论是对于新手还是经验丰富的前端开发者来说,理解并掌握这个选择器的使用技巧都...

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

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

    jquery实现通过按钮弹出表单

    本文将深入探讨如何使用jQuery实现通过按钮触发弹出式表单的功能,这个功能广泛应用于用户的新建操作、数据导入等功能,极大地提升了用户体验。 首先,我们需要在HTML页面中设置一个按钮和一个隐藏的表单。按钮将...

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

    在这段代码中,我们首先通过jQuery选择器`$("#submit")`选中提交按钮,然后使用`.one()`方法绑定点击事件。在事件处理函数中,首先调用`event.preventDefault()`阻止按钮的默认提交行为,然后通过`$(this).prop('...

    jQuery Ctrl+Enter提交表单

    本文将深入探讨如何使用jQuery实现一个功能,即通过按下键盘上的Ctrl + Enter键来提交表单,而不是常规的点击提交按钮。这个功能在很多场合下都非常实用,比如在论坛发帖或者聊天应用中,用户可以更加便捷地发送信息...

    jquery+ajax实现无刷新提交的功能

    ### 使用jQuery与Ajax实现网页无刷新提交功能 在现代Web开发中,为了提供更好的用户体验,很多网站都会采用Ajax技术来实现在不刷新整个页面的情况下进行数据的提交与更新。本篇文章将详细介绍如何利用jQuery库结合...

    jquery实现弹窗表单填写提交

    接下来,使用jQuery绑定按钮点击事件,并在事件处理函数中显示弹窗: ```javascript $(document).ready(function() { $("#openForm").click(function() { $("#popupForm").show(); }); }); ``` 表单填写完成后...

    jQuery点击图标按钮弹出表单代码

    在这个例子中,我们使用了Font Awesome图标库(`&lt;i class="fa fa-plus"&gt;&lt;/i&gt;`)来创建一个加号图标,作为按钮的图形表示。表单`;"&gt;`默认是隐藏的,因为我们需要在用户点击按钮后才显示。 接下来,我们要编写jQuery...

    JQuery 提交表单(附详细图解)

    但需要注意的是,如果表单提交按钮被替换为图片或其他非标准元素,`ajaxForm`和`submitForm`可能无法正常工作。 总结来说,使用jQuery的AJAX功能进行表单提交可以大大简化前端代码,提高开发效率,同时也提升了用户...

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

    以W3C浏览器为例,当用户点击提交按钮时,浏览器会携带submit按钮的值提交表单。但在IE6浏览器中,当使用回车键提交表单时,并不会携带submit按钮的值。为了解决这种跨浏览器的兼容性问题,可以增加一个隐藏的表单域...

    jQuery使用ajaxSubmit()提交表单示例

    在jQuery中,`ajaxSubmit()` 是一个扩展方法,它包含在jQuery的form插件中,用于异步提交表单数据,而不会导致页面刷新。在使用`ajaxSubmit()` 之前,需要确保已经引入了jQuery库和`jquery.form.js` 插件。以下是对`...

    按钮的Ajax请求时一次点击两次提交的解决方法

    通过更改按钮的type属性或在事件处理函数中使用return false;,都可以有效地解决这个问题。在实际开发中,可以根据具体情况和开发习惯选择适合的解决方案。最后,代码注释和文档的编写也是提升代码可维护性的重要...

    jquery复选框选中按钮.rar

    而按钮则可以是提交按钮(submit)、重置按钮(reset)或是按钮元素(button),如: ```html 点击我 ``` 在jQuery中,我们可以使用`.click()`方法来监听按钮的点击事件,然后执行相应的函数。例如,当用户点击按钮...

    jquery 多条件搜索 加提交按纽

    在这个场景中,我们关注的是如何利用jQuery实现一个具有多条件搜索功能的界面,并且添加提交按钮,以便用户能够根据选择的条件进行查询。我们将探讨以下几个关键知识点: 1. **jQuery基础**:首先,理解jQuery的...

    jQuery文字选项问卷调查表单提交.zip

    在这个问卷调查表单中,jQuery的选择器可能被用来选取特定的表单元素,如输入框、复选框、单选按钮或提交按钮,以便绑定事件监听器或进行其他操作。 接着,表单数据的处理是此程序的重点。jQuery提供了`serialize()...

    jQuery商品分类选择提交表单代码.zip

    表单提交按钮可能用`&lt;button&gt;`或`&lt;input type="submit"&gt;`来实现,而JavaScript会监听这些元素的事件。 为了确保表单数据的正确提交,jQuery还可以配合Ajax技术实现异步提交,避免页面刷新。`$.ajax()`或`$.post()`...

    jquery顶部固定层注册登录按钮点击弹出登录框表单样式

    `button`或`input[type="submit"]`选择器,定义提交按钮的样式。 5. **事件处理**:jQuery提供了丰富的事件处理函数,如`.click()`用于绑定点击事件,`.on()`用于监听动态添加的元素的事件。在这个功能中,可以为...

Global site tag (gtag.js) - Google Analytics