单击按钮重置所有Formdata [英] Reset all Formdata on click of a button
本文介绍了单击按钮重置所有Formdata的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的重置按钮代码为
<div class="span6 pagination-right">
<input id="clearData" type="button" class="btn" data-add-person-manually-reset="#"
value=<spring:message code="common.reset" />>
<input type="button" class="btn"
data-add-manually="/recipient/person/add"
value=<spring:message code="common.add" />>
</div>
我想使用jQuery清除以下字段以重置div ID Clear1和Clear 2 重置时需要清除的字段是 来自div id Clear1
I want to clear the the following fields using jQuery to reset the div id Clear1 and Clear 2 fields to clear on call of Reset are From div id Clear1
-
名字 姓氏组织职位
firstName lastname organizations positions
**From div id Clear2**
codeval1
codeval2
codeval3
codeval4
codeval5
addressList5.type
<div class="row-fluid" id="addToGroup">
<div
class="row-fluid form-inline control-group<c:if test='${empty groups}'> hidden</c:if>"
id="addToGroupForm">
<label class="control-label">Add to Group: </label>
<div class="controls" id="showGroups">
<div class="span9">
<select class="span9" id="addGroupId">
<option value="0" disabled selected><spring:message code="group.select"/></option>
<c:forEach var="group" items="${groups}">
<option value="${group.id}">${group.name}</option>
</c:forEach>
</select>
</div>
</div>
</div>
<div id="added" class="control-group">
<label class="control-label <c:if test='${empty personForm.groupList}'>hidden</c:if>">Added to Group</label>
<div class="controls">
<c:forEach var="group" varStatus="status"
items="${personForm.groupList}">
<div class="row-fluid form-inline"
data-add-info='{"id": "${group.id}", "name": "${group.name}"}'>
<div class="span3">
<input type="hidden" name="groupList[${status.index}]"
value="${group.id}" />
<button class="btn" type="button"><i class="icon-remove icon-16"></i></button>
</div>
<div class="span5">${group.name}</div>
</div>
</c:forEach>
</div>
</div>
</div>
<br/>
<br/>
<br/>
<h:field path="owner" code="organization.owner" required="true">
<c:choose>
<c:when test="${empty personForm.id}">
<form:select path="owner">
<form:options items="${departments}" itemLabel="name"
itemValue="id" />
</form:select>
</c:when>
<c:otherwise>
<label class="left-align">${personForm.owner.name} </label>
<form:hidden path="owner"/>
</c:otherwise>
</c:choose>
</h:field>
<h:field path="visibleToChildren" code="organization.parent"
labelRequired="false">
<div class="row-fluid form-inline">
<input type="checkbox" name="visibleToChildren"
<c:if test='${personForm.visibleToChildren}'>checked</c:if>> <label><spring:message
code="organization.visible.children.all" /></label>
</div>
</h:field>
</div>
<div class="span6" id="Clear2">
<c:set var="mobileIndex" value="1"></c:set>
<c:set var="fixedIndex" value="1"></c:set>
<c:if test="${personForm.addressList[0].fixedLine == true}">
<c:set var="codeval1" value="person.fixed.number"></c:set>
</c:if>
<c:if test="${personForm.addressList[0].fixedLine != true}">
<c:set var="codeval1" value="person.mobile.number"></c:set>
</c:if>
<c:if test="${personForm.addressList[1].fixedLine == true}">
<c:set var="codeval2" value="person.fixed.number"></c:set>
</c:if>
<c:if test="${personForm.addressList[1].fixedLine != true}">
<c:set var="codeval2" value="person.mobile.number"></c:set>
</c:if>
<c:if test="${personForm.addressList[2].fixedLine == true}">
<c:set var="codeval3" value="person.fixed.number"></c:set>
</c:if>
<c:if test="${personForm.addressList[2].fixedLine != true}">
<c:set var="codeval3" value="person.mobile.number"></c:set>
</c:if>
<c:if test="${personForm.addressList[3].fixedLine == true}">
<c:set var="codeval4" value="person.fixed.number"></c:set>
</c:if>
<c:if test="${personForm.addressList[3].fixedLine != true}">
<c:set var="codeval4" value="person.mobile.number"></c:set>
</c:if>
<c:if test="${personForm.addressList[4].fixedLine == true}">
<c:set var="codeval5" value="person.fixed.number"></c:set>
</c:if>
<c:if test="${personForm.addressList[4].fixedLine != true}">
<c:set var="codeval5" value="person.mobile.number"></c:set>
</c:if>
<div class="span2"></div><h6><label style="text-align: left;"> <spring:message code="numbers.ordering" /></label> </h6>
<div class="span12">
<div class="span1"></div>
<div data-sortable="#" class="span10">
<h:drag-drop path="addressList[0]" code="${codeval1}" cssClass="dragControl">
<div class="input-prepend">
<span class="add-on">+</span>
<form:input class="add-on" path="addressList[0].countryCode"
cssClass="input-micro" />
<form:hidden path="addressList[0].fixedLine" />
</div>
<form:input
cssClass="input-medium" id="prependedInput"
path="addressList[0].number" />
</h:drag-drop>
<h:drag-drop path="addressList[1]" code="${codeval2}" cssClass="dragControl">
<div class="input-prepend">
<span class="add-on">+</span>
<form:input path="addressList[1].countryCode"
cssClass="input-micro" />
<form:hidden path="addressList[1].fixedLine" />
</div>
<form:input
cssClass="input-medium" path="addressList[1].number" />
</h:drag-drop>
<h:drag-drop path="addressList[2]" code="${codeval3}" cssClass="dragControl">
<div class="input-prepend">
<span class="add-on">+</span>
<form:input path="addressList[2].countryCode"
cssClass="input-micro" />
<form:hidden path="addressList[2].fixedLine" />
</div>
<form:input
cssClass="input-medium" path="addressList[2].number" />
</h:drag-drop>
<h:drag-drop path="addressList[3]" code="${codeval4}" cssClass="dragControl">
<div class="input-prepend">
<span class="add-on">+</span>
<form:input path="addressList[3].countryCode"
cssClass="input-micro" />
<form:hidden path="addressList[3].fixedLine" />
</div>
<form:input
cssClass="input-medium" path="addressList[3].number" />
</h:drag-drop>
<h:drag-drop path="addressList[4]" code="${codeval5}" cssClass="dragControl">
<div class="input-prepend">
<span class="add-on">+</span>
<form:input path="addressList[4].countryCode"
cssClass="input-micro" />
<form:hidden path="addressList[4].fixedLine" />
</div>
<form:input
cssClass="input-medium" path="addressList[4].number" />
</h:drag-drop>
</div>
</div>
</br>
<div></br> </div>
<h:field path="addressList[5]" code="person.email.address1">
<form:input path="addressList[5].value" cssClass="input-larger" />
<spring:bind path="addressList[5].type">
<input id="addressList5.type" type="hidden" class="input-micro"
name="addressList[5].type" value="EMAIL">
</spring:bind>
</h:field>
<h:field path="addressList[6]" code="person.email.address2">
<form:input path="addressList[6].value" cssClass="input-larger" />
<spring:bind path="addressList[6].type">
<input id="addressList5.type" type="hidden" class="input-micro"
name="addressList[6].type" value="EMAIL">
</spring:bind>
</h:field>
<h:field path="addressList[7]" code="person.email.address3">
<form:input path="addressList[7].value" cssClass="input-larger" />
<spring:bind path="addressList[7].type">
<input id="addressList5.type" type="hidden" class="input-micro"
name="addressList[7].type" value="EMAIL">
</spring:bind>
</h:field>
<h:field path="addressList[8]" code="person.email.address4">
<form:input path="addressList[8].value" cssClass="input-larger" />
<spring:bind path="addressList[8].type">
<input id="addressList5.type" type="hidden" class="input-micro"
name="addressList[8].type" value="EMAIL">
</spring:bind>
</h:field>
<h:field path="addressList[9]" code="person.email.address5">
<form:input path="addressList[9].value" cssClass="input-larger" />
<spring:bind path="addressList[9].type">
<input id="addressList5.type" type="hidden" class="input-micro"
name="addressList[9].type" value="EMAIL">
</spring:bind>
</h:field>
</div>
我要使用的重置jQuery代码就像
$(function(){
$('#clearData').click(function(){
});
});
但是我不确定如何通过单击RESET来编写代码以重置提及的值
推荐答案
您可以使用reset()
<form id="frm1">
<input type="text" name="fname"><br>
<input type="text" name="lname"><br><br>
<input type="button" onclick="formReset()" value="Reset form"/>
</form>
JS
function formReset()
{
document.getElementById("frm1").reset();
}
对于type=reset，在这种情况下，form标签应该在其中.
With type=reset, in this case form tag should be there.
<form>
<input type="text" name="fname"><br>
<input type="text" name="lname"><br>
<input type="reset" value="Reset"></input >
</form>
根据您的自定义要求
对于CodeVal，您可以使用以下代码.对于arraylist5，在ArrayList5中定义一个自定义类，假设araylist和下面的用法一样.
For CodeVal, you can use below code. For arraylist5 define one custom class in ArrayList5, suppose araylist ans use as below.
$(function(){
$("#clearData").click(function(){
$(".dragControl").val('');
$(".araylist").val('');
});
});
这篇关于单击按钮重置所有Formdata的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
