displaying innerHTML of dropdown menu problem..

[telisjok]

hello.. i will give u right away the code, and then explain u my problem..


this is a part of the php code that concern us.. this code is about showing the showing the fields of a table in a dropdown menu..

echo <<< END_FORM2

<h2 align="left">Modify Charts</h2>
<hr />
<form method="post">
<textarea cols="40" id="put" rows="3" name="chart2"></textarea>
<p>
<label> Charts: </label><select name="charts_idd" onchange='returnValues()'>
<option value="">Please Choose A Chart</option>
END_FORM2;

$sql='SELECT * from charts';
  @ $result = mysql_query($sql);
	while ($row = mysql_fetch_array($result)){
	echo "<option id='give' value=\"$row[charts_id]\">$row[charts_desc]</option>";}

echo "</select><input type=\"submit\"value=\"Change It\" /></p></form>";
}

this is the javascript code. what im trying to do here is, when i choose something from the dropdown menu, i want the chosen option to be displayed in the textarea. this has to do with modifying the charts of a table called charts. so, u choose a chart from the dropdown menu, the chart u choose will be displayed in the textarea and then u can modify it and click on the change it value to be changed..

<script>
  function returnValues()
  {
  var values=document.getElementById('give').innerHTML;
  
  document.getElementById('put').innerHTML=values;
  }
  </script>

my problem is that i have a mistake somewhere and each option i choose from the dropdown menu, it will always display the first option in the textarea..

any solutions please? any help will be highly appreciated.. take a look at the photos below to understand what im trying to do..

thank u in advance

first.JPG second.JPG third.JPG fourth.JPG

[ReFreezed]

Each option must have an unique ID for it to work. Right now all your option elements are called "give" and document.getElementById() only returns the first one (because it only expects one to exist).

However, it's probably better to skip the IDs all together and just use the name of the form and the select element:

<form method="post" name="chartForm">
	<textarea cols="40" id="put" rows="3" name="chart2"></textarea>
	<p>
		<label>Charts:</label>
		<select name="charts_idd" onchange="returnValues()">
			<option value="">Please Choose A Chart</option>
			<option value="0">Desc0</option>
			<option value="1">Desc1</option>
			<option value="2">Desc2</option>
		</select>
		<input type="submit" value="Change It" />
	</p>
</form>

<script>
function returnValues()
{
	var selectElement = document.chartForm.charts_idd;
	var values = selectElement.options[selectElement.selectedIndex].innerHTML;
	document.chartForm.chart2.innerHTML = values;
}
</script>

[telisjok]

thank you.. this totally works just better than great.. thank you..