javascript - 单击按钮重置所有表单数据

Question

我的重置按钮代码是

<div class="span6 pagination-right">
            <input id="clearData" type="button" class="btn"  data-add-person-manually-reset="#"
                value=<spring:message code="common.reset" />>&nbsp;&nbsp;&nbsp;
            <input type="button" class="btn"
                data-add-manually="/recipient/person/add"
                value=<spring:message code="common.add" />>
            </div>

我想使用 jQuery 清除以下字段以重置 div id Clear1 和 Clear 2在调用 Reset 时要清除的字段是 来自 div id Clear1

1. 名字姓氏组织职位

   **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:&nbsp;</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>>&nbsp;&nbsp;<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>&nbsp;
                                       <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>&nbsp;
                                       <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>&nbsp;
                                       <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>&nbsp;
                                       <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>
                                       &nbsp;
                                       <form:input
                       cssClass="input-medium" path="addressList[4].number" />
   
               </h:drag-drop>
               </div>
               </div>
               </br>
               <div></br> &nbsp; </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 时重置提到的值

Answer 1

你可以使用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 标签应该在那里。

<form>
<input type="text" name="fname"><br>
<input type="text" name="lname"><br>
<input  type="reset" value="Reset"></input >
</form>

Demo

ResetDemo

根据您的定制要求

对于 CodeVal，您可以使用以下代码。对于arraylist5，在ArrayList5中定义一个自定义类，假设araylist ans使用如下。

$(function(){
    $("#clearData").click(function(){
        $(".dragControl").val('');
        $(".araylist").val('');
    });
});