0

i have a form with about 50 inputfields, lists, checkbox and selectes. I got an submit- and an reset-button. Id like to

  • disable the reset-button if no changes are made,
  • activate if the values are changed by user or javascript and
  • redeactivate if the user removed his changes.

Is there any build-in function in the browser to know if a reset-button make sense?

Grim
  • 1,938
  • 10
  • 56
  • 123
  • 1
    No, you'll have to write custom JavaScript to deal with all of your specific requirements. – Billy Moat Mar 12 '13 at 09:53
  • There is no such built in function. But you can write your own. – Gaurav Pandey Mar 12 '13 at 09:53
  • you first have to try something on your own to make this work – Anusha Mar 12 '13 at 10:00
  • This is pretty easy to do. Just initially disable the reset button and bind listeners to all input fields inside your form (can be done dynamically). On each update (typed in text) you check if each field is empty (don't forget to trim) and then only enable reset if `NOT` all fields are empty. –  Mar 12 '13 at 10:08

2 Answers2

3

Why not just deactivate/disabled the reset button by default on the page and use jquery .change to listen for changes and activate/enable the button.

You can do something like this: http://jsfiddle.net/gNS8L/

If an input fields value has changed (note: you can leave out the part with the originalvalue, where it checks if it has changed back to original) you take away the disabled attribute from the button. If the button is pressed it gets disabled again, you can also disable it if the value changes back to original.

Edit: so you do this to reset it on original value: http://jsfiddle.net/gNS8L/1/

Martin Turjak
  • 20,896
  • 5
  • 56
  • 76
  • if i write "test123" the reset goes active, if i rewrite back to "test", the reset does not get redeactivated. Can you edit your answer? – Grim Mar 12 '13 at 10:17
  • i added another jsfiddle that shows the deactivation of button when value set back to original http://jsfiddle.net/gNS8L/1/. – Martin Turjak Mar 12 '13 at 10:20
  • here I put together a quick and lazy illustration that works with multiple input fields http://jsfiddle.net/gNS8L/2/ , so that you can get the idea (it can be done simpler if you put the listener on the whole form and its values) – Martin Turjak Mar 12 '13 at 11:06
2

Use the jquery dirty form plugin, it is exactly made for this

Martin Turjak
  • 20,896
  • 5
  • 56
  • 76
Catalin
  • 11,503
  • 19
  • 74
  • 147