单击按钮重置所有Formdata

时间:2013-09-06 05:10:39

标签: javascript jquery

我的重置按钮代码

<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 在重置调用时清除字段         来自div id Clear1

  1. 的firstName 姓氏组织职位

    **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>
    
  2. 我要使用的重置jQuery代码就像

    $(function(){
         $('#clearData').click(function(){
    
        }); 
    
    });
    

    但我不确定如何编写代码以点击RESET重置上述值

2 个答案:

答案 0 :(得分:5)

您可以使用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使用如下。

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

答案 1 :(得分:0)

$.each( $("#test input[type=\"text\"]"), function(index, ele){
    ele.val("");
 });

其中“#test”是表单id