AJAX

trying to append value to textarea with select box

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Sep 2004

Posts: 7

Reputation: mwa is an unknown quantity at this point

Solved Threads: 0

mwa

Offline

Newbie Poster

trying to append value to textarea with select box

Jul 16th, 2008

I'm trying to create a tag like routine for music genres. I have an array with various music genres in it. Those genres appear in a select box so they can be added to a text area...

The problem is, I want to be able to add multiple genres instead of a new value replacing the old value.

Heres sample code of what I have so far ...

 Help with Code Tags 
 php Syntax (Toggle Plain Text) 
<?php
$tagarray = array ('Classical', 'Pop', 'Blues');
?>
 
Tags: <select name="tagmenu">
<option value="#">Select Tags</option>
<?php
foreach($tagarray as &$value){
echo '<option value="'.$value.'">'.$value.'</option>'."\n";
}
?>
</select>
<input value="Add" type="button" onClick="document.form1.tags.value=document.form1.tagmenu.options[document.form1.tagmenu.selectedIndex].value;">
<br />
<textarea class="small" name="tags" rows="5" cols="40" wrap="virtual"></textarea>
<?php
$tagarray = array ('Classical', 'Pop', 'Blues');
?>

Tags: <select name="tagmenu">
<option value="#">Select Tags</option>
<?php
foreach($tagarray as &$value){
echo '<option value="'.$value.'">'.$value.'</option>'."\n";
}
?>
</select>
<input value="Add" type="button" onClick="document.form1.tags.value=document.form1.tagmenu.options[document.form1.tagmenu.selectedIndex].value;">
<br />
<textarea class="small" name="tags" rows="5" cols="40" wrap="virtual"></textarea>

Is there some subtle thing in "onCLick" I can change to get it to append the value?, ideally comma separated

•

Join Date: Jul 2008

Posts: 13

Reputation: jsrpatna is an unknown quantity at this point

Solved Threads: 2

jsrpatna

Offline

Newbie Poster

Re: trying to append value to textarea with select box

Jul 16th, 2008

Hi,

You can rephrase your onclick event handling like this.

onClick="document.form1.tags.value +=document.form1.tagmenu.options[document.form1.tagmenu.selectedIndex].value;

Here, I'm assuming that your onclick functionality is working fine

In the above case, the options are added inline to the previous selection. To add options one below another you should add the /n after the += operator. Idea is to save the value of the textarea before changing its value. If want to add comma then you can use the followings

onClick="document.form1.tags.value +=document.form1.tagmenu.options[document.form1.tagmenu.selectedIndex].value + ',';

You can modify this according to your needs so that the "," does not appear un-necessarily.
Another alternative is to provide your users the option of scrollable select with mulitiple select option. In that situation you will not require this button at all! To learn more about scrollable select which permits multiple selection you can refer the following link http://tutorialindia.com/html/html_select_element.php. Here you will need to use both of the select attributes, multiple as well as size.

Hope this helps!

Last edited by jsrpatna; Jul 16th, 2008 at 10:32 am.

•

Join Date: Sep 2004

Posts: 7

Reputation: mwa is an unknown quantity at this point

Solved Threads: 0

mwa

Offline

Newbie Poster

Re: trying to append value to textarea with select box

Jul 16th, 2008

Awesome thanks a lot! I figured it was something simple.. I'm just a javascript noob.. I kept trying to append like you do in PHP, with periods.. which of course didn't work.

Thanks again !

•

Join Date: Oct 2008

Posts: 1

Reputation: geek_Brazil is an unknown quantity at this point

Solved Threads: 0

geek_Brazil geek_Brazil is offline

Offline

Newbie Poster

Re: trying to append value to textarea with select box

Oct 13th, 2008

I need to do a similar stuff, but I have no idea. Can u give some help or show me the way is your code working now? Appending from a mutiple select to the textarea box.

Thanks any way!

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: trying to append value to textarea with select box

Nov 15th, 2008

Let's play a simple demo, hope you find this useful...

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<html>
<head>
<title><!--Sample--></title>
<html>
<head>
<title><!--Sample--></title>

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
<style type="text/css">
@media handheld, print { 
body { 
     width: 50%;
     height: 50%;
     font-size: 11px;
     background-color: #FFFFFF !important; 
 }
}
 
@media screen { 
body {
    background-color: #F6F6F6; 
    color: #696969;
    font-size: 70%;
    font-family: Verdana,Helvetica, Arial, Sans-Serif;
    text-align: left;
 }
}
form { 
    width: 250px;
    height: 150px;
    margin: 0;
    padding: 0;
 
}
form label {
     float: left;
     clear: both;
     font-weight: 700;
     font-size: 12px;
 
}
#selection {
    width: 100px;
    float: left;
    margin: 0;
    padding: 0;
}
#selection select {
    width: 150px;
    float: left;
    margin: 5px 0 25px;
    clear: right;
}
#listing {
    width: auto;
    float: left;
    height: auto;
    margin: 0 auto;
}
#listing textarea {
    float: left;
    padding: 0;
    width: auto;
    height: auto;
    color: #373832;
    margin: 10px 0;
    outline: 2px solid #C0C0C0;
}       
</style>
<style type="text/css">
@media handheld, print { 
body { 
     width: 50%;
     height: 50%;
     font-size: 11px;
     background-color: #FFFFFF !important; 
 }
}

@media screen { 
body {
    background-color: #F6F6F6; 
    color: #696969;
    font-size: 70%;
    font-family: Verdana,Helvetica, Arial, Sans-Serif;
    text-align: left;
 }
}
form { 
    width: 250px;
    height: 150px;
    margin: 0;
    padding: 0;

}
form label {
     float: left;
     clear: both;
     font-weight: 700;
     font-size: 12px;

}
#selection {
    width: 100px;
    float: left;
    margin: 0;
    padding: 0;
}
#selection select {
    width: 150px;
    float: left;
    margin: 5px 0 25px;
    clear: right;
}
#listing {
    width: auto;
    float: left;
    height: auto;
    margin: 0 auto;
}
#listing textarea {
    float: left;
    padding: 0;
    width: auto;
    height: auto;
    color: #373832;
    margin: 10px 0;
    outline: 2px solid #C0C0C0;
}       
</style>

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
<script type="text/javascript">
<!--
 
function listed()
{  
frm1.txt.value +=  frm1.lst.options[frm1.lst.selectedIndex].value;
if (frm1.txt.value.length >= 1) {
for (var x = 0; x <= frm1.lst.options.length; x++) {
frm1.lst.options[x].value = ', Item ' + x; 
  } 
 }
}
document.onclick = listed;
//-->
</script>
<script type="text/javascript">
<!--
 
function listed()
{  
frm1.txt.value +=  frm1.lst.options[frm1.lst.selectedIndex].value;
if (frm1.txt.value.length >= 1) {
for (var x = 0; x <= frm1.lst.options.length; x++) {
frm1.lst.options[x].value = ', Item ' + x; 
  } 
 }
}
document.onclick = listed;
//-->
</script>

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
</head>
<body>
<form name="frm1" action="javascript:void(0);" onsubmit="return false;">
<div id="selection"> 
<label> Categories: </label>
<select name="lst" size="1">
<option value="" disabled>Select An Item</option>
<option value="Item 1">Item 1</option>
<option value="Item 2">Item 2</option>
<option value="Item 3">Item 3</option>
<option value="Item 4">Item 4</option>
<option value="Item 5">Item 5</option>
<option value="Item 6">Item 6</option>
</select></div>
<div id="listing">
<label> Post Request: </label>
<textarea name="txt" rows="5" cols="40" wrap="virtual"></textarea></div>
</form>
</body>
</html>
</head>
<body>
<form name="frm1" action="javascript<b></b>:void(0);" onsubmit="return false;">
<div id="selection"> 
<label> Categories: </label>
<select name="lst" size="1">
<option value="" disabled>Select An Item</option>
<option value="Item 1">Item 1</option>
<option value="Item 2">Item 2</option>
<option value="Item 3">Item 3</option>
<option value="Item 4">Item 4</option>
<option value="Item 5">Item 5</option>
<option value="Item 6">Item 6</option>
</select></div>
<div id="listing">
<label> Post Request: </label>
<textarea name="txt" rows="5" cols="40" wrap="virtual"></textarea></div>
</form>
</body>
</html>