`
Donald_Draper
  • 浏览: 979564 次
社区版块
存档分类
最新评论

如何阻止Form表单中的Button自动提交

    博客分类:
  • HTML
阅读更多
在Form表单中加button的话,点击事件触发会自动提交表单,如何阻止默认行为呢?
以下为示例:
<form action="test.do" method="post" name="Form" id="Form">
	<table>
		<tr>
		<td style="vertical-align:top;"><button class="btn btn-mini btn-light" onclick="return search();"  title="查询"><i id="nav-search-icon" class="icon-search"></i></button></td>
		</tr>
	</table>
</form>

一般点击事件为:onclick="search();",容易触发表单默认提交行为;
改为onclick="return search();"即可
function search(){
    if(true){
    	$("#Form").submit();
    }
    else{
    	bootbox.alert("请填写至少一个查询条件");
    	return false;
    }
}

分享到:
评论

相关推荐

    JavaScript在form表单中使用button按钮实现submit提交方法

     在form表单提交中,使用button来间接完成submit的提交更为灵活。下面是实现方法: 使用button按钮实现submit提交,需要在button标签中的使用onclick方法,然后在JavaScript中实现具体,代码如下: &lt;head&gt; ...

    ajaxForm异步提交表单(含图片)

    AjaxForm是jQuery Form Plugin的一个功能,用于实现异步表单提交,特别是处理包含图片在内的复杂数据。本文将深入探讨如何使用ajaxForm进行异步表单提交。 首先,让我们了解什么是Ajax。AJAX(Asynchronous ...

    使用AJAX提交Form表单实例演示

    总结,这个实例演示了如何使用jQuery和AJAX来实现Form表单的无刷新提交。通过这种方式,用户可以在提交表单后立即看到结果,而无需等待页面刷新,提高了交互性和用户体验。记住,实际应用中你需要根据具体需求调整...

    通过button将form表单的数据提交到action层的实例

    在我们的实例中,我们使用 Button 元素来提交 Form 表单数据,我们将 onclick 属性设置为一个 JavaScript 函数,该函数将 Form 表单数据提交到 Action 层。 知识点 2: 使用 Ajax 提交 Form 表单数据 在现代 Web ...

    使用jQuery.form插件,实现完美的表单异步提交

    在Web开发中,异步表单提交是一种常见需求,它能提供更好的用户体验,因为用户无需等待页面刷新即可完成数据的提交。jQuery.form插件正是为了满足这种需求而设计的,它扩展了jQuery库,使表单异步提交变得更加简单、...

    解决layui中的form表单与button的点击事件冲突问题

    然而,在实际使用中,有时会出现一些意料之外的问题,例如本文提到的 "layui 中的 form 表单与 button 的点击事件冲突问题"。 当 layui 的 form 表单元素与 button 元素位置重合时,可能会导致 button 的 click ...

    jquery-form 异步提交表单

    在Web开发中,用户交互是关键的一环,而表单提交就是这种交互的重要组成部分。传统的HTML表单提交方式会刷新整个页面,用户体验不佳。为了解决这个问题,jQuery Form插件应运而生,它允许我们实现异步(Ajax)表单...

    js的form表单提交url传参数(包含+等特殊字符)的两种解决方法

    方法一:伪装form表单提交 这种方法通过JavaScript动态创建一个form元素,将需要提交的参数值编码后加入到表单的action属性中,然后模拟form的提交行为。示例代码如下: ```javascript linkredwin=function(A,B,C,D,...

    用image来提交form不想使用button提交form.docx

    如果不需要这些坐标,可以在`onsubmit`事件中阻止默认行为,防止表单被自动提交两次。 2. **JavaScript处理**: 可以使用JavaScript来监听用户的点击事件,并在合适的时候提交表单。为了避免双重提交,我们需要...

    html的form表单实例介绍

    html的form表单中button等实例介绍

    关于layui表单中按钮自动提交的解决方法

    这样,不在layui的form中的按钮就不会触发表单的自动提交。例如: ```html &lt;!-- 表单内容 --&gt; &lt;button&gt;非提交按钮&lt;/button&gt; ``` 2. **使用JavaScript回调阻止提交**: 对于仍需留在表单内的按钮,可以在...

    简单的form表单模板

    本文将深入探讨“简单的form表单模板”及其相关知识点。 首先,我们需要了解HTML中的`&lt;form&gt;`标签。它是创建表单的基础,用于定义用户输入数据的区域。例如: ```html &lt;form action="submit.php" method="post"&gt; ...

    html对应的文件中 将form 表单数据 转化为json 格式

    // 阻止默认的表单提交行为 var formData = $(this).serializeJSON(); // 获取表单数据为JSON对象 // 打印JSON数据 console.log(JSON.stringify(formData)); // 这里可以进一步使用formData,比如通过ajax...

    微信小程序例子——使用form表单获取输入框数据

    在微信小程序中,`&lt;form&gt;`组件用于创建一个表单容器,它允许用户输入数据并通过提交操作将数据传递到服务器或者执行相应的业务逻辑。`&lt;form&gt;`组件提供了自动封装数据、校验数据以及调用后台接口的能力,极大地简化了...

    美观又功能齐全的HTML form表单

    这些控件允许用户输入数据,然后通过`&lt;form&gt;`的`action`属性指定的URL提交给服务器处理。 例如,一个简单的登录表单可能如下所示: ```html &lt;form action="login.php" method="post"&gt; 用户名: 密码: ...

    说说回车键触发表单提交的问题

    - **设置默认提交按钮**:通过设置`form`属性,将某个按钮指定为表单的默认提交按钮,例如`&lt;button form="myForm" type="submit"&gt;提交&lt;/button&gt;`。 - **监听键盘事件**:使用JavaScript,通过监听`keyup`或`keydown`...

    【JavaScript源代码】HTML form表单提交方法案例详解.docx

    对于`&lt;button&gt;`,因为其不具有自动提交功能,所以需要在JavaScript中手动调用`submit()`方法来提交表单。 3. **表单级事件处理**:使用`onsubmit`事件处理函数,可以为整个表单添加验证逻辑。当表单被提交时,`...

    巧用js提交表单轻松解决一个页面有多个提交按钮

    代码如下: ”javascript” name=”code”&gt;function check(txt){ $j(“form”).submit(function(){ if($txt==”提交”){ this.action=”doAddMessage.action?button=提交”; this.submit(); }else{ this.action=”...

Global site tag (gtag.js) - Google Analytics