CODEWITHSUNDEEP
javascripthtmlinputreset
user2847749
user2847749

Reputation: 369

How to call reset on variety of inputs from OUTSIDE the form

I have a form with various kinds of inputs, text, drop downs, radial buttons, sliders, and checkboxes. My "Reset" button is outside of the form (above the form). Is there a way to click the button and set all of the inputs back to default?

I have a Twitter Bootstrap accordion, with the reset button on the accordion header. The form is below inside of the accordion. I want to be able to clear the form whether the accordion is expanded or collapsed.

Example:

Accordion heading (Expanded) Reset

input fields

Accordion heading (collapsed) Reset

My reset is in my html like so: 

<a id="icon-Reset" href="#form" class="btn-mini" type="reset"><i class="icon-refresh"  title="Reset" ></i></a>

and I was trying to do this in my javascript file:

#icon-Reset.click(function(){
$('#form').get(0).reset();
});

but I cannot get anything to work.

To be more clear, here is the top of the html that has the above html line in it: 

<div id="side-bar-container">
<div id="sideBar">
    <div class="accordion" id="mainAccordion">
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse"
                    data-parent="#mainAccordion" data-target="#collapseOne"> <i
                    class="icon-chevron"></i>Accordion Heading1 
                </a>
                <a id="icon-Reset" href="#form" class="btn-mini" type="reset"><i class="icon-refresh"  title="Reset" ></i></a> 
            </div>
            <div id="collapse" class="accordion-body collapse in">
                <div class="accordion-inner scrollable">
                    <div id="Accordion1">
                        <form id="form"class="form-search form-horizontal">
                            <fieldset>

I am VERY new to Javascript, HTML, etc, so please be detailed...Thanks!!

Upvotes: 0

Views: 4350

Answers (1)

suff trek
suff trek

Reputation: 39777

Your approach was correct, but you have to attach form reset action to the click event of your button. It can be any control, assuming it's a span with id "reset"

<span id="reset">Reset</span>

You can make clicking on it reset form with id "form" like this:

$('#reset').click(function() {

    $("#form")[0].reset();

})

This code attaches action to span's "onclick" event and inside of action gets the form and resets it. Here's a small demo - fill the form and then click Reset:

http://jsfiddle.net/29ewk/

Upvotes: 2

Related Questions