my Reset Button code is
<div class="span6 pagination-right">
<input id="clearData" type="button" class="btn" data-add-person-manually-reset="#"
value=<spring:message code="mon.reset" />>
<input type="button" class="btn"
data-add-manually="/recipient/person/add"
value=<spring:message code="mon.add" />>
</div>
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>
The reset jQuery code i want to use is like
$(function(){
$('#clearData').click(function(){
});
});
However Im not sure How do I go about writing the code to reset mentioned values on click of RESET
my Reset Button code is
<div class="span6 pagination-right">
<input id="clearData" type="button" class="btn" data-add-person-manually-reset="#"
value=<spring:message code="mon.reset" />>
<input type="button" class="btn"
data-add-manually="/recipient/person/add"
value=<spring:message code="mon.add" />>
</div>
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>
The reset jQuery code i want to use is like
$(function(){
$('#clearData').click(function(){
});
});
However Im not sure How do I go about writing the code to reset mentioned values on click of RESET
Share Improve this question edited Sep 6, 2013 at 5:11 The Alpha 146k29 gold badges293 silver badges311 bronze badges asked Sep 6, 2013 at 5:10 ronanronan 4,67213 gold badges53 silver badges68 bronze badges 3-
Simply a reset button can clear all form inputs,
<input type="reset" />. – The Alpha Commented Sep 6, 2013 at 5:15 - @SheikhHeera How do I use <input type="reset" /> in my code as it is already having many tabs – ronan Commented Sep 6, 2013 at 5:34
-
Well,
resetis a form element and put this inside theformwhich you want to reset. – The Alpha Commented Sep 6, 2013 at 5:35
2 Answers
Reset to default 5You can use 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();
}
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>
Demo
ResetDemo
As per your custom requirement
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('');
});
});
$.each( $("#test input[type=\"text\"]"), function(index, ele){
ele.val("");
});
where "#test" is the form id