form表单的reset

form表单的reset

重置表单(把表单的所有输入元素重置为它们的默认值。):

1.使用reset按钮,条件reset按钮必须在form表单内部。

2. <input id="Button1" type="button" value="button" onclick="form1.reset();" />可以不在表单内部。

用途示例:一般我们做添加页面和编辑页面时用的都是同一个页面,这样以来编辑后再添加时表单内容就需要清除,很多人在使用后台代码做清除工作如:

protected void btnAdd_Click(object sender, EventArgs e)
{
lblCaption.Text = "添加";
ArticleType1.ddlTypeEnabled = false;
ArticleNoImg.txtTitleText = "";
ArticleNoImg.fckContentText = "";
ArticleType1.ddlTypeSelectValue = articleTypeId;
lblUpFileName.Visible = false;
lblDocFileName.Visible = false;
lblNotice.Visible = false;
imgBtnDelete.Visible = false;
......
SelectedId = "";

ModalPopup.Show();
}

实际上我们可以更简单些,使用js脚本来实现:

<asp:Button ID="btnAdd" runat="server" Text="添&nbsp;&nbsp;加" CausesValidation="False" OnClientClick="form1.reset();ModalPopup.style.display='';" />

或者

<input id="Button1" type="button" value="button" onclick="form1.reset();ModalPopup.style.display='';" />

另外:

有些项(下拉框、复选列表、单选列表)我们只要有默认值,reset并不会把它们清除掉,而是自动设置成默认项。

<asp:TextBox ID="TextBox1" runat="server">aaa</asp:TextBox>

<asp:CheckBoxList ID="CheckBoxList1" runat="server">
<asp:ListItem>aaa</asp:ListItem>
<asp:ListItem Selected="True">bbb</asp:ListItem>
<asp:ListItem Selected="True">ccc</asp:ListItem>
</asp:CheckBoxList>

<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem Selected="True">aa</asp:ListItem>
<asp:ListItem>bb</asp:ListItem>
<asp:ListItem>cc</asp:ListItem>
</asp:RadioButtonList>

<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>aa</asp:ListItem>
<asp:ListItem>bb</asp:ListItem>
<asp:ListItem Selected="True">cc</asp:ListItem>
</asp:DropDownList>
<asp:ListBox ID="ListBox1" runat="server">
<asp:ListItem>a</asp:ListItem>
<asp:ListItem Selected="True">b</asp:ListItem>
<asp:ListItem>c</asp:ListItem>
</asp:ListBox>

onsubmit,onreset的用法:

<script type="javascript">
function check(theform)
{
这里写你要检查一些输入是否合法
如果合法就提交表单,去执行你的下个页面(uurl)
如果不合法就return false;这样就不提交页面
}
function tips(theform)
{
表单重置会清空当前内容,您确定要重置表单吗?

}
</script>
<form name="form1" action="uurl" onsubmit="return(check(this));" onreset="return tips(this);">
....
....
</form>

reture false;表示该事件完成之后,不再交给IE默认处理了,
一般提交按钮的动作是这样:
点击按钮->OnSubmit() ------ return true -> submit()
|
|--->return false 就不往下执行submit()了。

<think>好的,我现在需要回答用户关于JSP表单reset按钮功能的问题。首先,我要确保自己正确理解reset按钮的作用。用户可能已经知道表单的基本概念,但需要明确reset的具体功能以及实际应用中的注意事项。 根据提供的引用内容,特别是引用[1]和引用[4],reset按钮通常用于重置表单到初始状态。在JavaScript中,可以通过调用reset()方法或者使用jQuery的trigger("reset")来实现。引用[2]中提到在form中使用button时可能意外触发提交,这说明按钮类型很重要。而引用[4]展示了如何优雅地重置表单,比如使用Vue.js中的resetFields方法。 接下来,我需要将这些信息整合成一个清晰的中文回答。首先解释reset按钮的基本功能,即清空用户输入并恢复默认值。然后,给出JSP中的示例代码,说明如何添加reset按钮,并强调type="reset"的重要性,避免误操作为submit类型。 同时,需要提醒用户注意点,比如重置不是清除,而是恢复到页面加载时的状态,以及可能的数据绑定问题,这在引用[4]中提到过。此外,引用[2]中的问题说明,如果按钮类型错误,可能导致表单意外提交,这点需要特别强调。 最后,生成相关问题,帮助用户进一步了解相关主题,比如与提交按钮的区别、JavaScript重置方法、常见问题等。确保问题覆盖用户可能感兴趣的其他方面。 现在需要检查是否所有要点都涵盖,并且引用正确。例如,在解释reset功能时引用[1][4],在按钮类型注意事项时引用[2],在JSP示例时引用[3]。确保回答结构清晰,分点明确,并自然融入引用标记。</think>### JSP Form表单Reset按钮功能说明 在JSP中,表单的**Reset按钮**(重置按钮)用于将表单内所有输入字段的值**重置为页面加载时的初始状态**。以下是其核心作用和实现细节: 1. **核心功能** - **清空/恢复用户输入**:点击后,所有文本框、下拉框、单选/多选框等表单元素的值会被还原到初始值(即页面首次加载时的默认值)[^1][^4]。 - **不触发数据提交**:与提交按钮(Submit)不同,重置操作仅作用于前端页面,不会向服务器发送请求[^2][^3]。 2. **JSP中的实现示例** ```jsp <form name="teacForm" action="submitform.jsp" method="post"> <input type="text" name="username" value="初始值"> <input type="password" name="password"> <button type="reset">重置表单</button> </form> ``` - 必须设置`type="reset"`,否则按钮可能默认触发提交行为(如引用[2]中的问题)[^2]。 - 若需自定义初始值,可通过JavaScript或后端代码动态设置默认值[^4]。 3. **注意事项** - **重置 ≠ 清空**:若字段初始值非空,重置后会恢复为这些值,而非全部置空。例如:输入框初始值为`"初始值"`,用户修改后点击重置,会还原到该文本。 - **框架兼容性**:在使用如Vue.js的`el-form`组件时,推荐调用`resetFields()`方法(如引用[4]所示),而非直接操作DOM。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值