Frank P Posted November 18, 2013 Share Posted November 18, 2013 I have the weirdest thing with this code: <!DOCTYPE HTML> <html> <head> <style type="text/css"> table { width: 100%; border: 1px solid black; border-collapse: collapse; } td { border: 1px solid black; } button { height: 20px; display: none; } a { text-decoration: underline; } .click-text { color: darkorange; } .click-text:hover { color: blue; cursor: pointer; } .elucidation-row { display: none; } .score-cell, .uncheck-cell { width: 100px; } </style> <script> function showAllItems() { var elRows = document.getElementsByClassName('elucidation-row'); for (var p=0; p<elRows.length; p++) { elRows[p].style.display = 'table-row'; } } function highlightItem(itemId,buttonId) { document.getElementById(itemId).style.backgroundColor = 'yellow'; document.getElementById(buttonId).style.display = 'inline'; } function unCheckRadios(name) { var radios = document.getElementsByName(name); for (var n=0; n<radios.length; n++) { radios[n].checked = false; } } </script> </head> <body> <form action=""><!-- older IEs do weird things with a table with colspan and a form inside --> <table> <tbody> <tr> <td class="divider-thin" colspan="7"><a class="click-text" id="toggle-all" onclick="showAllItems()">Show all items</a></td> </tr> <tr class="elucidation-row section-A" id="A1a-row"> <td class="item-cell">Item</td> <td class="uncheck-cell"><button id="A1a-button" onclick="unCheckRadios('A1a')">De-check</button></td> <td class="score-cell"><input type="radio" name="A1a" value="1" onclick="highlightItem('A1a-row','A1a-button')"></td> <td class="score-cell"><input type="radio" name="A1a" value="2" onclick="highlightItem('A1a-row','A1a-button')"></td> <td class="score-cell"><input type="radio" name="A1a" value="3" onclick="highlightItem('A1a-row','A1a-button')"></td> <td class="score-cell"><input type="radio" name="A1a" value="4" onclick="highlightItem('A1a-row','A1a-button')"></td> <td class="score-cell"><input type="radio" name="A1a" value="5" onclick="highlightItem('A1a-row','A1a-button')"></td> </tr> </tbody> </table> </form> <p class="elucidation-row">Text line</p> </body> </html> Open it, click 'Show all items', check a radio button, click the appearing 'De-check' button, and see that the whole table row is non-displayed again. It looks as if the unCheckRadios function recalls the executed showAllItems function. Why is that, and how do I solve it? Quote Link to comment https://forums.phpfreaks.com/topic/284012-why-does-my-uncheckradios-function-recall-other-functions/ Share on other sites More sharing options...
Psycho Posted November 18, 2013 Share Posted November 18, 2013 The form is getting submitted. Quote Link to comment https://forums.phpfreaks.com/topic/284012-why-does-my-uncheckradios-function-recall-other-functions/#findComment-1458734 Share on other sites More sharing options...
Frank P Posted November 18, 2013 Author Share Posted November 18, 2013 Hey Psycho, Thanks for responding. But why is the form submitted then? And why is it not submitted if I have the table row displayed from the start? Quote Link to comment https://forums.phpfreaks.com/topic/284012-why-does-my-uncheckradios-function-recall-other-functions/#findComment-1458772 Share on other sites More sharing options...
cyberRobot Posted November 18, 2013 Share Posted November 18, 2013 Off hand, I'm not sure why the form submits in one case and not the other. But to prevent the form from submitting, you could try modifying the onclick event to something like this: <td class="uncheck-cell"><button id="A1a-button" onclick="unCheckRadios('A1a'); return false;">De-check</button></td> Quote Link to comment https://forums.phpfreaks.com/topic/284012-why-does-my-uncheckradios-function-recall-other-functions/#findComment-1458802 Share on other sites More sharing options...
Psycho Posted November 18, 2013 Share Posted November 18, 2013 Hey Psycho, Thanks for responding. But why is the form submitted then? And why is it not submitted if I have the table row displayed from the start? I don't know. I don't see anything in the code that would case a submission - yet it is being submitted nonetheless. I was able to verify that and work around the issue by adding the following parameter to the form tag: onsubmit="return false;" Quote Link to comment https://forums.phpfreaks.com/topic/284012-why-does-my-uncheckradios-function-recall-other-functions/#findComment-1458820 Share on other sites More sharing options...
Frank P Posted November 18, 2013 Author Share Posted November 18, 2013 @ Psycho: OK, thanks anyway. @ cyberRobot: I had already tried that, but that didn't work. This however does: function unCheckRadios(name,itemId,buttonId) { var radios = document.getElementsByName(name); for (var n = 0; n < radios.length; n++) { radios[n].checked = false; document.getElementById(itemId).style.backgroundColor = ''; document.getElementById(buttonId).style.display = 'none'; } return false; // to prevent premature submitting of the form } plus <button id="A1a-button" onclick="return unCheckRadios('A1a','A1a-row','A1a-button')">De-check</button> Quote Link to comment https://forums.phpfreaks.com/topic/284012-why-does-my-uncheckradios-function-recall-other-functions/#findComment-1458843 Share on other sites More sharing options...
Psycho Posted November 18, 2013 Share Posted November 18, 2013 (edited) I don't know. I don't see anything in the code that would case a submission - yet it is being submitted nonetheless. I was able to verify that and work around the issue by adding the following parameter to the form tag: onsubmit="return false;" Correction, the reason it is submitting is because that is the ONLY button in the form. I've seen this before. When there is only one button in a form it may act as a submit button even if not defined as one. I don't know if this is a browser specific issue or in the standards. You also have some inefficiencies in the code function unCheckRadios(name,itemId,buttonId) { var radios = document.getElementsByName(name); for (var n = 0; n < radios.length; n++) { radios[n].checked = false; document.getElementById(itemId).style.backgroundColor = ''; document.getElementById(buttonId).style.display = 'none'; } return false; // to prevent premature submitting of the form } 1. Do not use 'radios.length' in the for() statement. It causes the code to recalculate that value on each iteration. It's better to define a variable with that value before the loop and then use that in the for() declaration. 2. Put the lines to change the background color and button style before or after the loop. There's no reason to run it multiple times. Edited November 18, 2013 by Psycho Quote Link to comment https://forums.phpfreaks.com/topic/284012-why-does-my-uncheckradios-function-recall-other-functions/#findComment-1458851 Share on other sites More sharing options...
Solution Frank P Posted November 18, 2013 Author Solution Share Posted November 18, 2013 Thanks again, Psycho. I will correct the insufficiencies you described. And I found out that a button with an undeclared type attribute automatically gets the submit function. See http://dev.w3.org/html5/markup/button.html. Quote Link to comment https://forums.phpfreaks.com/topic/284012-why-does-my-uncheckradios-function-recall-other-functions/#findComment-1458883 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.