reset button not resetting all form elements

I have a simple reset button, but the checkboxes and and the radio buttons do not reset to their pervious state.
<button id="resetButton" type="reset" value ="reset" class="btn btn-white" >Reset form</button>

Open in new window


Any ideas why ?
LVL 1
AleksAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rainer JeschorCommented:
Hi,
could you please post the HTML source of your form?

Checkboxes and radio Buttons should also be reset to their initial value.

Thanks and HTH
Rainer
0
Dave BaldwinFixer of ProblemsCommented:
A "Reset" restores a form to the state it was in when the page was loaded.  It does not clear all the entries.
0
zephyr_hex (Megan)DeveloperCommented:
It's hard to say without seeing your form.  Is the button inside the form tags?  Have you checked your browser dev tool to verify an error is not being thrown behind the scenes?

Here is a working example:

<form>
    <input type="text" value="reset">
<button id="resetButton" type="reset" value ="reset" class="btn btn-white" >Reset form</button>
</form>

Open in new window


JSFiddle example
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

AleksAuthor Commented:
I will post the HTML in a couple hours, I know its strange radio buttons and checkboxes don't go back to how they were.
0
zephyr_hex (Megan)DeveloperCommented:
I updated my Fiddle demo with radio buttons.


<form>
    <input type="text" value="reset">
    <input type="radio" name="color" value="black">Black
    <input type="radio" name="color" value="white">White
    <button id="resetButton" type="reset" value="reset" class="btn btn-white">Reset form</button>
</form>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
AleksAuthor Commented:
I found out that elements that have a class do not reset. These are examples of the form elements that do not reset:

<div class="i-checks"><input name="chktype" type="checkbox" id="chktype" value="" checked="checked"/></div>

 <div class="form-group"> <div class="i-checks">
                                            <label>
                                              <input name="archivedcont" type="radio" form="form1" value="0" checked="checked" />
                                              Active</label>
                                            &nbsp;&nbsp;<label>
                                              <input name="archivedcont" type="radio" form="form1"  value="1" />
                                              Archived </label>
                                            &nbsp;&nbsp;<label>
                                              <input name="archivedcont" type="radio" form="form1" value="%" />
                                              All</label></div></div>

Any element with the I-checks class will not reset.

I decided to alternatively simply add a button that links to this same page, so it basically reloads resetting the form while at it  :)  



Any ideas ?
0
Dave BaldwinFixer of ProblemsCommented:
You're misunderstanding the reset function.  'reset' does not 'clear' the elements, it 'resets' them to the state they were in when you loaded the page.  Since you have checked="checked" on several elements, that is the state they will be 'reset' to.  Same with elements that have the 'value' predefined.
0
AleksAuthor Commented:
I understand how it works. Thing is .. the form is blank to begin with, so in this particular case it works. But Ill look into the reset on another occasion.
0
Dave BaldwinFixer of ProblemsCommented:
The form code that you posted just above here is Not blank.
0
AleksAuthor Commented:
That is correct. But those are defaults, so when it loads again it loads the set defaults. But Ill need the reset later next week. For now I have to focus on other things.
0
Dave BaldwinFixer of ProblemsCommented:
That's what I'm trying to say.  'reset' does a reset to the default values that were there when the page was loaded.  If in stead you want to 'clear' all the values and unclick all the buttons, you have to write a JavaScript routine to do that.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.