Populate Textarea via dropdown - Best method?

[Greymon]

Hi all,

 

I am working with a drop down to auto populate a textarea with preset fields / lines. The issue I keep having is the formatting to the text being populated has no lines/breaks to it. Below is the current java script snip it and the form as it stands. I am looking to find if there would be a better method to doing this, including creating a php form utlizing ajax to pull the information. Thoughts?

 

Javascript:

<script type="text/javascript">function updateTextBox(val)
{
if(val == "1")
{
document.forms['Form'].elements['TextBox'].value = "Line 1, Line 2, Line 3, Line 4";<--- In theory should display as entered, however this does not occur on any line break/Also /n/p/br/&nbsp do not work to adding lines/breaks.
}
else if(val == "2")
{
document.forms['Form'].elements['TextBox'].value = "Line 1 &nbsp Line 2";
}
}


</script>

 

 

Form:

<form name="Form">
<select onchange='updateTextBox(this.value)'>
<option value=""></option>
<option value="1">Test</option>
<option value="2">Test2</option>
</select>
<tr>
<td> <div align="left"><span id="copy">
 <textarea name="TextBox" cols="29" rows="30" style="font-family: Verdana" class="size12"></textarea>
 <br />
</span></div>
<table width="20%" border="0" align="left">
	<tr><td><input name="Button" type="button" onclick="javascript:selectcopy('Form.textbox')" value="Copy Notes" /></td></tr>
	<tr><td><input name="RESET" type="RESET" value="Clear Notes" /></td></tr>
</table>
</div>

[Kingy]

You should try using jQuery and making using of the .html() function. Give the text area an ID and then do:

 

var text = "Line 1\nLine2\nLine3";
$('#textareaID').html(text);

[Greymon]

Working with this option now, results of single entry item working great. Seeing some difficulty in providing the variable of different text entries based off selection / onclick.