`
lituo20
  • 浏览: 2516 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

form表单中的button与submit

    博客分类:
  • web
 
阅读更多

前段时间时间,在写jsp时遇到了一个问题,有关form表单提交,代码如下:

 

<div class="container">
				<form id="emailAddForm" name="emailAddForm" method="post"  onsubmit="return false;">
					<table cellpadding="1" cellspacing="0" class="table2" id="table2">
						<tr>
							<th width="20%;">
								Email Subject
							</th>
							<td>
								<input type="text" id="emailName" name="emailName" style="width: 200px; height: 25px; font-family: arial; font-size: 14px;">
							</td>
						</tr>
						<tr>
							<th>
								UserInfo
							</th>
							<td>
								<div class="userDiv">
									<table class="userTab">
										<tr>
											<th width="10%">
												No
											</th>
											<th width="10%">
												Selection
											</th>
											<th width="35%">
												UserName
											</th>
											<th width="35%">
												Email
											</th>
										</tr>

										<c:forEach items="${userList}" var="user" varStatus="status">
											<tr>
												<td align="center">
													${status.count+rowIDStart-1}
												</td>
												<td align="center">
													<input class="userInfo" id="userInfo" type="checkbox" name="userInfo" value="${user.userID}">
												</td>
												<td align="left">
													&nbsp;&nbsp;&nbsp;&nbsp;${user.userName}
												</td>
												<td align="center">
													${user.emailAddress}
												</td>
											</tr>
										</c:forEach>
									</table>
									<div class="operation">
									</div>
								</div>
							</td>
						</tr>

						<tr>
							<th>
								Report
							</th>
							<td>
								<select class="editBox_select" name="kpisCategoriesID" id="kpisCategoriesID" onchange="javascript: selectKpisInfo();" style="width: 200px;">
									<option>
										--&nbsp;&nbsp;Choose kpisCategoriesName&nbsp;&nbsp;--
									</option>
									<c:forEach items="${categoriesList}" var="kpisCategories" varStatus="status">
										<option value="${kpisCategories.kpisCategoriesID}">
											${kpisCategories.kpisCategoriesName}
										</option>
									</c:forEach>
								</select>
								<select class="editBox_select" id="kpisID" name="kpisID" style="width: 200px;">
									<option>
										--&nbsp;&nbsp;Choose kpisName&nbsp;&nbsp;--
									</option>
								</select>
							</td>
						</tr>

						<tr>
							<th>
								Attachment
							</th>
							<td>
								<input type="checkbox" name="attachment" id="attachment" value="1" onchange="validateReport(this)">
								Excel
								<input type="checkbox" name="attachment" id="attachment" value="2" onchange="validateReport(this)">
								pdf
							</td>
						</tr>
					</table>
					<div class="operation">
						<div class="oButton">
							<!-- <input type="submit" class="button" value="Add"/>-->
							<button class="button" onclick="addEmailInfo()">
								Add
							</button>
						</div>
						<div class="oButton1">
							<button class="button" onclick="returnList()">
								Return
							</button>

						</div>
					</div>
				</form>
				<div class="returnDiv">

				</div>

 我以前不喜欢用form表单提交,一直使用Ajax方式;但这次使用了form表单方式。在form表单中button按钮不会直接提交form表单的,想必大家都知道的。

所以我就使用了button按钮,而不是<input type="submit" value="">这种方式,当我在button中写了onclick事件点击后,总是不执行onclick函数,我就很奇怪。但是更奇怪的事情发生了,当我在服务器上访问这个页面时,onclick事件竟然起作用,(注:服务器上的浏览器是IE8,我本机是IE11),我上网找了找,但是没有找到原因,最后我在form表单中加了onsubmit="return false;",在所有的浏览器上button按钮的onclick函数生效了。想必大家都知道onsubmit(),阻止from表单提交的,但是为什么button按钮可以去提交form表单呢。可能是我写法有问题,或者是别的原因,但是我单独写了一个form表单,用button还是可以提交的。事实上,button不可以提交form表单,只有<input type="submit" value="">这种方式才可以.希望大神们指点。

 

分享到:
评论

相关推荐

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

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

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

    在开发Web应用时,我们经常会遇到各种前端框架的交互问题,其中之一就是在layui中处理form表单与button点击事件冲突的问题。layui是一个轻量级的前端组件库,它提供了丰富的UI元素和交互功能,包括表单组件和按钮。...

    submit和button的区别

    如果需要`button`按钮完成表单提交,可以在JavaScript中手动调用`document.form1.submit()`来实现。这种方式适用于有多个提交按钮的场景,可以根据用户的选择来确定提交到哪个控制器。 例如,如果你希望所有提交都...

    html中submit和button的区别

    在HTML中,`&lt;input&gt;`标签用于创建各种类型的输入控件,如文本框、密码框、复选框等,而`submit`和`button`则是其中的两种类型,主要用于用户交互,尤其是表单提交的操作。 ### submit `submit`是一种特殊类型的`...

    submit表单提交,onsubmit验证拦截

    submit表单提交,onsubmit验证拦截 免去了用button按钮click点击事件ajax请求

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

    &lt;button type="submit"&gt;登录&lt;/button&gt; &lt;/form&gt; ``` 在上面的例子中,`&lt;input type="text"&gt;` 和 `&lt;input type="password"&gt;` 分别用于输入用户名和密码,`required`属性确保用户必须填写这些字段。 除了基本的输入...

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

    在这个例子中,我们将深入探讨如何在微信小程序中使用`form`表单来获取用户输入的数据。 一、`&lt;form&gt;`组件介绍 在微信小程序中,`&lt;form&gt;`组件用于创建一个表单容器,它允许用户输入数据并通过提交操作将数据传递到...

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

    &lt;button type="submit"&gt;提交&lt;/button&gt; &lt;/form&gt; ``` `enctype="multipart/form-data"` 是必需的,因为我们需要上传图片。 3. **初始化ajaxForm**:在JavaScript中,找到表单元素并调用ajaxForm方法。例如: ```...

    简单的form表单模板

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

    浅析一个表单多个Submit按钮的简单实现方法

    在网页设计中,表单(Form)是收集用户输入数据的重要工具,而Submit按钮则是将这些数据发送到服务器的关键组件。通常,一个表单只有一个Submit按钮,但有时根据设计需求,我们可能需要在同一个表单中添加多个Submit...

    jquery管理cookie和form的js

    在用户填写表单时,可以使用`$('form').ajaxSubmit()`或`$('form').submit(function() { ... })`来实时更新部分页面内容,无需等待全部表单填写完毕。 4. **错误处理**: 提供了错误处理回调函数,可以在异步提交...

    sp\button和submit的区别及使用js实现页面跳转的方式

    首先,Button类型的按钮仅仅是一个普通的按钮,点击它不会自动提交表单,而Submit类型的按钮则会自动提交表单。因此,如果我们想要实现页面的跳转,可以使用Submit类型的按钮,但是需要注意的是,使用Submit类型的...

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

    在Web开发中,AJAX(Asynchronous JavaScript and XML)是一种技术,它允许我们在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。本实例演示将深入探讨如何使用AJAX来提交HTML Form表单,从而提供更...

    基于jQuery和layui的form表单自定义js动态生成

    $('#dynamicForm').append('&lt;button type="submit"&gt;' + item.value + '&lt;/button&gt;'); } }); ``` 4. layui表单增强:layui提供了form模块,可以对表单元素进行进一步的控制和美化。首先,我们需要初始化form模块。 ...

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

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

    浅谈layui 绑定form submit提交表单的注意事项

    在本文中,我们将深入探讨layui框架中如何绑定form submit提交表单时需要注意的事项。layui是一个流行的前端组件库,提供了丰富的UI元素和便捷的API,其中包括表单处理功能。下面,我们将详细介绍两个关键点:lay-...

    使用FormValidation进行表单验证

    &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt; &lt;/form&gt; ``` 接下来,在JavaScript中初始化`FormValidation`: ```javascript $(document).ready(function() { $('#myForm').formValidation({ ...

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

    在HTML页面中,表单(`form`)是用于收集用户输入数据的元素,而JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,常用于前后端数据传输。本篇将详细介绍如何在HTML表单中收集数据,并利用jQuery的`...

Global site tag (gtag.js) - Google Analytics