Forum Moderators: open
I want to enable/disable submit button based on whether data
inserted in my form has changed. Is it possible in javascript?
I imagine there should be events used but how can I hold and remember the old value? Also, there must be some mechanism watching all values at once. Any ideas?
regards,
Paul
Is it possible in javascript?
Yes! But, it can get complex if your form is complex.
mechanism watching all values at once.
As far as I know, there is not. There is the onchange event, but that can only be defined on the specific elements like <input>, <textarea>, and <select>. So, if you want to make a mechanism that watches them all at once, you can loop through those elements and attach an onchange event to them. You could have them all point to a single function, whose purpose is to check values against the original values, then toggle the submit button based on that.
hold and remember the old value?
I don't know of a native way to hold original values (at least not for all types of elements <input>,<textarea>,<select>). So, typically what I do is I create a second, hidden version of each object with the original value. So, if you have a <textarea name="comment"></textarea>, you'd also have a <input type="hidden" name="comment_original" value="...original value here..." />.
Then, when you loop through and check, you just look to see if there's a name+'_original' input on the page, and compare against that. :)
So my solution is:
1. On every input on my form I care there is onfocus event that checks if original values have been saved if no, that means its the first time ever someone interact with form. So all values must be saved (calling getFormString and saving it in siple string var). Every next attempt to save original data will be ignored.
2. Every input has onkeyup(text inputs), onchange(selects) or onmouseout(checkbox) event that calls function that simply retrieves current values (again getFormString) and compares it with original values. If it differs savebutton is enabled if not it is disabled.
3. Also I have one select and one checkbox that cause to change all other selects, checkboxes - in this situation im saving all values excluding these two.
It works and is great :)
Only one small thing must be improved: checkboxes. Because its on mouseout there is this lateness before state of submit changes. But i've used onmouseout because onchange seems to be too early and sometimes it acts not like it should. Any ideas on hot to improve it?
