PDA

View Full Version : 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:


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



<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
<input name="adlinked" type="radio" value="Yes" onclick="getlink('Yes')">


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:


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