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]

Re: populate text box from dropdown

"Dannyboyo" <dannyboy@gto.n et> writes:
[color=blue]
> 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.[/color]

Try this:
---
<script type="text/javascript">
function copy() {
var sel = document.getEle mentById("names ");
var text = sel.options.val ue;
var out = document.getEle mentById("outpu t");
out.value += text+"\n";
}
</script>

<select id="names">
<option>Produ ct One</option>
<option>Produ ct Two</option>
<option>Produ ct Three</option>
<option>Produ ct 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 - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[Desperado]

Re: populate text box from dropdown


"Lasse Reichstein Nielsen" <lrn@hotpop.com > wrote in message
news:65gaf9p4.f sf@hotpop.com.. .[color=blue]
> "Dannyboyo" <dannyboy@gto.n et> writes:
>[color=green]
> > This is how I see it looking:
> >
> > Dropdown on left, 'COPY' button in middle, Textbox on[/color][/color]
right.[color=blue][color=green]
> >
> > 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.[/color][/color]

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.

[color=blue]
>
> Try this:
> ---
> <script type="text/javascript">
> function copy() {
> var sel = document.getEle mentById("names ");
> var text = sel.options.val ue;
> var out = document.getEle mentById("outpu t");
> out.value += text+"\n";
> }
> </script>
>
> <select id="names">
> <option>Produ ct One</option>
> <option>Produ ct Two</option>
> <option>Produ ct Three</option>
> <option>Produ ct 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 - lrn@hotpop.com
> DHTML Death Colors:[/color]
<URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>[color=blue]
> 'Faith without judgement merely degrades the spirit divine.'[/color]

[Chris]

Re: populate text box from dropdown

I think the line that reads:
[color=blue][color=green]
> > var text = sel.options.val ue;[/color][/color]

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

Regards,
Chris.


"Desperado" <desperado_ride s@hotmail.net> wrote in message
news:ee3e6021ab 0242f4b971c0ed7 6c84de7@news.te ranews.com...[color=blue]
>
> "Lasse Reichstein Nielsen" <lrn@hotpop.com > wrote in message
> news:65gaf9p4.f sf@hotpop.com.. .[color=green]
> > "Dannyboyo" <dannyboy@gto.n et> writes:
> >[color=darkred]
> > > This is how I see it looking:
> > >
> > > Dropdown on left, 'COPY' button in middle, Textbox on[/color][/color]
> right.[color=green][color=darkred]
> > >
> > > 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.[/color][/color]
>
> I am trying to accomplish something similar to this.
> I would like to select options from dropdowns, as well as enter text in[/color]
text[color=blue]
> 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[/color]
one[color=blue]
> text field that would be copied into another text area, I could modify and
> build upon that.
>
> Any and all help appreciated.
>
>[color=green]
> >
> > Try this:
> > ---
> > <script type="text/javascript">
> > function copy() {
> > var sel = document.getEle mentById("names ");
> > var text = sel.options.val ue;
> > var out = document.getEle mentById("outpu t");
> > out.value += text+"\n";
> > }
> > </script>
> >
> > <select id="names">
> > <option>Produ ct One</option>
> > <option>Produ ct Two</option>
> > <option>Produ ct Three</option>
> > <option>Produ ct 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 - lrn@hotpop.com
> > DHTML Death Colors:[/color]
> <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>[color=green]
> > 'Faith without judgement merely degrades the spirit divine.'[/color]
>
>
>[/color]

[Chris]

Re: populate text box from dropdown

I think the line:[color=blue][color=green]
> > var text = sel.options.val ue;[/color][/color]
should read something like:
var text = sel.options[sel.selectedInd ex].value;

Regards,
Chris.

"Desperado" <desperado_ride s@hotmail.net> wrote in message
news:ee3e6021ab 0242f4b971c0ed7 6c84de7@news.te ranews.com...[color=blue]
>
> "Lasse Reichstein Nielsen" <lrn@hotpop.com > wrote in message
> news:65gaf9p4.f sf@hotpop.com.. .[color=green]
> > "Dannyboyo" <dannyboy@gto.n et> writes:
> >[color=darkred]
> > > This is how I see it looking:
> > >
> > > Dropdown on left, 'COPY' button in middle, Textbox on[/color][/color]
> right.[color=green][color=darkred]
> > >
> > > 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.[/color][/color]
>
> I am trying to accomplish something similar to this.
> I would like to select options from dropdowns, as well as enter text in[/color]
text[color=blue]
> 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[/color]
one[color=blue]
> text field that would be copied into another text area, I could modify and
> build upon that.
>
> Any and all help appreciated.
>
>[color=green]
> >
> > Try this:
> > ---
> > <script type="text/javascript">
> > function copy() {
> > var sel = document.getEle mentById("names ");
> > var text = sel.options.val ue;
> > var out = document.getEle mentById("outpu t");
> > out.value += text+"\n";
> > }
> > </script>
> >
> > <select id="names">
> > <option>Produ ct One</option>
> > <option>Produ ct Two</option>
> > <option>Produ ct Three</option>
> > <option>Produ ct 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 - lrn@hotpop.com
> > DHTML Death Colors:[/color]
> <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>[color=green]
> > 'Faith without judgement merely degrades the spirit divine.'[/color]
>
>
>[/color]

[Desperado]

Re: populate text box from dropdown


"Desperado" <desperado_ride s@hotmail.net> wrote in message
news:ee3e6021ab 0242f4b971c0ed7 6c84de7@news.te ranews.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="JavaS cript">
<!-- Begin
oldvalue = "";
function passText(passed value) {
if (passedvalue != "") {
var totalvalue = passedvalue+"\n "+oldvalue;
document.displa yform.itemsbox. value = totalvalue;
oldvalue = document.displa yform.itemsbox. value;
}
}
// End -->
</script>
</HEAD>
<BODY>
<form name="selectfor m">
<font face="Arial, Helvetica, Sans Serif" size="3"><b>Sel ect an
Item:</b></font><br>
<select name="dropdownb ox" 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="passTe xt(this.form.dr opdownbox.optio ns[this.form.dropd ownbox.select
edIndex].value);">
</form>
<HR>
<form name="displayfo rm" >
<font face="Arial, Helvetica, Sans Serif" size="3"><b>Ite ms added to
list:</b></font><br>
<textarea cols="80" rows="10" name="itemsbox" ></textarea>
</form>
</body>
</html>

[@SM]

Re: populate text box from dropdown

Dannyboyo a ecrit :[color=blue]
>
> 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[/color]

You mean a textarea ?
[color=blue]
> 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.[/color]

2 soluces :

1) automatic :
==============
<select onchange="nn=th is.options.sele ctedIndex;
(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="MyTextare a" 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.sel ectedIndex;
Article = chx.options[nn].value;
}
function choiceAdd(item) {
if(item=='choic er') {
choiceArt();
C[C.length] = Article;
}
else
C[C.length] = document.forms['MyForm']['other'].value
}
function choiceDel(item) {
if(item=='choic er') {
choiceArt();
for(i=0;i<C.len gth;i++)
if(C[i]==Article) j=i+1*1;
}
else
for(i=0;i<C.len gth;i++)
if(C[i]==document.form s['MyForm']['other'].value)
j=i+1*1;
for(i=j;i<C.len gth;i++)
C[i-1]=C[i];
C.length=(i-1*1);
}
function choiceMem(){
with(document.f orms['MyForm']['Result']) {
value='';
for(i=0;i<C.len gth;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=th is.options.sele ctedIndex;
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">P oires
</select>
<input type=button onclick="choice Add('choicer'); choiceMem();"
value="Add this article">
<input type=button onclick="choice Del('choicer'); choiceMem();"
value="Delete this article">
<input type=button onclick="choice Reset();"
value="Delette all my choices">
<p>Enter here an other article :
<input type=text name="other" id="other">
<input type=button onclick="choice Add(0);choiceMe m();"
value="Add this new article">
<input type=button onclick="choice Del(0);choiceMe m();"
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]

Re: populate text box from dropdown

Desperado a ecrit :[color=blue]
>
> "Desperado" <desperado_ride s@hotmail.net> wrote in message
> news:ee3e6021ab 0242f4b971c0ed7 6c84de7@news.te ranews.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.[/color]

See my other post
[color=blue]
> <HEAD>
> <SCRIPT LANGUAGE="JavaS cript">
> <!-- Begin
> oldvalue = "";
> function passText(passed value) {
> if (passedvalue != "") {
> var totalvalue = passedvalue+"\n "+oldvalue;
> document.displa yform.itemsbox. value = totalvalue;
> oldvalue = document.displa yform.itemsbox. value;[/color]

if (passedvalue != "")
document.displa yform.itemsbox. value += '\n'+passedvalu e;
[color=blue]
> }
> }
> // End -->
> </script>
> </HEAD>
> <BODY>
> <form name="selectfor m">
> <font face="Arial, Helvetica, Sans Serif" size="3"><b>Sel ect an
> Item:</b></font><br>
> <select name="dropdownb ox" 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="passTe xt(this.form.dr opdownbox.optio ns[this.form.dropd ownbox.select
> edIndex].value);">[/color]

onClick="passTe xt(this.options[this.options.se lectedIndex].value);">
[color=blue]
> </form>
> <HR>
> <form name="displayfo rm" >
> <font face="Arial, Helvetica, Sans Serif" size="3"><b>Ite ms added to
> list:</b></font><br>
> <textarea cols="80" rows="10" name="itemsbox" ></textarea>
> </form>
> </body>
> </html>[/color]

[Desperado]

Re: populate text box from dropdown


"@SM" <stephane_moria ux@wanadoo.fr> wrote in message
news:3FE5E3D5.7 E731EE8@wanadoo .fr...[color=blue]
>
> See my other post
>[/color]
It was a beautiful thing.

Thank You

[Lasse Reichstein Nielsen]

Re: populate text box from dropdown

"Chris" <c_bartlett@btc onnect.com> writes:

Please don't top post.
[color=blue]
> I think the line that reads:
>[color=green][color=darkred]
>> > var text = sel.options.val ue;[/color][/color]
>
> should read:
> var text = sel.options[sel.selectedInd ex].value;[/color]

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 - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[Desperado]

Re: populate text box from dropdown


"Desperado" <desperado_ride s@hotmail.net> wrote in message
news:3d1ca33dc6 bd326f1dc7b1fcf 01320d8@news.te ranews.com...[color=blue]
>
> "@SM" <stephane_moria ux@wanadoo.fr> wrote in message
> news:3FE5E3D5.7 E731EE8@wanadoo .fr...[color=green]
> >
> > See my other post
> >[/color]
> It was a beautiful thing.
>
> Thank You[/color]

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]

Re: populate text box from dropdown

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]

Re: populate text box from dropdown

"Dannyboyo" <dannyboy@gto.n et> writes:
[color=blue]
> Then only thing I want to add is a Line feed if Not inserted by the
> customer, like this...[/color]


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

Try:

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

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

[Dannyboyo]

Re: populate text box from dropdown

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]

Re: populate text box from dropdown


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