populate text box from dropdown

[Dannyboyo]

I have what I hope is a simple request. I can't really code in javascript, but I am pretty good at cusomizing it with
slight modifications. I code in ASP and HTML.

I am trying to capture customer input of product names to put on custom labels we make. Some of the labels will have our
product names on them, but the customer can add other products that we do not sell.

So, on my product detail page I want a textbox that can have rows copied from values in a dropdown box (containing 700
product ids and names). This is so I can pass the values from the textbox to my ASP script for processing into the
database.

This is how I see it looking:

Dropdown on left, 'COPY' button in middle, Textbox on right.

So you would select a product in the dropdown, click the button and that product would be APPENDED to the textbox,
either before or after the other items already in it. Then the customer would choose another product in the dropdown and
click the button to append it to the list, etc.

The customer will also be allowed to type in other items in the textbox.

Is this do-able? From my sketchy web-search reading, I see that Netscape does not allow copying to clipboard. I don't
think the clipboard would be required, since the source and destination controls are on the same web page, so I believe
javascript can handle it all.

Any responses are greatly appreciated.

Daniel Dillon

[Lasse Reichstein Nielsen]

"Dannyboyo" <da******@gto.net> writes:

This is how I see it looking:

Dropdown on left, 'COPY' button in middle, Textbox on right.

So you would select a product in the dropdown, click the button and
that product would be APPENDED to the textbox, either before or
after the other items already in it.

Try this:
---
<script type="text/javascript">
function copy() {
var sel = document.getElementById("names");
var text = sel.options.value;
var out = document.getElementById("output");
out.value += text+"\n";
}
</script>

<select id="names">
<option>Product One</option>
<option>Product Two</option>
<option>Product Three</option>
<option>Product Four</option>
</select>
<input type="button" onclick="copy()" value="Copy">
<textarea id="output"></textarea>
---

If you need it to work in older browsers, e.g., Netscape 4, you need
more Javascript to handle it.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

[Desperado]

"Lasse Reichstein Nielsen" <lr*@hotpop.com> wrote in message
news:65**********@hotpop.com...

"Dannyboyo" <da******@gto.net> writes:

This is how I see it looking:

Dropdown on left, 'COPY' button in middle, Textbox on right.
So you would select a product in the dropdown, click the button and
that product would be APPENDED to the textbox, either before or
after the other items already in it.

I am trying to accomplish something similar to this.
I would like to select options from dropdowns, as well as enter text in text
fields, and upon pressing the submit button, have the text and selections
copied into another, larger, text area box.

The example/suggestion ofered below doesn't seem to work for me.

Since my scripting skils are very rudimentary, perhaps if someone would be
so kind as to provide a complete, working example with one dropdown and one
text field that would be copied into another text area, I could modify and
build upon that.

Any and all help appreciated.


Try this:
---
<script type="text/javascript">
function copy() {
var sel = document.getElementById("names");
var text = sel.options.value;
var out = document.getElementById("output");
out.value += text+"\n";
}
</script>

<select id="names">
<option>Product One</option>
<option>Product Two</option>
<option>Product Three</option>
<option>Product Four</option>
</select>
<input type="button" onclick="copy()" value="Copy">
<textarea id="output"></textarea>
---

If you need it to work in older browsers, e.g., Netscape 4, you need
more Javascript to handle it.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html> 'Faith without judgement merely degrades the spirit divine.'

[Chris]

I think the line that reads:

var text = sel.options.value;
should read:
var text = sel.options[sel.selectedIndex].value;

Regards,
Chris.
"Desperado" <de*************@hotmail.net> wrote in message
news:ee******************************@news.teranew s.com...

"Lasse Reichstein Nielsen" <lr*@hotpop.com> wrote in message
news:65**********@hotpop.com...

"Dannyboyo" <da******@gto.net> writes:

This is how I see it looking:

Dropdown on left, 'COPY' button in middle, Textbox on

right.
So you would select a product in the dropdown, click the button and
that product would be APPENDED to the textbox, either before or
after the other items already in it.

I am trying to accomplish something similar to this.
I would like to select options from dropdowns, as well as enter text in

text fields, and upon pressing the submit button, have the text and selections
copied into another, larger, text area box.

The example/suggestion ofered below doesn't seem to work for me.

Since my scripting skils are very rudimentary, perhaps if someone would be
so kind as to provide a complete, working example with one dropdown and one text field that would be copied into another text area, I could modify and
build upon that.

Any and all help appreciated.

Try this:
---
<script type="text/javascript">
function copy() {
var sel = document.getElementById("names");
var text = sel.options.value;
var out = document.getElementById("output");
out.value += text+"\n";
}
</script>

<select id="names">
<option>Product One</option>
<option>Product Two</option>
<option>Product Three</option>
<option>Product Four</option>
</select>
<input type="button" onclick="copy()" value="Copy">
<textarea id="output"></textarea>
---

If you need it to work in older browsers, e.g., Netscape 4, you need
more Javascript to handle it.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors:

<URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>

'Faith without judgement merely degrades the spirit divine.'

[Chris]

I think the line:

var text = sel.options.value; should read something like:
var text = sel.options[sel.selectedIndex].value;

Regards,
Chris.

"Desperado" <de*************@hotmail.net> wrote in message
news:ee******************************@news.teranew s.com...

"Lasse Reichstein Nielsen" <lr*@hotpop.com> wrote in message
news:65**********@hotpop.com...

"Dannyboyo" <da******@gto.net> writes:

This is how I see it looking:

Dropdown on left, 'COPY' button in middle, Textbox on

right.
So you would select a product in the dropdown, click the button and
that product would be APPENDED to the textbox, either before or
after the other items already in it.

I am trying to accomplish something similar to this.
I would like to select options from dropdowns, as well as enter text in

text fields, and upon pressing the submit button, have the text and selections
copied into another, larger, text area box.

The example/suggestion ofered below doesn't seem to work for me.

Since my scripting skils are very rudimentary, perhaps if someone would be
so kind as to provide a complete, working example with one dropdown and one text field that would be copied into another text area, I could modify and
build upon that.

Any and all help appreciated.

Try this:
---
<script type="text/javascript">
function copy() {
var sel = document.getElementById("names");
var text = sel.options.value;
var out = document.getElementById("output");
out.value += text+"\n";
}
</script>

<select id="names">
<option>Product One</option>
<option>Product Two</option>
<option>Product Three</option>
<option>Product Four</option>
</select>
<input type="button" onclick="copy()" value="Copy">
<textarea id="output"></textarea>
---

If you need it to work in older browsers, e.g., Netscape 4, you need
more Javascript to handle it.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors:

<URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>

'Faith without judgement merely degrades the spirit divine.'

[Desperado]

"Desperado" <de*************@hotmail.net> wrote in message
news:ee******************************@news.teranew s.com...

OK, I have a script that does almost exactly what I want, concerning
dropdown selections.
Now I would like to add a text input field that adds the text to the same
area as the dropdown.
Doesn't matter if it submits from the same button as the dropdown or from
it's own button.
My script is below:

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
oldvalue = "";
function passText(passedvalue) {
if (passedvalue != "") {
var totalvalue = passedvalue+"\n"+oldvalue;
document.displayform.itemsbox.value = totalvalue;
oldvalue = document.displayform.itemsbox.value;
}
}
// End -->
</script>
</HEAD>
<BODY>
<form name="selectform">
<font face="Arial, Helvetica, Sans Serif" size="3"><b>Select an
Item:</b></font><br>
<select name="dropdownbox" size=1>
<option value="">Make selection</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>
<input type=button value="Add to list"

onClick="passText(this.form.dropdownbox.options[this.form.dropdownbox.select
edIndex].value);">
</form>
<HR>
<form name="displayform" >
<font face="Arial, Helvetica, Sans Serif" size="3"><b>Items added to
list:</b></font><br>
<textarea cols="80" rows="10" name="itemsbox" ></textarea>
</form>
</body>
</html>

[@SM]

Dannyboyo a ecrit :

I have what I hope is a simple request. I can't really code in javascript, but I am pretty good at cusomizing it with
slight modifications. I code in ASP and HTML.

I am trying to capture customer input of product names to put on custom labels we make. Some of the labels will have our
product names on them, but the customer can add other products that we do not sell.

So, on my product detail page I want a textbox
You mean a textarea ?
that can have rows copied from values in a dropdown box (containing 700
product ids and names). This is so I can pass the values from the textbox to my ASP script for processing into the
database.

This is how I see it looking:

Dropdown on left, 'COPY' button in middle, Textbox on right.

2 soluces :

1) automatic :
==============
<select onchange="nn=this.options.selectedIndex;
(nn==0)? alert('Make an other choice in list') :
this.form['MyTextarea'] += this.options[nn].value+'\n';"
name ... id ... etc >
<option blah blah
<option blah blah
</select>
<textarea name="MyTextarea" id="MyTextarea" rows=8>
2) by force with buttons :
==========================
<html>
<script type="text/javascript"><!--
C = new Array();
function choiceArt(){
chx = document.forms['MyForm']['choicer'];
nn = chx.options.selectedIndex;
Article = chx.options[nn].value;
}
function choiceAdd(item){
if(item=='choicer') {
choiceArt();
C[C.length] = Article;
}
else
C[C.length] = document.forms['MyForm']['other'].value
}
function choiceDel(item){
if(item=='choicer') {
choiceArt();
for(i=0;i<C.length;i++)
if(C[i]==Article) j=i+1*1;
}
else
for(i=0;i<C.length;i++)
if(C[i]==document.forms['MyForm']['other'].value)
j=i+1*1;
for(i=j;i<C.length;i++)
C[i-1]=C[i];
C.length=(i-1*1);
}
function choiceMem(){
with(document.forms['MyForm']['Result']) {
value='';
for(i=0;i<C.length;i++) {
value += C[i];
if(i<(C.length-1*1)) value += '\n';
}
}
}
function choiceReset() {
C = new Array();
document.forms['MyForm']['Result'].value=' ';
}
// --></script>
<form name="MyForm" id="MyForm" action="p.htm"
onsubmit="alert(this['Result'].value);
// return false;
">
<p><select onchange="nn=this.options.selectedIndex;
if(nn==0) alert('Make an other choice in list');"
name="choicer" id="choicer">
<option selected>Choice an article here
<option value="apples">Pommes
<option value="bananas">Bananes
<option value="pears">Poires
</select>
<input type=button onclick="choiceAdd('choicer');choiceMem();"
value="Add this article">
<input type=button onclick="choiceDel('choicer');choiceMem();"
value="Delete this article">
<input type=button onclick="choiceReset();"
value="Delette all my choices">
<p>Enter here an other article :
<input type=text name="other" id="other">
<input type=button onclick="choiceAdd(0);choiceMem();"
value="Add this new article">
<input type=button onclick="choiceDel(0);choiceMem();"
value="Delete this new article">
<p>That are your choices :
<textarea name="Result" id="Result" rows=12>
</textarea>
<p><input type=submit value="test">
</form>
</html>

[@SM]

Desperado a ecrit :

"Desperado" <de*************@hotmail.net> wrote in message
news:ee******************************@news.teranew s.com...

OK, I have a script that does almost exactly what I want, concerning
dropdown selections.
Now I would like to add a text input field that adds the text to the same
area as the dropdown.
See my other post
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
oldvalue = "";
function passText(passedvalue) {
if (passedvalue != "") {
var totalvalue = passedvalue+"\n"+oldvalue;
document.displayform.itemsbox.value = totalvalue;
oldvalue = document.displayform.itemsbox.value;
if (passedvalue != "")
document.displayform.itemsbox.value += '\n'+passedvalue;
}
}
// End -->
</script>
</HEAD>
<BODY>
<form name="selectform">
<font face="Arial, Helvetica, Sans Serif" size="3"><b>Select an
Item:</b></font><br>
<select name="dropdownbox" size=1>
<option value="">Make selection</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>
<input type=button value="Add to list"

onClick="passText(this.form.dropdownbox.options[this.form.dropdownbox.select
edIndex].value);">
onClick="passText(this.options[this.options.selectedIndex].value);">
</form>
<HR>
<form name="displayform" >
<font face="Arial, Helvetica, Sans Serif" size="3"><b>Items added to
list:</b></font><br>
<textarea cols="80" rows="10" name="itemsbox" ></textarea>
</form>
</body>
</html>

[Desperado]

"@SM" <st**************@wanadoo.fr> wrote in message
news:3F***************@wanadoo.fr...

See my other post

It was a beautiful thing.

Thank You

[Lasse Reichstein Nielsen]

"Chris" <c_********@btconnect.com> writes:

Please don't top post.

I think the line that reads:

> var text = sel.options.value;

should read:
var text = sel.options[sel.selectedIndex].value;

Actually, I meant to write

var text = sel.value;

The longer version is necessary in, e.g., Netscape 4, but modern
browsers allow you to take the value from the select element itself.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

[Desperado]

"Desperado" <de*************@hotmail.net> wrote in message
news:3d******************************@news.teranew s.com...

"@SM" <st**************@wanadoo.fr> wrote in message
news:3F***************@wanadoo.fr...

See my other post

It was a beautiful thing.

Thank You

OK, I guess my scripting skills are more rudimentary than I thought.

Your code worked PERFECTLY with one dropdown and one text area, but I am
struggling with adding additional inputs.

Would you be so kind as to paste up that code again, with two different
dropdowns and two different text inputs, so I can see the differences
between things such as ['MyForm']['other'].value and
['MyForm']['other1'].value, and which areas I need to modify to incluse the
additional inputs?

I wouldn't even complain if you commented it :)

Thanks you SO MUCH for your assistance with this.

[Dannyboyo]

Thanks Lasse.

It works good.
Then only thing I want to add is a Line feed if Not inserted by the customer, like this...

If (cursor is on a blank line) THEN
out.value += text+"\n";
ELSE
out.value += "\n"+text+"\n";
END IF

Daniel Dillon

[Lasse Reichstein Nielsen]

"Dannyboyo" <da******@gto.net> writes:

Then only thing I want to add is a Line feed if Not inserted by the
customer, like this...

I was considering putting it in, but decided to keep it simple :)
If (cursor is on a blank line) THEN
out.value += text+"\n";
ELSE
out.value += "\n"+text+"\n";
END IF

Try:

var val = out.value;
val.replace(/\s*$/,""); // remove terminating whitespace, if any
val += "\n"+text+"\n";
out.value = val;

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

[Dannyboyo]

Thanks again Lasse.

I can't find the correct position for this block of script.
Do I need to remove a line from the original script?

Daniel Dillon

[Dannyboyo]

Well, I figured it out. It works, but not as I wish. It causes a blank line to appear between lines of text. I would
like there to be no blank lines. What I am trying to acccomplish with the additional lines of text is to prevent the
user from typing in a line and being unaware that he has to hit 'Enter' before he can choose another from the dropdown.
Below is an example of a customer choosing a few from the dropdown, then typing in 'Daisies' and choosing a couple more
from dropdown. So I only want to cause a line feed if the cursor was left at the end of the word 'Daisies'.

PLANT 056
PLANT 322
PLANT 184
DaisiesPLANT 245
PLANT 821
PLANT 077

I hope this explanation is easy to understand.

Daniel Dillon

[HikksNotAtHome]

In article <_-********************@golden.net>, "Dannyboyo" <da******@gto.net>
writes:

Below is an example of a customer choosing a few from the dropdown, then
typing in 'Daisies' and choosing a couple more
from dropdown. So I only want to cause a line feed if the cursor was left at
the end of the word 'Daisies'.

Instead of commenting it heavily, I chose to use variable names that were
pretty descriptive (if not overly long names) of what they were used for.

This script:

<script type="text/javascript">
function addNextItem(itemValue,outputDestination){
formElement = document.forms['myForm'].elements[outputDestination]
tempVar = formElement.value
if (tempVar.lastIndexOf("\n") != tempVar.length-1){
tempVar = tempVar + "\n"
}
formElement.value = tempVar;
formElement.value += itemValue + '\n';
}
</script>

Although I seem to recall that some browsers may use \r or \n\r or \r\n or some
other combination for line breaks in a textarea.

With this HTML:

<form name="myForm" id="myForm">
<select onchange="addNextItem(this.value,'textOutput1')">
<option value="A1">A1</option>
<option value="A2">A2</option>
<option value="A3">A3</option>
<option value="B1">B1</option>
<option value="B2">B2</option>
<option value="B3">B3</option>
<option value="C1">C1</option>
<option value="C2">C2</option>
<option value="C3">C3</option>
</select>
<input type="text" name="textInput1" size="30">
<input type="button" value="Add It To The List"
onclick="addNextItem(document.myForm.textInput1.va lue,'textOutput1')">
<textarea name="textOutput1" cols="30" rows="10"></textarea>
<br />
<select onchange="addNextItem(this.value,'textOutput2')">
<option value="A1">A1</option>
<option value="A2">A2</option>
<option value="A3">A3</option>
<option value="B1">B1</option>
<option value="B2">B2</option>
<option value="B3">B3</option>
<option value="C1">C1</option>
<option value="C2">C2</option>
<option value="C3">C3</option>
</select>
<input type="text" name="textInput2" size="30">
<input type="button" value="Add It To The List"
onclick="addNextItem(document.myForm.textInput2.va lue,'textOutput2')">
<textarea name="textOutput2" cols="30" rows="10"></textarea>
</form>

Has several ways to do what you described. Beware of line-wrapping.
Modify as desired.

Tested in IE6, Firebird 0.7 and Opera 7 on a PC. I know, as written, it will
not work in NN4 (NN4 wont pass the value of a select list the way I am passing
it).

If you keep the text input box I used, there needs to be a test to make sure
the value it gets is not a blank value, or you end up with multiple blank
lines. The simplest solution to that is to have a script replace \n\n with \n
upon submission of the form.

Hope this helps.
--
Randy

[Desperado]

"HikksNotAtHome" <hi************@aol.com> wrote in message
news:20***************************@mb-m25.aol.com...

PERFECT

You ROCK!!!!!

Thanks

[Dannyboyo]

Thanks Randy.

This works good - Really good.

I wonder if you can change the code slightly to force the customer to hit a button to add the item from the first
dropdown. I have a dropdown list of about 700 items, so to help navigate the list, I want to give customers a tip to
type the first letter of the item. But with the code the way it is, that adds the first item with that letter to the
textarea.

Thanks for your help.

Daniel Dillon

[Dannyboyo]

I think I got it right. I just Cut and Pasted the 'onChange' value to the onClick value of a command button and it works
good for me. Unless there is any risk in that, I am happy with it that way. Thanks Randy and Lasse both.

Daniel Dillon

[HikksNotAtHome]

In article <3v********************@golden.net>, "Dannyboyo" <da******@gto.net>
writes:

Thanks Randy.

This works good - Really good.

I wonder if you can change the code slightly to force the customer to hit a
button to add the item from the first
dropdown. I have a dropdown list of about 700 items, so to help navigate the
list, I want to give customers a tip to
type the first letter of the item. But with the code the way it is, that adds
the first item with that letter to the
textarea.

Thanks for your help.

Daniel Dillon

Remove the onchange from the select, and add a name to it:

<select name="mySelect1">

And add a button:

<input type="button" value="Add It To The List"
onclick="addNextItem(document.myForm.mySelect1.val ue,'textOutput1')">

And now, its still working in modern browsers, and utterly broken in NN4.
Although it didn't work there to begin with (I am too lazy at the moment to
make it work in NN4).
--
Randy

[@SM]

Desperado a ecrit :

"Desperado" <de*************@hotmail.net> wrote in message
news:3d******************************@news.teranew s.com...

"@SM" <st**************@wanadoo.fr> wrote in message
news:3F***************@wanadoo.fr...

See my other post

Your code worked PERFECTLY with one dropdown and one text area, but I am
struggling with adding additional inputs.

Would you be so kind as to paste up that code again, with two different
dropdowns and two different text inputs, so I can see the differences
between things such as ['MyForm']['other'].value and
['MyForm']['other1'].value, and which areas I need to modify to incluse the
additional inputs?

Here you are :
http://perso.wanadoo.fr/stephane.moriaux/truc/ta/
I wouldn't even complain if you commented it :)

done in link