Why does my unCheckRadios function recall other functions?

Frank P · 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?

Psycho · November 18, 2013

The form is getting submitted.

Frank P · 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?

cyberRobot · 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>

Psycho · 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;"

Frank P · 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>

Psycho · November 18, 2013

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

Frank P · 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.

Sign In

Why does my unCheckRadios function recall other functions?

Recommended Posts

Frank P

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Frank P

Link to comment

Share on other sites

cyberRobot

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Frank P

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Frank P

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information