/    Sign up×
Community /Pin to ProfileBookmark

Show HTML

Copy linkTweet thisAlerts:
Nov 01.2007

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?

[code=html]<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> [/code]

to post a comment
JavaScript

13 Comments(s) ↴

Copy linkTweet thisAlerts:
@KravvitzNov 01.2007 — Just put HTML in the "txt" string.
Copy linkTweet thisAlerts:
@comptech520authorNov 01.2007 — 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>'
Copy linkTweet thisAlerts:
@KravvitzNov 01.2007 — The innerHTML property of <table>s is readonly in some browsers.

[url=http://forums.devshed.com/javascript-development-115/unterminated-string-literal-help-please-482423.html](unescaped) Newlines aren't allowed in JS strings.[/url]
Copy linkTweet thisAlerts:
@comptech520authorNov 01.2007 — 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.nn"+

"<tr><td colspan="2">Event Date:nn"+

"<input name="eventdate" type="text" id="eventdate" size="15" maxlength="150" class="form" onFocus="this.className = 'focused'" onBlur="this.className = 'blured'"/>nn"+

"Event Location: <span class="alternate"><font size="3">nn"+

"<input name="eventlocation" type="text" id="eventlocation" class="form" onfocus="this.className = 'focused'" onblur="this.className = 'blured'"/>nn"+

"</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)"/>
Copy linkTweet thisAlerts:
@KravvitzNov 01.2007 — 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.
Copy linkTweet thisAlerts:
@comptech520authorNov 01.2007 — 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
Copy linkTweet thisAlerts:
@comptech520authorNov 02.2007 — any clue why this is wih the code listed?
Copy linkTweet thisAlerts:
@samliewNov 02.2007 — &lt;script type=text/javascript&gt;
&lt;!--
var txt = "Please list the date and location of the event below.nn";
txt += "&lt;tr&gt;&lt;td colspan="2"&gt;Event Date:nn";
txt += "&lt;input name="eventdate" type="text" id="eventdate" size="15" maxlength="150" class="form" onFocus="this.className='focused'" onBlur="this.className='blured'" /&gt;nn";
txt += "Event Location: &lt;span class="alternate"&gt;&lt;font size="3"&gt;nn";
txt += "&lt;input name="eventlocation" type="text" id="eventlocation" class="form" onfocus="this.className='focused'" onblur="this.className='blured'" /&gt;nn";
txt += "&lt;/font&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;";

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";
}
}
//--&gt;
&lt;/script&gt;
&lt;input name="m_support" type="radio" value="Help with the test account" onclick="showT(this);" /&gt;
&lt;span id="RadioText"&gt;&lt;/span&gt;

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.
Copy linkTweet thisAlerts:
@comptech520authorNov 02.2007 — 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!
Copy linkTweet thisAlerts:
@comptech520authorNov 02.2007 — 

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
-------------------------------------------------------------

Copy linkTweet thisAlerts:
@JMRKERNov 02.2007 — Can you use or modify this to your needs: ?
[code=php]
<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>
[/code]

Good luck! ?
Copy linkTweet thisAlerts:
@comptech520authorNov 02.2007 — 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?
Copy linkTweet thisAlerts:
@JMRKERNov 02.2007 — 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.
×

Success!

Help @comptech520 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.19,
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,
)...