0

I need help with a reset button that will clear all the values selected or entered by the user. My code example is below. I have used JS before to reset all the values from a form but in this case i only need to clear a section of the form. My code is below: So each Fieldset has either text box or drop down.

 <div class="column">
                        <p class="label item-information-fields">New Item</p>

                        <div class="item-information-fields">
<fieldset class="input-section">
    <label for="tItemNickname"><span class="required">*</span>Item Name</label>
    <input type="text" class="input" name="tItemNickname" id="tItemNickname" maxlength="15" />
</fieldset>

<fieldset class="input-section">
    <label for="sItemType"><span class="required">*</span>Item Type</label>
    <select name="sItemType" id="sItemType">
        <option value="">Select</option>
        <option value="1">Cash/Certificate</option>
        <option value="2">Jewelry</option>
        <option value="3">Clothing/Home Products</option>
        <option value="4">Arts/Crafts</option>
        <option value="5">Media, Music/Video</option>
        <option value="6">Electronics</option>
        <option value="7">Computers</option>
        <option value="8">Collectibles</option>
        <option value="9">Sports Equipment</option>
        <option value="10">Liquor/Wine</option>
        <option value="11">Animals</option>
        <option value="12">Document Reconstruction</option>
        <option value="13">Firearm</option>
        <option value="14">Hazardous Material</option>
        <option value="16">Event Tickets</option>
        <option value="15">Other</option>
    </select>
</fieldset>

    <fieldset class="input-section hide" id="otherItemType">
    <label for="tOtherItem"><span class="required">*</span>Other Item Type</label>
    <input type="text" class="input" name="tOtherItem" id="tOtherItem" maxlength="15" />
</fieldset>

<fieldset class="input-section">
    <label for="tItemDescription"><span class="required">*</span>Item Description</label>
    <textarea class="textarea counter" name="tItemDescription" id="tItemDescription" maxlength="120"></textarea>
</fieldset>

<fieldset class="input-section input-section-short">
    <label for="tPurchaseDate"><span class="required">*</span>Purchase Date (mm/dd/yyyy)</label>
    <input class="input hasDatePicker enable-sundays" name="tPurchaseDate" id="tPurchaseDate" type="text" />
</fieldset>
<p class="note">If there was no purchase date, use the date the item was shipped.</p>

<fieldset class="input-section borders">
    <label for="tAmountRequested"><span class="required">*</span>Amount Requested</label>
    <span class="dollarWrap">
        <span class="input-dollar-sign">$</span>
        <input class="input" name="tAmountRequested" id="tAmountRequested" type="text" />
    </span>
</fieldset>

// Button to clear the form.

<input type="reset" value="Reset" />
user2149910
  • 87
  • 3
  • 12
  • 1
    what section of the form? and can you puth this in a js fiddle? – Todd Dec 18 '14 at 18:34
  • possible duplicate of [How do you remove all the options of a select box and then add one option and select it with jQuery?](http://stackoverflow.com/questions/47824/how-do-you-remove-all-the-options-of-a-select-box-and-then-add-one-option-and-se) – Harry Dec 18 '14 at 18:35
  • Clarify what are the selected values by the user and how the user is selecting them. – Roman C Dec 18 '14 at 18:38
  • Enclose your code in a
    tag, then put your reset button inside and Done!
     – Ragnar Dec 18 '14 at 18:41

1 Answers1

1

Or something like this:

$(function(){
   $("#ClearItems").click(function(){
    $("#myForm")[0].reset();
  });
});

Working fiddle: http://jsfiddle.net/oqcqwyy4/

Hackerman
  • 12,139
  • 2
  • 34
  • 45