Jump to content

Why does my unCheckRadios function recall other functions?


Frank P
 Share

Go to solution Solved by Frank P,

Recommended Posts

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

@ 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>
Link to comment
Share on other sites

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 by Psycho
Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.