populate text box from dropdown

D

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
 
L

Lasse Reichstein Nielsen

Dannyboyo said:
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.
Click to expand...

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
 
D

Desperado

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

Desperado

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

Chris

I think the line that reads:

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

Regards,
Chris.
 
C

Chris

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

Regards,
Chris.
 
@

@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
Click to expand...

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.
Click to expand...

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==Article) j=i+1*1;
}
else
for(i=0;i<C.length;i++)
if(C==document.forms['MyForm']['other'].value)
j=i+1*1;
for(i=j;i<C.length;i++)
C[i-1]=C;
C.length=(i-1*1);
}
function choiceMem(){
with(document.forms['MyForm']['Result']) {
value='';
for(i=0;i<C.length;i++) {
value += C;
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 :
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.
Click to expand...

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;
Click to expand...

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>
Click to expand...
 
L

Lasse Reichstein Nielsen

Please don't top post.
I think the line that reads:

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

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
 
D

Desperado

Desperado said:
It was a beautiful thing.

Thank You
Click to expand...

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

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
 
L

Lasse Reichstein Nielsen

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


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
Click to expand...

Try:

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

/L
 
D

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
 
D

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
 
D

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
 
D

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
 
@

@SM

Desperado a ecrit :
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?
Click to expand...

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

done in link
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Add Image and label dynamically inside the dropdown 2
How to add dropdown selected data to table using jquery 2
Auto populate the Dropdown List 11
Passing selected row from gridview to dropdown 0
AngularJS Calendar's years dropdown disappears in tablet but not in pc 0
Dynamically populate text field based on dropdown box value inColdfusion 2
HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated 1
Multi select options in a menu 1

Members online

No members online now.
Total: 16 (members: 0, guests: 16)
Robots: 393

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top