Dynamic Page Help

**tpiccirillo** · 11-01-2009, 02:12 PM

I am a javascript newbie. I am accepting data in a form. I need to display a line in the table asking for the address of the link, but only if one exists. Here is how I am trying to find out if a link exists:

HTML Code:

 <td>Is the ad linked to a web page? </td>
   <td>Yes
    <input name="adlinked" type="radio" value="Yes" onclick= "getlink(adlinked)">
    No
    <input name="adlinked" type="radio" value="No" /></td>
    </tr>

Here is the function:

Code:

<SCRIPT LANGUAGE="JavaScript1.2">
function getlink(linked)
{
	if (linked == "Yes")
	document.write ("<tr><td>Address of web page:</td> . <td><input name="thelink" type="text" id="thelink" size="50" /></td></tr>")
}
</script>

Nothing happens. Please help

**jscheuer1** · 11-01-2009, 04:16 PM

Code:

<input name="adlinked" type="radio" value="Yes" onclick="getlink('Yes')">

Code:

function getlink(linked)
{
	if (linked == "Yes")
	document.write ('<tr><td>Address of web page:</td> . <td><input name="thelink" type="text" id="thelink" size="50" /></td></tr>');
}

Now something will happen, but you probably won't like it.

**tpiccirillo** · 11-01-2009, 05:05 PM

John,

Your right I don't like it. What do I need to have that line added to what is on the page currently and not just creat a new page?

**jscheuer1** · 11-01-2009, 05:12 PM

That's the problem with the document.write() method. If it's used after the page is loaded, it overwrites the page. Generally the easiest (though not really the best) way to add to an existing page is to have an element waiting and either add to its innerHTML property or overwrite its innerHTML property. The fact that this is a table, complicates things, as tables are finicky to work with and have a complex structure that must be observed properly when making changes to it. Otherwise you get garbage. I'll write up something that should work, at least for a few basic things.

**jscheuer1** · 11-01-2009, 05:41 PM

Here's a simple demo:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function getlink(){
	if(document.getElementById('thelink')) {return;}
	if(getlink.tr){
		document.getElementById('targetBody').appendChild(getlink.tr);
		return;
	}
	var tb = document.getElementById('targetBody'), tr = document.createElement('tr'),
	td1 = document.createElement('td'), td2 = td1.cloneNode(false);
	td1.innerHTML = 'Address of web page:';
	td2.innerHTML = '<input name="thelink" type="text" id="thelink" size="50">';
	tr.appendChild(td1);
	tr.appendChild(td2);
	tb.appendChild(tr);
	getlink.tr = tr;
}
function killlink(){
	if(!document.getElementById('thelink')) {return;}
	document.getElementById('targetBody').removeChild(getlink.tr);
}
</script>
</head>
<body>
<table>
<tbody id="targetBody">
<tr>
<td>Is the ad linked to a web page? </td>
   <td>Yes
    <input name="adlinked" type="radio" value="Yes" onclick="getlink();">
    No
    <input name="adlinked" type="radio" value="No" onclick="killlink();"></td>
    </tr>
</tbody>
</table>

</body>
</html>

If a form is involved, as appears to be your intention, things may get whacky (as far as what happens when the form submits). But it might not, you will have to test that out to see.

Thread: Dynamic Page Help

Thread Tools

Search Thread

Dynamic Page Help

You're Right Don't Like it

Bookmarks

Bookmarks

Posting Permissions