/    Sign up×
Community /Pin to ProfileBookmark

Hidden div help

Hi all

I will explain and example my existing code and then explain what i would like it to do.

I used to have a select box which offered three options,
1) Please select
2) Option 1
3) Option 2

Option 1 and 2 are set to their own div tags respectively. When someone clicks on either of the two options the appropriate div tag becomes visible. Also, if the page is reloaded the page remembers what option and makes the appropriate div tag visible.

[code=html]
<script type=”text/javascript”>

var cur = 0;
function displayDiv(idx) {
if (cur==idx) return true;
document.getElementById(“div”+cur).style.display = “none”;
document.getElementById(“div”+idx).style.display = “block”;
cur = idx;
return true;
}

window.onload = function() {
return displayDiv(document.myForm.mySelect.selectedIndex);
document.myForm.submit()
return true;
}
</script>
</head>
<body>

<form name=”myForm” method=”post” action=”<?php echo $_SESSION[‘PHP_SELF’] ?>”>
<div id=”div1″ style=”display:none;”>
<table id=”debit” class=”formnu” border=’0′ cellspacing=”1″ cellpadding=”2″>
<tr>
<td colspan=”2″ align=’center’>
blah blah blah – option 1
</td>
</tr>
</table>
</div>

<div id=”div2″ style=”display:none;”>
<table id=”credit” class=”formnu” border=’0′ cellspacing=”1″ cellpadding=”2″>
<tr>
<td align=”right” width=”65%”>
blah blah blah – option 2
</td>
</tr>
</table>
</div>

<div id=”div0″>

</div>

[/code]

What i would like the code to do is work from a radio button. i.e. if radio button option 1 is clicked option 1 div visible and if radio button option 2 clciked option 2 div visible.

Can annyone help?

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@scoperApr 02.2007 — it should be exactly the same code, only instead of handling onchange (as you would with a select) you handle onclick
Copy linkTweet thisAlerts:
@webadevApr 02.2007 — Try something like this - it seems to work. It sets the 'checked' property of one of the radio buttons using the 'checked' attribute, but I assume you do this dynamically somehow. That should be irrelevant as long as one of them is checked before window.onload is executed.

I assigned ids to the radio buttons but they could be omitted since they aren't used.

Since the radio buttons have the same name, they are a group, only 1 can be checked at a time, and the value of the one checked will be submitted (you probably already know that).

You might want to assign div ids div0, div1, etc. so you could use displayDiv(i) instead of displayDiv(i+1);


<script type="text/javascript">

var cur = 0;

function displayDiv(idx) {

if (cur==idx) return true;

document.getElementById("div"+cur).style.display = "none";

document.getElementById("div"+idx).style.display = "block";

cur = idx;

return true;

}

function initDisplayDiv() {

var options = document.getElementsByName("opts");

for (var i = 0; i < options.length; i++) {

if (options[i].checked) {

displayDiv(i+1);

}

}

}



window.onload = function() {

return initDisplayDiv();

document.myForm.submit()

return true;

}

</script>

</head>

<body>



<form name="myForm" method="post" action="<?php echo $_SESSION['PHP_SELF'] ?>">



<input type="radio" id="radio1" name="opts" value="Option 1" checked onclick="displayDiv(1);"/>

<input type="radio" id="radio2" name="opts" value="Option 2" onclick="displayDiv(2);"/>



<div id="div1" style="display:none;">

<table id="debit" class="formnu" border='0' cellspacing="1" cellpadding="2">

<tr>

<td colspan="2" align='center'>

blah blah blah - option 1

</td>

</tr>

</table>

</div>



<div id="div2" style="display:none;">

<table id="credit" class="formnu" border='0' cellspacing="1" cellpadding="2">

<tr>

<td align="right" width="65%">

blah blah blah - option 2

</td>

</tr>

</table>

</div>



<div id="div0">



</div>
Copy linkTweet thisAlerts:
@peteybauthorApr 03.2007 — thanks wedadev

works great, i have taken the checked out though.
×

Success!

Help @peteyb spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...