To start, I have searched the site and found this:
How to fill in a text field with drop down selection
but it did not suit my needs, as I'm generating very long templates and the above method would be too time consuming and impractical as it would mean filling in the value
attribute of each <option>
tag with my templates.
So here's the code:
<script type="text/javascript">
//<![CDATA[
function showCSTemplates(sel){
locations =[ "", /*this remains blank for first selection in drop-down list*/
/*option 1*/
" This is template 1 that will appear in a
textarea keeping
its formatting
as
is. ",
/*option 2*/
" This is template 2 that
will appear in a
textarea keeping its
formatting as is.
Credentials:
Contact Info: ",
/*option 3*/
" This is template 3 that will appear in a
textarea keeping its formatting as is.
Donec tortor lorem,
ornare vitae commodo nec,
sagittis et nunc.
Maecenas sagittis quam ",
/*option 4*/
"etc",
/*option 5*/
"etc...", ];
srcLocation = locations [sel.selectedIndex];
if (srcLocation != undefined && srcLocation != "") {
document.getElementById('CSTemplates').innerHTML = srcLocation;
}
} //]]>
</script>
and here's the markup:
<h1>Note Generator</h1>
<div class="left">
CSTemplates
<p>
<select class="c10">
<option selected="selected" value="" id="Templates" onchange="showCSTemplates(this);">Please select a template...</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</p>
<p>
<textarea cols="30" rows="20" readonly="readonly" id="CSTemplates">
Templates will auto-populate
here depending on the
selection made from the
[CSTemplates]
drop-down list.
</textarea>
</p>
</div><!--left ends here-->
The worst part is, I'm not even getting a script error when I test this, it just doesn't work at all, so I don't know where I went wrong here. I've done a similar page using <input type="text">
tags and they worked fine, but I can't seem to get it to work with the <textarea>
at all no matter what I try.
Any help will be very much appreciated! Thanks in advance!
Edited on Fri September 2, 2011 at 01:17:34 PM
To clarify the above where I said "I'm not even getting a script error when I test this, it just doesn't work at all,"
what I mean was, if I leave the templates all on one line i.e.
/*option 1*/
" This is template 1 that will appear in a textarea keeping its formatting as is. ",
then I don't get an error. If I enter line breaks however for formatting like above:
/*option 1*/
" This is template 1 that will appear in a
textarea keeping
its formatting
as
is. ",
then I get an "Unterminated string constant" error. Would using \n
solve this error? Also, I left it out of the script because I don't know how to go about it, but in the <textarea>
where it says
Templates will auto-populate
here depending on the
selection made from the
[CSTemplates]
drop-down list.
I need to erase when the user picks a selection from the dropdownlist, and for the <textarea>
to populate with the corresponding selection from the script. Thanks!
Okay you had many problems in code the major one was specifying onchange in option instead of selects, there also little problem which I solved and here is a working example http://jsfiddle.net/gKsdK/1/
Here is the markup
<h1>Note Generator</h1>
<div class="left">
CSTemplates
<p>
<select class="c10" onchange="showCSTemplates(this);">
<option selected="selected" value="" id="Templates">Please select a template...</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</p>
<p>
<textarea cols="30" rows="20" readonly="readonly" id="CSTemplates">
Templates will auto-populate
here depending on the
selection made from the
[CSTemplates]
drop-down list.
</textarea>
</p>
</div><!--left ends here-->
Here is the JS
function showCSTemplates(sel){
locations =[ "", /*this remains blank for first selection in drop-down list*/
/*option 1*/
" This is template 1 that will appear in a textarea keeping its formatting as is. ",
/*option 2*/
" This is template 2 that will appear in a textarea keeping its formatting as is. Credentials: Contact Info: ",
/*option 3*/
" This is template 3 that will appear in a textarea keeping its formatting as is. Donec tortor lorem, ornare vitae commodo nec, sagittis et nunc. Maecenas sagittis quam ",
/*option 4*/
"etc",
/*option 5*/
"etc...", ];
srcLocation = locations [sel.selectedIndex];
if (srcLocation != undefined && srcLocation != "") {
document.getElementById('CSTemplates').innerHTML= srcLocation;
}
}