sorry for the English.
Have dynamic radio buttons are working, however, but I am new to javascript
when you select one option Seems in another as I hide it? fix this?
RADIOS: •YES •NO •OTHER
and div hide...
<div id="hide"> FORM FOR YES </div>
<div id="hide2">FORM FOR OTHER </div>
when I select "yes" and then "other" are appearing as two divs can hide the div "hide". this only ever if I select "yes" and then "other".
window.onload=function(){
document.getElementById('hide').style.display="none";
document.getElementById('hide2').style.display="none";
}
function possui_dominio()
{
if(document.getElementsByName('form[dominio]')[0].checked)
document.getElementById('hide').style.display="inline";
if(document.getElementsByName('form[dominio]')[1].checked)
document.getElementById('hide').style.display = 'none';
document.getElementById('hide2').style.display = 'none';
if(document.getElementsByName('form[dominio]')[2].checked)
document.getElementById('hide2').style.display="inline";
}
</script>
Thank you for those who help me, sorry for bad English.
sorry for the English.
Have dynamic radio buttons are working, however, but I am new to javascript
when you select one option Seems in another as I hide it? fix this?
RADIOS: •YES •NO •OTHER
and div hide...
<div id="hide"> FORM FOR YES </div>
<div id="hide2">FORM FOR OTHER </div>
when I select "yes" and then "other" are appearing as two divs can hide the div "hide". this only ever if I select "yes" and then "other".
window.onload=function(){
document.getElementById('hide').style.display="none";
document.getElementById('hide2').style.display="none";
}
function possui_dominio()
{
if(document.getElementsByName('form[dominio]')[0].checked)
document.getElementById('hide').style.display="inline";
if(document.getElementsByName('form[dominio]')[1].checked)
document.getElementById('hide').style.display = 'none';
document.getElementById('hide2').style.display = 'none';
if(document.getElementsByName('form[dominio]')[2].checked)
document.getElementById('hide2').style.display="inline";
}
</script>
Thank you for those who help me, sorry for bad English.
Share Improve this question edited Oct 6, 2022 at 23:01 PLB 2654 silver badges18 bronze badges asked Nov 13, 2011 at 16:54 tizekektizekek 31 silver badge4 bronze badges 2- Thanks for all the answers you are It really quick! Thank you. FIXED!! – tizekek Commented Nov 13, 2011 at 17:12
- This is a great example of why one must always wrap (conditional/loop) blocks in brackets. To do otherwise is to not only create sloppy code, but makes it incredibly hard to debug or understand months later. – BryanH Commented Feb 5, 2013 at 16:12
4 Answers
Reset to default 3You need to hide the other elements in your functions like this:
function possui_dominio()
{
if(document.getElementsByName('form[dominio]')[0].checked){
document.getElementById('hide2').style.display="none";
document.getElementById('hide').style.display="inline";
}
if(document.getElementsByName('form[dominio]')[1].checked){
document.getElementById('hide').style.display = 'none';
document.getElementById('hide2').style.display = 'none';
}
if(document.getElementsByName('form[dominio]')[2].checked){
document.getElementById('hide2').style.display="inline";
document.getElementById('hide').style.display="none";
}
}
In Java Script, if statements always follow this scheme:
if (condition)
statement;
If you want to execute two statements in case the condition is true, you have to put those statements into braces ({ }), so that they are executed both together:
if (condition) {
statement1;
statement2;
}
Your second if statement looks like this (well formatted):
if (condition)
statement1;
statement2;
As you see, the second statement has nothing to do with the if statement and thus is always executed.
This is the simple example for you.
<html>
<head>
<title>Hide/Show Pane Javascript</title>
<script type="text/javascript">
function togglePane(pane_id){
//alert(pane_id)
var current_pane = document.getElementById('pane_'+pane_id);
//alert(current_pane);
if(pane_id == 1){
current_pane.style.display = 'block';
document.getElementById('pane_2').style.display = 'none';
document.getElementById('pane_3').style.display = 'none';
} else if(pane_id == 2){
current_pane.style.display = 'block';
document.getElementById('pane_1').style.display = 'none';
document.getElementById('pane_3').style.display = 'none';
} else if(pane_id == 3){
current_pane.style.display = 'block';
document.getElementById('pane_1').style.display = 'none';
document.getElementById('pane_2').style.display = 'none';
}
}
</script>
</head>
<body>
<input type="radio" name="option" id="option1" value="1" checked="checked" onclick="togglePane(1)"><label for="option1">Yes</label>
<input type="radio" name="option" id="option2" value="2" onclick="togglePane(2)"><label for="option2">No</label>
<input type="radio" name="option" id="option2" value="3" onclick="togglePane(3)"><label for="option3">Other</label>
<div id="pane_1" style="display: block">Yes Block</div>
<div id="pane_2" style="display: none">No Block</div>
<div id="pane_3" style="display: none">Other Block</div>
</body>
</html>
How to use jQuery to show/hide divs based on radio button selection?
use name, not id (in this case). the names should be the same.
use a framework such as jQuery, which handles differences between browsers much better than if you were to use pure JavaScript.
and finally, JavaScript is /not/ Java.