rain13 Posted June 29, 2014 Share Posted June 29, 2014 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 More sharing options...
davej Posted June 29, 2014 Share Posted June 29, 2014 Have you tried it? Link to comment Share on other sites More sharing options...
rain13 Posted June 29, 2014 Author Share Posted June 29, 2014 Yes, with firefefox. Link to comment Share on other sites More sharing options...
davej Posted June 29, 2014 Share Posted June 29, 2014 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 More sharing options...
rain13 Posted June 29, 2014 Author Share Posted June 29, 2014 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 More sharing options...
davej Posted June 29, 2014 Share Posted June 29, 2014 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 More sharing options...
rain13 Posted June 29, 2014 Author Share Posted June 29, 2014 (edited) 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 June 29, 2014 by SoItBegins Link to comment Share on other sites More sharing options...
davej Posted June 29, 2014 Share Posted June 29, 2014 <!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> 1 Link to comment Share on other sites More sharing options...
rain13 Posted June 29, 2014 Author Share Posted June 29, 2014 Thank you. Wasn't aware of defaultChecked Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now