Jump to content

Reset button question


rain13
 Share

Recommended Posts

HelloI have form with radio buttons that that all have onChange event which gets called when I click on these radios. My problem is that when I use reset button onChange event does not get called. Is there way to make such reset button that also fires onChange event for all the radio buttons?

Link to comment
Share on other sites

Well, I don't know what you tried because it seems easy to apply a handler to the button.

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><script>window.onerror = function(m, u, l){alert('Javascript Error: '+m+'nURL: '+u+'nLine Number: '+l);return true;}</script><script>function change(el) {alert('changed: '+ el);}</script></head><body><form><label>R1<input type="radio" onchange="change(this)" name="rad1"/></label><label>R2<input type="radio" onchange="change(this)" name="rad1"/></label><label>R3<input type="radio" onchange="change(this)" name="rad1"/></label><label>R4<input type="radio" onchange="change(this)" name="rad1"/></label><input type="reset" id="rstbtn" onclick="change(this)" value="Reset"/></form></body>    </html>
Link to comment
Share on other sites

I mean if I have something like this:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style></style><script>window.onerror = function(m, u, l){alert('Javascript Error: '+m+'nURL: '+u+'nLine Number: '+l);return true;}</script><script>function change(el) {alert('changed: '+ el);}</script></head><body><form><label>R1<input type="radio" onchange="change(this)" name="rad1"/></label><label>R2<input type="radio" onchange="change(this)" name="rad1"/></label><label>R3<input type="radio" onchange="change(this)" name="rad2"/></label><label>R4<input type="radio" onchange="change(this)" name="rad2"/></label><input type="reset" id="rstbtn" value="Reset"/></form></body>    </html>

And now I want that to call change() for every radio that were altered by reset button. I mean if you select one radio then it should call it for this radio, if you've selected one radio from rad1 and other from rad2 then change should be called 2 times as reset button is clearing 2 radios.

Link to comment
Share on other sites

Radio buttons are meant to be exclusive so that only one of them can be selected. Maybe you want checkboxes?

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><script>window.onerror = function(m, u, l){alert('Javascript Error: '+m+'nURL: '+u+'nLine Number: '+l);return true;}</script><script>function change(el) {alert('changed: '+ el.name);}function rst(el){var list = el.parentNode.getElementsByTagName('INPUT');for (var i=0,len=list.length ; i<len ; i++){if (list[i].type=='checkbox' && list[i].checked==true){change(list[i]);}}}</script></head><body><form id="form1"><label>R1<input type="checkbox" onchange="change(this)" name="r1"/></label><label>R2<input type="checkbox" onchange="change(this)" name="r2"/></label><label>R3<input type="checkbox" onchange="change(this)" name="r3"/></label><label>R4<input type="checkbox" onchange="change(this)" name="r4"/></label><input type="reset" onclick="rst(this)" value="Reset"/></form></body>    </html>
Link to comment
Share on other sites

I have radios because I ha yes/no options but I was wondering if there is any other way than yourrstI was curious if there is something that automatically would call change() with out requiring rst()? In my case some may be checked by default and some may be unchecked therefore it wouldn't be as simple as list.checked==true and it would require some playing with arrays so I was wondering if there is any easier, built in/native way to do that.

Edited by SoItBegins
Link to comment
Share on other sites

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><script>window.onerror = function(m, u, l){alert('Javascript Error: '+m+'nURL: '+u+'nLine Number: '+l);return true;}</script><script>function change(el) {alert('changed: '+ el.name);}function rst(el){var list = el.parentNode.getElementsByTagName('INPUT');for (var i=0,len=list.length ; i<len ; i++){if (list[i].type=='checkbox' && list[i].checked!=list[i].defaultChecked){change(list[i]);}}}</script></head><body><form id="form1"><label>R1<input type="checkbox" onchange="change(this)" name="r1" checked/></label><label>R2<input type="checkbox" onchange="change(this)" name="r2"/></label><label>R3<input type="checkbox" onchange="change(this)" name="r3" checked/></label><label>R4<input type="checkbox" onchange="change(this)" name="r4"/></label><input type="reset" onclick="rst(this)" value="Reset"/></form></body>    </html>
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...