Show HTML

[comptech520]

I am using this code to show text when a radio button is clicked.

How can I make it show html instead of the text?

<script type=text/javascript> 
<!-- 
var txt ='Please list the date and location of the event below.' 

function showT(r){ 
var rads = document.getElementsByName(r.name) 
if(rads[0].checked){ 
document.getElementById('RadioText').innerHTML=txt 
document.getElementById('RadioText').style.display="block" 
} 
else{ 
document.getElementById('RadioText').innerHTML="" // optional 
document.getElementById('RadioText').style.display="none" 
} 
} 
//--> 
</script>

[Kravvitz]

Just put HTML in the "txt" string.

[comptech520]

I did this and I had some it gave me an error. It said object expected. I think that was because of the syntax.

SYNTAX:
var txt ='Please list the date and location of the event below.
<tr>
<td colspan="2">Event Date:
<input name="eventdate" type="text" id="eventdate" size="15" maxlength="150" class="form" onFocus="this.className = 'focused'" onBlur="this.className = 'blured'"/>
Event Location: <span class="alternate"><font size="3">
<input name="eventlocation" type="text" id="eventlocation" class="form" onfocus="this.className = 'focused'" onblur="this.className = 'blured'"/>
</font></span> </td>
</tr>'

[Kravvitz]

The innerHTML property of <table>s is readonly in some browsers.

(unescaped) Newlines aren't allowed in JS strings.

[comptech520]

This is my code I am still getting errors:

<script type=text/javascript>
<!--
var txt ="Please list the date and location of the event below.\n\n"+
"<tr><td colspan="2">Event Date:\n\n"+
"<input name="eventdate" type="text" id="eventdate" size="15" maxlength="150" class="form" onFocus="this.className = 'focused'" onBlur="this.className = 'blured'"/>\n\n"+
"Event Location: <span class="alternate"><font size="3">\n\n"+
"<input name="eventlocation" type="text" id="eventlocation" class="form" onfocus="this.className = 'focused'" onblur="this.className = 'blured'"/>\n\n"+
"</font></span></td></tr>";

function showT(r){
var rads = document.getElementsByName(r.name)
if(rads[0].checked){
document.getElementById('RadioText').innerHTML=txt
document.getElementById('RadioText').style.display="block"
}
else{
document.getElementById('RadioText').innerHTML="" // optional
document.getElementById('RadioText').style.display="none"
}
}
//-->
</script>
<input name="m_support" type="radio" value="Help with the test account" onclick="showT(this)"/>

[Kravvitz]

What errors exactly?

Did the forum system add new lines to your code? You've got two newlines in that string that don't belong there.

[comptech520]

when I click on the radio button that is suppose to show that code, I get an error in the bottom left corner if IE. When i click on it it says object expected

[comptech520]

any clue why this is wih the code listed?

[samliew]

<script type=text/javascript>
<!--
var txt = "Please list the date and location of the event below.\n\n";
txt += "<tr><td colspan=\"2\">Event Date:\n\n";
txt += "<input name=\"eventdate\" type=\"text\" id=\"eventdate\" size=\"15\" maxlength=\"150\" class=\"form\" onFocus=\"this.className='focused'\" onBlur=\"this.className='blured'\" />\n\n";
txt += "Event Location: <span class=\"alternate\"><font size=\"3\">\n\n";
txt += "<input name=\"eventlocation\" type=\"text\" id=\"eventlocation\" class=\"form\" onfocus=\"this.className='focused'\" onblur=\"this.className='blured'\" />\n\n";
txt += "</font></span></td></tr>";

function showT(r){
	if(r.checked){
		document.getElementById('RadioText').innerHTML=txt;
		document.getElementById('RadioText').style.display="block";
	}
	else{
		document.getElementById('RadioText').innerHTML=""; // optional
		document.getElementById('RadioText').style.display="none";
	}
}
//-->
</script>
<input name="m_support" type="radio" value="Help with the test account" onclick="showT(this);" />
<span id="RadioText"></span>

1) Didn't escape double quotes in string.
2) Passed an element using showT(this), but still tried to get the element name, wrongly. Could just use it directly.

[comptech520]

If you goto http://photoweb.esctonline.com/pwform.php

Click on the radio buttion "an even you were at".

How can I fix that so the Event Date is on the same line as the textbox associated with it?

How can I make it so the radio button drops down to the "an event you were at"

Thanks!

[comptech520]

This is what I am looking for
-------------------------------------------------------------
Radio Buttons to stay right here on top at all times
-------------------------------------------------------------


-------------------------------------------------------------
Eachtime I change the radio button, I want the text to show here
I will add directions for each radio button over time
-------------------------------------------------------------

[JMRKER]

Can you use or modify this to your needs:

PHP Code:

<html>
<head>
<title>RB Tabs</title>
<style type="text/CSS">
div.RBtnTab { display:none; height:100px; width:200px; background-color:yellow}
</style>
<script type="text/javascript">
// getElementByClass function from http://www.webmasterworld.com/forum91/1729.htm
//Create an array
  var allPageTags = new Array();

  function doSomethingWithClasses(theClass) {
//Populate the array with all the page tags
    var allPageTags=document.getElementsByTagName("*");
//Cycle through the tags using a for loop
    for (var i=0; i<allPageTags.length; i++) {
//Pick out the tags with our class name
      if (allPageTags[i].className==theClass) {
//Manipulate this in whatever way you want
        allPageTags[i].style.display='none';
      }
    }
  }

function Show(ids) {
  doSomethingWithClasses('RBtnTab');

  var obj = document.getElementById(ids);
  if (obj.style.display != 'block') { obj.style.display = 'block'; }
                               else { obj.style.display = 'none'; }
}
</script>
</head>
<body>

<label for="lDIV1">
<input id="lDIV1" type="radio" name='rbtab' value='DIV1' onClick="Show('DIV1')">Event Info</label>
<label for="lDIV2">
<input id="lDIV2" type="radio" name='rbtab' value='DIV2' onClick="Show('DIV2')">Plan Event</label>
<label for="lDIV3">
<input id="lDIV3" type="radio" name='rbtab' value='DIV3' onClick="Show('DIV3')">Contact Us</label>
<div id='Content' style="display:block"><br />
<div id='DIV1' class="RBtnTab">Event Information</div>
<div id='DIV2' class="RBtnTab">Plan Event Information</div>
<div id='DIV3' class="RBtnTab">Contact us at: xxx</div>
</div>
</body>
</html>


Good luck!

[comptech520]

I tried this:

<div id='DIV1' class="RBtnTab"><tr><td colspan="2">Event Date: <input name="eventdate" type="text" id="eventdate" size="15" maxlength="150" class="form" onFocus="this.className = 'focused'" onBlur="this.className = 'blured'"/>Event Location: <span class="alternate"><font size="3"><input name="eventlocation" type="text" id="eventlocation" class="form" onfocus="this.className = 'focused'" onblur="this.className = 'blured'"/></font></span> </td></tr></div>

And it didn't work.

How can I make it so I hit the first radio button and have that display?

[JMRKER]

I'm not sure you can put a table row within a <div> area.
Possibly reverse the order of the nesting.

Also, would be a lot easier to view the code if you use the 'php' or 'code' tags of the forum.
See examples of post #9 and #12 to see effects.