Forum Moderators: open
I've got three radio buttons. I've got three div's of content I want displayed when clicking on one of the radio buttons. I want only one div to be displayed at a time.
It just won't work and I've tried about everything I can find online about toggling and javascript. I refuse to believe that this is really that difficult even for a novice js user like myself. In any case, I figured that as desperate as I'm becoming, it can't hurt to share the problem with some experts and see if I can't get some answers. SO! This is the script I've been working with as of now:
function toggle( targetOpen, targetClose, targetClose2 ){
if (document.getElementById)
{
targetO = document.getElementById( targetOpen );
targetC = document.getElementById( targetClose );
targetC2 = document.getElementById( targetClose2 );
if (targetO.style.display == "none"){
targetO.style.display = "";targetC.style.display = "none";
targetC2.style.display = "none";
}
else {targetO.style.display = "none";}
}
}
And here are my radio buttons:
[code]
print ("<div class=\"row3\"><p class=\"pmtheads2\">Please choose one:</span>
<label for=\"Check\">Check</label><span class=\"formw3\"><input name=\"PaymentType\" type=\"radio\" value=\"Check\" onClick=\"toggle('checkInfo', 'creditInfo', 'easyPay')\"id=\"Check\"></span>
<label for=\"Credit\">Credit</label><span class=\"formw3\"><input name=\"PaymentType\" type=\"radio\" value=\"Credit\" onClick=\"toggle('creditInfo', 'easyPay', 'checkInfo')\" id=\"Credit\" ></span>
<label for=\"EasyPay\">EasyPay</label><span class=\"formw3\"><input name=\"PaymentType\" type=\"radio\" value=\"EasyPay\" onClick=\"toggle('easyPay', 'checkInfo', 'creditInfo')\" id=\"EasyPay\"></span></div><br>\n");
print ("<div class=\
this opens up the print dialog in IE. try document.write()
"id=\"Check\"></
make sure you put a space in between the " and the id=
documnet.write ("<div class=\"row3\"><p class=\"pmtheads2\">Please choose one:</span>
<label for=\"Check\">Check</label><span class=\"formw3\"><input name=\"PaymentType\" type=\"radio\" value=\"Check\" onClick=\"toggle('checkInfo', 'creditInfo', 'easyPay')\"id=\"Check\"></span>
<label for=\"Credit\">Credit</label><span class=\"formw3\"><input name=\"PaymentType\" type=\"radio\" value=\"Credit\" onClick=\"toggle('creditInfo', 'easyPay', 'checkInfo')\" id=\"Credit\" ></span>
<label for=\"EasyPay\">EasyPay</label><span class=\"formw3\"><input name=\"PaymentType\" type=\"radio\" value=\"EasyPay\" onClick=\"toggle('easyPay', 'checkInfo', 'creditInfo')\" id=\"EasyPay\"></span></div><br>\n");
then I get this:
Fatal error: Call to undefined function: write() in /var/www/html/jamie/pbs/MakePaymentMINE.php on line 392
if (document.getElementById)
should be
if (document.getElementById())
<style type="text/css">
#Div1, #Div2, #Div3
{
DISPLAY: none;
}
</style><script type="text/javascript">
function Toggle(theDiv) {
document.getElementById("Div1").style.display = "none";
document.getElementById("Div2").style.display = "none";
document.getElementById("Div3").style.display = "none";
document.getElementById(theDiv).style.display = "block";
}
</script><input type="radio" name="ToggleDivs" onclick="Toggle('Div1');" />Turn on Div 1<br />
<input type="radio" name="ToggleDivs" onclick="Toggle('Div2');" />Turn on Div 2<br />
<input type="radio" name="ToggleDivs" onclick="Toggle('Div3');" />Turn on Div 3<br /><br /><br />
<div id="Div1">I am the content of Div 1</div>
<div id="Div2">I am the content of Div 2</div>
<div id="Div3">I am the content of Div 3</div>
print ("Please choose one:<br>\n<input type=\"radio\" name=\"ToggleDivs\" onclick=\"Toggle('Div1');\" id=\"Check\" />\n<label for=\"Check\">Check</label>\n<br /> \n<input type=\"radio\" name=\"ToggleDivs\" onclick=\"Toggle('Div2');\" id=\"Credit\" />\n<label for=\"Credit\">Credit</label>\n<br /> \n<input type=\"radio\" name=\"ToggleDivs\" onclick=\"Toggle('Div3');\" id=\"EasyPay\" />\n<label for=\"EasyPay\">EasyPay</label>\n<br /> \n<br /> \n<br /> \n
<div id=\"Div1\">The user wants to pay with a check.</div> \n<div id=\"Div2\">They want to use a credit card.</div> \n<div id=\"Div3\">The guy takes the easy way out with EasyPay.</div>")
Thanks for all your help!
