PDA

View Full Version : dynamic text

steamer91
02-07-2008, 04:58 PM
Well, I think that's what it would be considered. Anyways, I have a simple project where I'm making a website that has a drop down menu with a list of items. I also have a table which will define the items. What i want to know is how to change the text in one of the table boxes when a new item in the drop down menu is selected.

This is the code i have so far...

<html>
<head>
<title>
My Definitions
</title>
</head>
<body>

<script type="text/javascript">

var define= new array()
define["Unicode"] = "unicoded"
define["Hexadecimal"] = "hex"
define["Binary"] = "bin"
define["Compiler"] = "compil"
define["Interpreter"] = "inter"
define["Topology"] = "top"
define["Server"] = "ser"
define["Overflow Error"] = "of"
define["Phishing"] = "phish"
define["Network"] = "net"

function definition(def)
{

}
</script>

Select a definition from the list:
<select id="list">
<option>Unicode</option>
<option>Hexadecimal</option>
<option>Binary</option>
</select>
<br>
<br>
<table border="1" width="100" cellpadding="5">
<th>Definition:</th>
<th>Picture:</th>
<tr><td>two</td>
<td>one</td></tr>
</table>
</body>
</html>



any help would be greatly appreciated.
YMas
02-11-2008, 02:48 PM
Hello,
Excellent Question!

Try this code and tell me if it does what you want.

It is not meant to be comprehensive, only to give you an idea of what can be done.


<head>
<title>Table</title>
<style type='text/css'>
body {
text-align:center;
}

#container {
text-align:left;
margin:0 auto;
background:#EEE;
border:1px dashed #000;
width:700px;
padding:.25em;
}

#dynamicText {
width:600px;
background:#fff;
border-collapse:collapse;
border-width:1px 1px 0 0;
border-style:solid;
border-color:navy;
margin:5px 0;
}

#dynamicText td {
border-width:0 0 1px 1px;
border-style:solid;
border-color:navy;
padding:.25em;
width:300px;
}
</style>
<script type='text/javascript'>
function cell()
{
var x = document.getElementById("dynamicText").rows[0].cells;
var y = document.getElementById('newText').value;
if(y != '')
{
x[0].innerHTML = y;
}
}
</script>
</head>
<body>
<div id='container'>
<table id='dynamicText'>
<tr>
<td>input 1</td>
<td>input 2</td>
</tr>
</table>
<select id='newText' onClick='javascript:cell();'>
<option value=''>Select ...</option>
<option value='New Text'>New Text</option>
<option value='New Text 2'>New Text 2</option>
</select>
</div>
</body>


Thanks,
YMas
steamer91
02-12-2008, 04:49 PM
Thanks a lot but that is way to advanced for me :eek:. Anyways, i worked with someone to get it working a different way using javascript.