DaniWeb IT Discussion Community - trying to append value to textarea with select box

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/index.php)

- JavaScript / DHTML / AJAX (http://www.daniweb.com/forums/forum117.html)

- - trying to append value to textarea with select box (http://www.daniweb.com/forums/thread134778.html)

trying to append value to textarea with select box

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 ...

<?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 :-/

Re: trying to append value to textarea with select box

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!

Re: trying to append value to textarea with select box

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 !

Re: trying to append value to textarea with select box

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!

Re: trying to append value to textarea with select box

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

<html>

<head>

<title><!--Sample--></title>

<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>

<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>

</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>