Text shown in <textarea> depending on option in <select>

@MockYJul 18.2007

I have looked around and I am now officially giving up trying to code it myself from scratch. I’m very new to JavaScripting and need help.

I have a a simple option list (have removed all styling, values, and names:

[code=php] <select> <option>Who Are You?</option> <option>John</option> <option>Ryan</option> <option>Sam</option> </select> [/code]

Below it is a simple <textarea></textarea> box.

What I want to accomplish is depending on the selection, a predefined text will be entered in the textbox. In this case it’s an e-mail form and the signature of the sender (the person in the option list) should be displayed automatically when the user selects his name.

How do I go about to do this?

to post a comment

JavaScript

9 Comments(s) _↴

@pugs421Jul 18.2007 — #You want to display an e-mail form and the signature of the sender?

In a textarea?

I don't understand you goal. If it is a form that you wish to display, and a signature (image?) you should populate an empty <div>, not a textarea.Please be more descriptive.

@MockYauthorJul 18.2007 — #Attached is a picture of the form. Just a simple straight up form.

Since the users will use this form often, I don't want them to manually add their signature on the bottom of their email to the receiver every time they send something. So by selecting who you are, the corresponding signature is automatically added in the end of the message.

[upl-file uuid=fd143b5b-5629-4a7b-9298-29680c037557 size=5kB]form1.jpg[/upl-file]

@pugs421Jul 19.2007 — #Copy paste this code. In the end, the select values will be ids? I am using an associative array to store the sigs at this time. There's 101 other ways.

[CODE]
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <script type="text/javascript">
 var arrSignatures= new Array()
 arrSignatures["John"]="Hi I'm john and very cool";
 arrSignatures["Ryan"]="Hi I'm ryan and john has nothing on me";
 arrSignatures["Sam"]="You're all a bunch of punks";
 
 function appendToElement(oSelect){
 document.myForm.txtMessage.value = document.myForm.txtMessage.value + arrSignatures[oSelect.value];
 }
 </SCRIPT>
 </head>
 <body>
 <FORM NAME="myForm"  METHOD="POST" >
 <select onchange="appendToElement(this);">
 <option>Who Are You?</option>
 <option value="John">John</option>
 <option value="Ryan">Ryan</option>
 <option value="Sam">Sam</option>
 </select>
 <textarea name="txtMessage" style="width:300;height:400px;">
 They might have already started typing
 </textarea>
 <input type="submit" value="Submit"></td>
 </FORM>
 </body>
 </html>[/CODE]

@pugs421Jul 19.2007 — #Actually, this is closer to what you needed:

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
 &lt;script type="text/javascript"&gt;
 var arrSignatures= new Array()
 arrSignatures["John"]="Hi I'm john and very cool";
 arrSignatures["Ryan"]="Hi I'm ryan and john has nothing on me";
 arrSignatures["Sam"]="You're all a bunch of punks";
 
 function appendToElement(oSelect){
 var oForm = document.myForm;
 if(oForm.style.display == 'none'){
 oForm.txtMessage.value = oForm.txtMessage.value + arrSignatures[oSelect.value];
 oForm.style.display = '';
 }
 }
 &lt;/SCRIPT&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;select onchange="appendToElement(this);"&gt;
 &lt;option value="-1"&gt;Who Are You?&lt;/option&gt;
 &lt;option value="John"&gt;John&lt;/option&gt;
 &lt;option value="Ryan"&gt;Ryan&lt;/option&gt;
 &lt;option value="Sam"&gt;Sam&lt;/option&gt;
 &lt;/select&gt;
 &lt;FORM NAME="myForm"  METHOD="POST" style="display:none;"&gt;
 &lt;textarea name="txtMessage" style="width:300;height:400px;"&gt;
 &lt;/textarea&gt;
 &lt;input type="submit" value="Submit"&gt;&lt;/td&gt;
 &lt;/FORM&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@MockYauthorJul 19.2007 — #After some tweaking (had to make it work inside a php block) it worked. Over all, the script you made works just fine. Thanks!

But how to I add some paragraph spaces? What ever that inside the signature string is displayed so adding <p> inside of it does not work since it gets displayed instead.

And also, is it possible to remove the previous entry in the message box with another selection? As it is now, if I choose John, his signature is always displayed even hough I choose another user. I can simply add a reset button if they mess up, but it would be nice to make it go away by simply selecting another user.

EDIT: You just posted at the same time. I'm reviewing the new code right now.

EDIT 2: I liked the first code better. I want the form to be displayed and <select> must be within the form in order for PHP to send it.

The first script work just great, but added <p> would be nice as well as a only the entry to the corresponding user should be displayed (replaced if previous entry was there, and not added.

@pugs421Jul 19.2007 — #This should cover everything. Note that you must use "n" to add a new line. I replace any <br> tags in the signature with "n", so you must use <br> if you wish to add a new line (the way it is currently coded).

[CODE]
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <script type="text/javascript">
 var arrSignatures= new Array()
 arrSignatures["John"]="Hi I'm john<br>and very cool";
 arrSignatures["Ryan"]="Hi I'm ryan<br>and john has nothing on me";
 arrSignatures["Sam"]="You're all a<br>bunch of punks";
 
 function appendToElement(oSelect){
 var oForm = document.myForm;
 //oSelect.style.display = 'none';//uncomment this line if you want the select to disappear after they decide who they are.
 //oForm.txtMessage.value = ''; //uncomment this line if you want textarea to be emptied each select choice.
 if(oForm.style.display == 'none'){ //keep this condition if you only want to populate once
 
   oForm.txtMessage.value = oForm.txtMessage.value + arrSignatures[oSelect.value].replace(/<br>/gi,'n');
   oForm.style.display = '';
  }
 }
 </SCRIPT>
 </head>
 <body>
 <select onchange="appendToElement(this);">
 <option value="-1">Who Are You?</option>
 <option value="John">John</option>
 <option value="Ryan">Ryan</option>
 <option value="Sam">Sam</option>
 </select>
 <FORM NAME="myForm"  METHOD="POST" style="display:none;">
 <textarea name="txtMessage" style="width:300;height:400px;"></textarea>
 <input type="submit" value="Submit"></td>
 </FORM>
 </body>
 </html>
 
 [/CODE]

@MockYauthorJul 19.2007 — #The last code does not work like it should the way it is now. The first one you did works perfectly. I just need to be able to add some line breaks before the signature, not after. The replacement of previous entered text (in the case if they choose wrong user) can be fixed with a reset button.

Is it rude to ask if you could tweak the original code you pasted so that it has line breaks before the signature?

@pugs421Jul 19.2007 — #Take notice of the comments in my last post.

There are some line of code in there that can enable functionality if you wish.

All you have to do is uncomment those line (i.e remove the forward slashes //)

Also take note that any <br> tags in the signature are converted to new lines. So if you change

arrSignatures["John"]="Hi I'm john<br>and very cool";

to

arrSignatures["John"]="<br><br><br>Hi I'm john<br>and very cool";

there will be a bunch of new lines added to the text area.

let me know if you still have trouble. I'm leaving soon though.

@MockYauthorJul 19.2007 — #Ahh so that's what .replace(/<br>/gi,'n') did. I see the relation now. Works like a charm.

Huge thanks! You're a life saver.

Also in #JavaScript _↴

script search page navigation Question about javascript:

Success!

Help @MockY spread the word by sharing this article on Twitter...

Tweet This

Text shown in <textarea> depending on option in <select>

9 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Text shown in <textarea> depending on option in <select>

9 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #JavaScript _↴