...

View Full Version : using radio button to trigger show/hide div



fuzzybunny0
07-05-2006, 03:43 PM
hi, im trying to get this to work, but i suck at javascript.

any help would be appreciated.

Im trying to get a radio button's checked state to trigger the showing or hiding of a div. if the email button is checked the div is hidded, if phone is selected, the div is visible

thanks


javascript:


function getRef(id) {
return (document.getElementById ? document.getElementById(id) : document.all[id]);
}

function showElements() {
if (document.getElementById) {
var toHidePhone = getRef('preferredPhone').value

}


html:


<li><span class="formLeftColReq"><strong>Preferred contact method</strong></span>
<input type="radio" id="preferredPhone" name="preferred" value="phone"> Phone
<input type="radio" id="preferredEmail" name="preferred" value="email" checked="checked"> Email</li>

<li><span class="formLeftColReq"><strong>Email</strong></span>
<input type="text" name="email" id="email"></li>
<div id="hidePhone">
<li><span class="formLeftColReq">Phone Number</span>
<input type="text" name="phone" id="phone"></li>

<li><span class="formLeftCol">Alternate Number</span>
<input type="text" name="altPhone" id="altPhone"></li>

<li><span class="formLeftCol">Best Days and Times Are:</span>

<select name="selectTime" id="days">
<option selected="selected">-Select a Time-</option>
<option value="9am">9am - 10am</option>
<option value="10am">10am - 11am</option>
<option value="11am">11am - 12pm</option>
<option value="12pm">12pm - 1pm</option>
<option value="1pm">1pm - 2pm</option>
<option value="2pm">2pm - 3pm</option>
<option value="3pm">3pm - 4pm</option>
<option value="4pm">4pm - 5pm</option>
<option value="5pm">5pm - 6pm</option>
<option value="6pm">6pm - 7pm</option>
<option value="7pm">7pm - 8pm</option>
<option value="8pm">8pm - 9pm</option>
</select></li>
<li>
<span class="formSmCol"><input type="checkbox" id="any" name="days" value="any"> Any</span>
<span class="formSmCol"><input type="checkbox" id="monday" name="days" value="monday"> Monday</span>
<span class="formSmCol"><input type="checkbox" id="tuesday" name="days" value="tuesday"> Tuesday</span>
<span class="formSmCol"><input type="checkbox" id="wednesday" name="days" value="wednesday"> Wednesday</span>
</li><li>
<span class="formSmCol"><input type="checkbox" id="thursday" name="days" value="thurday"> Thursday</span>
<span class="formSmCol"><input type="checkbox" id="friday" name="days" value="friday"> Friday</span>
<span class="formSmCol"><input type="checkbox" id="saturday" name="days" value="saturday"> Saturday</span>
<span class="formSmCol"><input type="checkbox" id="sunday" name="days" value="sunday"> Sunday</span></li>
</div>


CSS:


#hidePhone {visibility:hidden; display:none;}

Beagle
07-05-2006, 04:21 PM
<script type="text/javascript">
if (!document.getElementById)
{
if (document.all)
{
document.getElementById = function(p_id) { return document.all[p_id]; };
}
}

function hideElement(p_id)
{
if (document.getElementById(p_id).className != "hideElement")
{
document.getElementById(p_id).className = "hideElement";
}
}

function showElement(p_id)
{
if (document.getElementById(p_id).className != "showElement")
{
document.getElementById(p_id).className = "showElement";
}
}

</script>

<style type="text/css">
.showElement { display: default;}
.hideElement { display: none;}
</style>

<html>
<head>
<title></title>
</head>
<body>
<input type="radio" name="preferred" value="email" onclick="hideElement('phoneDiv');" /> Email<br />
<input type="radio" name="preferred" value="Phone" onclick="showElement('phoneDiv');" /> Phone<br />
</body>
</html>

fuzzybunny0
07-05-2006, 05:53 PM
awesome, you rock, thanks sooo much for your help.

just one small question...how can i make it so that it defaults with email checked & the div hidden, but keeping the current functionality?

thanks

Beagle
07-05-2006, 06:34 PM
<input type="radio" checked="checked" />

<div class="hideElement">

fuzzybunny0
07-05-2006, 07:12 PM
i must be a moron, i tried that and it didnt work, oh well, it works now thats all that matters

thanks again for your help.

Beagle
07-05-2006, 07:23 PM
If you tried it and it didn't work, the most common causes would be viewing a cached copy (clear your cache then reload, in mozilla use shift+reload), a typo, or forgetting to transfer the file to the server if developing remotely.

Glad it's working

fuzzybunny0
07-05-2006, 07:51 PM
ok, one more question and hopefully that will be it (fingers crossed)

how would i modify this line:

<input type="radio" name="preferred" value="Phone" onclick="showElement('phoneDiv');" /> Phone

so it would change multiple id's at once, or is it even possible? or do we have to change the main js as well?

thanks again for your help

Beagle
07-05-2006, 08:23 PM
If you look at the code, it is clear that the function you are calling to show and hide the phoneDiv takes one argument and only applies the class to the one element specified by the argument.

You could re-write the show/hide element function to take any number of arguments, or you could keep a list of divs that participate in this scheme in the main JS. Then, when you show 1, it hides the other visible ones. You gotta let us know what you want to do though.

To answer your question simply, you can pass in as many arguments to the function as you want, then change the function to this:



function showElement()
{
for (var argIndex in arguments)
{
if (document.getElementById(arguments[argIndex]).className != "showElement")
{
document.getElementById(arguments[argIndex]).className = "showElement";
}
}
}

fuzzybunny0
07-05-2006, 08:30 PM
I realized that I have to apply the show/hide to 5 items. They will all either be hidden or showing.

ids are hidePhone1, hidePhone2, hidePhone3, hidePhone4, hidePhone5

and are all triggered by the one change of radio button state.

would the function above work then, and then what do i have to change this to?


<input type="radio" name="preferred" value="email" onclick="hideElement('hidePhone1');" /> Email<br />
<input type="radio" name="preferred" value="Phone" onclick="showElement('hidePhone1');" /> Phone<br />

Beagle
07-05-2006, 09:02 PM
the function I posted will allow you to:

onclick="hideElement('ele1','ele2','ele3','ele4',.....

as many as you want.

All you have to do is do the same thing for the showElement function and you can do the same for the onclick=showElement('1','2','3',....

fuzzybunny0
07-05-2006, 09:35 PM
i'm assuming there is something wrong in the javascript, with the naming, but I cant seem to make it work

javascript


if (!document.getElementById)
{
if (document.all)
{
document.getElementById = function(p_id) { return document.all[p_id]; };
}
}


function hideElement()
{
for (var argIndex in arguments)
{
if (document.getElementById(arguments[argIndex]).className != "hideElement")
{
document.getElementById(arguments[argIndex]).className = "hideElement";
}
}
}

function showElement()
{
for (var argIndex in arguments)
{
if (document.getElementById(arguments[argIndex]).className != "showElement")
{
document.getElementById(arguments[argIndex]).className = "showElement";
}
}
}


html:


<input type="radio" name="preferred" value="email" onclick="hideElement('hidePhone1','hidePhone2','hidePhone3','hidePhone4','hidePhone5');" checked="checked" /> Email
<input type="radio" name="preferred" value="phone" onclick="showElement('hidePhone1','hidePhone2','hidePhone3','hidePhone4','hidePhone5');" /> Phone

Beagle
07-05-2006, 09:40 PM
you're most likely getting errors, that could be cause by not having elements with ids that match the ones you are using.

Try looking at your error messages and pasting them here.

fuzzybunny0
07-05-2006, 09:51 PM
thats the problem, im not getting errors at all, and nothing is working. i dont know what is wrong, i know the stuff in the java script file doesnt match up, i just can't seem to make anything work

Beagle
07-05-2006, 09:54 PM
maybe it's my fault for using for-in

try this:


function hideElement()
{
for (var i = arguments.length - i; i >= 0; --i)
{
if (document.getElementById(arguments[i]).className != "hideElement")
{
document.getElementById(arguments[i]).className = "hideElement";
}
}
}

fuzzybunny0
07-05-2006, 10:08 PM
nope still nothing, and i greatly appreciate your help

heres my javascript code again:


if (!document.getElementById)
{
if (document.all)
{
document.getElementById = function(p_id) { return document.all[p_id]; };
}
}


function hideElement()
{
for (var i = arguments.length - i; i >= 0; --i)
{
if (document.getElementById(arguments[i]).className != "hideElement")
{
document.getElementById(arguments[i]).className = "hideElement";
}
}
}

function showElement()
{
for (var i = arguments.length - i; i >= 0; --i)
{
if (document.getElementById(arguments[i]).className != "showElement")
{
document.getElementById(arguments[i]).className = "showElement";
}
}
}


html:


<span class="formLeftColReq"><strong>Preferred contact method</strong></span>
<input type="radio" name="preferred" value="email" onclick="hideElement('hidePhone1','hidePhone2','hidePhone3','hidePhone4','hidePhone5');" checked="checked"> Email
<input type="radio" name="preferred" value="phone" onclick="showElement('hidePhone1','hidePhone2','hidePhone3','hidePhone4','hidePhone5');"> Phone




<div id="hidePhone1" class="hideElement">
<span class="formLeftColReq"><strong>Phone Number</strong></span>
<input type="text" name="phone" id="phone">
</div>

Beagle
07-05-2006, 11:12 PM
where are the rest of your elements, the ones with the ids 'hidePhone2' and 'hidePhone3' etc. You can't hide things that aren't on the page.

And if you're using IE, you might not get proper errors. Test in firefox and check out the error console for errors.

fuzzybunny0
07-06-2006, 01:23 AM
the elements are just below on the page, here is the full html code:


<li><span class="formLeftColReq"><strong>Preferred contact method</strong></span>
<input type="radio" name="preferred" value="email" onclick="hideElement('hidePhone1','hidePhone2','hidePhone3','hidePhone4','hidePhone5');" checked="checked"> Email
<input type="radio" name="preferred" value="phone" onclick="showElement('hidePhone1','hidePhone2','hidePhone3','hidePhone4','hidePhone5');"> Phone
</li>

<li><span class="formLeftColReq"><strong>Email</strong></span>
<input type="text" name="email" id="email"></li>


<li id="hidePhone1" class="hideElement"><span class="formLeftColReq"><strong>Phone Number</strong></span>
<input type="text" name="phone" id="phone"></li>

<li id="hidePhone2" class="hideElement"><span class="formLeftCol">Alternate Number</span>
<input type="text" name="altPhone" id="altPhone"></li>

<li id="hidePhone3" class="hideElement"><span class="formLeftCol">Best Days and Times Are:</span>

<select name="selectTime" id="days">
<option selected="selected">-Select a Time-</option>
<option value="9am">9am - 10am</option>
<option value="10am">10am - 11am</option>
<option value="11am">11am - 12pm</option>
<option value="12pm">12pm - 1pm</option>
<option value="1pm">1pm - 2pm</option>
<option value="2pm">2pm - 3pm</option>
<option value="3pm">3pm - 4pm</option>
<option value="4pm">4pm - 5pm</option>
<option value="5pm">5pm - 6pm</option>
<option value="6pm">6pm - 7pm</option>
<option value="7pm">7pm - 8pm</option>
<option value="8pm">8pm - 9pm</option>
</select></li>
<li id="hidePhone4" class="hideElement">
<input type="checkbox" id="any" name="days" value="any"> Any
<input type="checkbox" id="monday" name="days" value="monday"> Monday
<input type="checkbox" id="tuesday" name="days" value="tuesday"> Tuesday
<input type="checkbox" id="wednesday" name="days" value="wednesday"> Wednesday
</li>
<li id="hidePhone5" class="hideElement">
<input type="checkbox" id="thursday" name="days" value="thurday"> Thursday
<input type="checkbox" id="friday" name="days" value="friday"> Friday
<input type="checkbox" id="saturday" name="days" value="saturday"> Saturday
<input type="checkbox" id="sunday" name="days" value="sunday"> Sunday</li>


I am testing in firefox and the javascript console is showing nothing

fuzzybunny0
07-06-2006, 03:15 AM
its a dumb little mistake,

for (var i = arguments.length - i; i >= 0; --i)

is wrong, and should be:

for (var i = arguments.length - 1; i >= 0; --i)

it seems to be working now, thanks Beagle for all your help

Beagle
07-06-2006, 04:44 PM
Oh wow, sorry for that typo, jeez!

My apologies for wasting so much of your time, though I'm glad you finally got it figured out. Cheers!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum