...

View Full Version : Drop Down Inputs into Text input box



@PEACE
06-01-2005, 04:20 AM
Hello,

My knowledge of javascript is quite frankly...almost non existent. I know what it is and I know what it can do but for the greater part I have no clue how to get it to do what I want.

I've spent the past week trying to find an answer on websites. I get lost and I can't find what I need.

What I need is very simple. I know it can be done with javascript and I imagine it is only a few lines of code.

I run a chat room. On our options page there is a drop down menu for possible colors. We want to expand this to allow custom colors...yet allow the presets as well. My solution? Rather than have two independent boxes I realized a rather easy solution...javascript.

I had seen a script once that allowed you to select an option from a drop down menu which then in turn inserted the value of the selection into a text box...that's what I want to do for or options page.

I would like a simple combo box to insert its value into a textinput field when selected. Well, I guess not even its value, I would like it to input the text of the option itself (well, either).

This would allow users to select a preset color or simply select "custom" from the drop down menu (which would insert a value of absolutetly nothing into the text input box and then they could insert their own hex.

HOWEVER, if they wanted a preset all they'd do is select the preset and it would insert the hex into the text input box.

I do believe this is very simple...I just can not for the life of me figure out how. Any help would be GREATLY appreciated.

SpirtOfGrandeur
06-01-2005, 02:49 PM
You are right. This is very easy to do. But straight from the Posting Rules:



3) Do your homework first. Only post the part of the script you're having trouble with! There are generally two types of people- ones that simply dump their entire page or problem and expect everyone to spend hours solving everything for them, and those that do their own homework first, and only ask very specific, manageable questions. The later invariably gets more and better responses from others. When you're lazy, do not expect us to be hardworking for you.

As an example, lets say you're working on a long script that uses the "switch" statement of JavaScript, and it's returning errors. You could either:

i) Post the entire script and simply say "Please debug this script for me!"
ii) Or, localize the problem yourself first and post instead "Can someone tell me the syntax of the switch statement in JavaScript?"

The second question will get a LOT more quality responses, as it is concise, manageable, and not overwhelming. Remember, ask for the world, and you'll get nothing. Ask for a little, and you'll get a lot.


Also there is no code even started that we could play with. No one is just going to write something for you! Well I take that back, some times people do when they feel up to the challenge. But you need to at least try. Or show us what you have. I have nothing to base any thing off of. Where it could go? The select box in question? How about a little bit of code?

martin_narg
06-02-2005, 02:55 PM
My comments to follow!



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Colour picker</title>
<script>

// display a chosen colour
function pickColor( strColorCode ) {
document.getElementById("divColorPicker").innerHTML = "";
document.getElementById("txtColorCode").value = strColorCode;
document.getElementById("selColorPicker").selectedIndex = 0;
}

function colorPopup() {
var arrColorParts = new Array("00", "33", "66", "99", "CC", "FF"); // the hexidecimal parts of the colours

var strTemp = '<table cellspacing="1" cellpadding="1" style="border: 1px solid black">\n<tr>\n';

var r, g, b, strColor;
for( g=0; g<arrColorParts.length; g++ ) { // green RGB value part
for( r=0; r<arrColorParts.length; r++ ) { // red RGB value part
for( b=0; b<arrColorParts.length; b++ ) { // blue RGB value part
strColor = "#"+arrColorParts[r]+arrColorParts[g]+arrColorParts[b]; // get the relevant html colour code
strTemp += '<td width="10" style="background-color: ' + strColor + '; border: 1px solid black; cursor: hand;" onclick="pickColor(\'' + strColor + '\');">&nbsp;</td>\n';
}
}
strTemp += '\n</tr>\n<tr>\n\n';
}

strTemp += '\n</tr>\n</table>';

document.getElementById("divColorPicker").innerHTML = strTemp; // write out table to div
}

function colorSelectEvent( strColorCode ) {
if( strColorCode.length < 1 )
return; // no selected value
else if( strColorCode == "custom" )
colorPopup(); // create the custom colour popup
else
pickColor(strColorCode); // choose the select colour html value
}

function colorSelect() {
var arrSelectColors = new Array(); // array of colour name and html code pairs
arrSelectColors.push(Array("Pink", "#FF69B4"));
arrSelectColors.push(Array("Orange", "#FFA500"));
arrSelectColors.push(Array("Navy", "#000080"));
arrSelectColors.push(Array("Green", "#008000"));
arrSelectColors.push(Array("Darkslategray", "#2F4F4F"));
arrSelectColors.push(Array("Yellow", "#FFFF00"));

var strSelect = '<select name="selColorPicker" onChange="colorSelectEvent(this.value);">\n';
strSelect += '<option value="" selected>Please select a color</option>\n'; // default select value

for( var i=0; i<arrSelectColors.length; i++ ) // loop throught the nominated colours
strSelect += '<option value="' + arrSelectColors[i][1] + '">' + arrSelectColors[i][0] + '</option>\n';

strSelect += '<option value="custom">Custom</option>\n'; // custom option always comes last
strSelect += "</select>\n";

return strSelect;
}
</script>
</head>

<body style="font-family: 'Courier New', Courier, mono; font-size: 12px; color: #000000">
<div style="width: 600px">
<form name="frmColor">
<fieldset>
<legend><strong>Input</strong></legend>
&nbsp;
<script>
document.write(colorSelect());
</script>
<div id="divColorPicker"></div>
</fieldset>

<fieldset>
<legend><strong>Output</strong></legend>
&nbsp;Code: <input type="text" name="txtColorCode">
</fieldset>
<br>

</form>
</div>

</body>
</html>

martin_narg
06-02-2005, 03:14 PM
Hi mate, first of all I fully agree with SpirtOfGrandeur and this is post is no way meant to demean what he says. In fact, really the only reason I looked at this was to have a bit of a play writing a colour picker that I could use later on, or at least maintain an interest in.

This is script is really not been polished whatsoever. Normally I would do it much much cleaner, but I got it works in opera, firefox and ie. however it's not got the CSS I would normally put in, and as for re-writing the contents of the div using innerHTML *every* time you want to see the custom colours, it's plain inefficient.

BUT, it gives a good idea of what you want and some way for a jumping off point to modify and use as you see fit.

I hope this helps.

m_n

SpirtOfGrandeur
06-02-2005, 04:32 PM
Dont worry about it martin_narg, like i said "Well I take that back, some times people do when they feel up to the challenge." You where just up for the challenge :) Ehehehehe...

@PEACE
06-02-2005, 04:33 PM
I've spent the past week trying to find an answer on websites. I get lost and I can't find what I need.


Actually...I did research it...for an entire week I was looking for answers. And I found absolutetly NOTHING. Months ago I HAD run across a script and from what I remember it was one of the beginning tutorials...so I figured it would have been something anyone with javascript knowledge would have been able to do in a few minutes...hence why I didn't provide any code...partly because I didn't have any, secondly because I figured the HTML would have been worthless.

I hardly make it a habit of asking for anything from anyone for any of my sites. Honestly if I thought it was more than a minute or two worth of work more than basic javascript stuff I'd have never asked.

@PEACE
06-02-2005, 08:03 PM
Okay...this is basically what I want...except in reverse.

This code takes text from an input box and inserts it into the select field as <option>option_here</option>

What I want it to do is the OPPOSITE. I want it to take the text from the <SELECT> field and insert it into the text input tag


<script type="text/javascript">
var selOptions = [];
function get_options (selObject) {
var tmp = [];
for (var i = 0; i < selObject.length; i++) {
tmp[tmp.length] = selObject[i].text;
}
return tmp;
}

function upd(selObject, v) {
selOptions = get_options(selObject.options);
selOptions[selOptions.length] = v;
selOptions.sort();
selObject.length = 0;
var selected = 0;
for (var i = 0; i < selOptions.length; i++) {
if (selOptions[i] == v) selected = i;
selObject[selObject.length] = new Option(selOptions[i]);
}
selObject.selectedIndex = selected;
}
</script>
....
<form>
<select name="s">
<option>a</option>
<option>b</option>
</select>
<br />
<input type="text" name="t" />
<input type="button" onclick="upd(s,t.value)" value="Update select"
/>
</form>

vwphillips
06-02-2005, 09:53 PM
bit rough and ready but is this what you want



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
</head>

<body>
<script type="text/javascript">

var Hex='0123456789ABCDEF';
var Add,SelObj,ColObj;

function NewColor(obj){
SelObj=obj;
ColObj=document.getElementById('Color');
ColObj.value=obj.options[obj.selectedIndex].value;
ColObj.style.visibility='visible';
document.getElementById('But').style.visibility='visible';
}

function HexCk(){
val=ColObj.value;
if (SelObj.options[SelObj.selectedIndex].value==''){
val=val.toUpperCase();
if (val.charAt(0)=='#'){
val=val.substring(1,val.length);
}
if (val.length<6){
alert('Six HEX Charactors Required');
return;
}
for (i=0;i<val.length;i++){
if (!Hex.match(val.charAt(i))){
alert('Only HEX Charactors Allowed');
return;
}
}
val='#'+val;
ColObj.value=val;
Add=true;
for (i=0;i<SelObj.options.length;i++){
if (SelObj.options[i].value==val){
Add=false;
}
}
if (Add){
SelObj.options[SelObj.options.length]=new Option(val,val,true,true);
}
alert('Entered HEX Color');
}
else {
alert('Entered Std Color');
}
}

</script>

<form>
<select name="s" onchange="NewColor(this);">
<option value="RED">Red</option>
<option value="BLUE" >Blue</option>
<option value="" >You Chose</option>
</select>
<br />
<input type="text" id="Color" name="t" / style="visibility:hidden;"><br>
<input type="button" id="But" onclick="HexCk();" value="Update select" style="visibility:hidden;"
/>
</form>
</body>

</html>

@PEACE
06-02-2005, 10:16 PM
It is very close! Except I need the text input box to always be visible. But this is basically what I need.

vwphillips
06-02-2005, 10:19 PM
just get rid of the style visibility lines

but the error checking will not be complete

martin_narg
06-03-2005, 09:17 AM
nice one vwphillips =)

vwphillips
06-03-2005, 01:18 PM
Updated to get rid of visibility requirement, retain error checking and to add colors



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
</head>

<body onload="zxcInitNewColor('s','Color');" >
<script type="text/javascript">

var zxcHex='0123456789ABCDEF';
var zxcAdd,zxcSelObj,zxcColObj,zxcVal;

function zxcInitNewColor(sel,tb){
zxcSelObj=document.getElementById(sel);
zxcColObj=document.getElementById(tb);
for (zxc1=0;zxc1<zxcSelObj.options.length;zxc1++){
zxcSelObj.options[zxc1].style.backgroundColor=zxcSelObj.options[zxc1].value;
}
}

function zxcNewColor(obj){
if (zxcSelObj.selectedIndex<1){ return; }
zxcVal=zxcSelObj.options[zxcSelObj.selectedIndex].value;
zxcColObj.value=zxcVal;
zxcColObj.style.backgroundColor=zxcVal;
}

function zxcHexCk(){
if (zxcSelObj.selectedIndex<1){ return; }
zxcVal=zxcColObj.value;
if (zxcSelObj.options[zxcSelObj.selectedIndex].value==''){
zxcVal=zxcVal.toUpperCase();
if (zxcVal.charAt(0)=='#'){
zxcVal=zxcVal.substring(1,zxcVal.length);
}
if (zxcVal.length<6){
alert('Six HEX Charactors Required');
return;
}
for (zxc0=0;zxc0<zxcVal.length;zxc0++){
if (!zxcHex.match(zxcVal.charAt(zxc0))){
alert('Only HEX Charactors Allowed');
return;
}
}
zxcVal='#'+zxcVal;
zxcColObj.value=zxcVal;
zxcColObj.style.backgroundColor=zxcVal;
zxcAdd=true;
for (zxc1=0;zxc1<zxcSelObj.options.length;zxc1++){
if (zxcSelObj.options[zxc1].value==zxcVal){
zxcAdd=false;
}
}
if (zxcAdd){
zxcSelObj.options[zxcSelObj.options.length]=new Option(zxcVal,zxcVal,true,true);
zxcSelObj.options[zxcSelObj.options.length-1].style.backgroundColor=zxcVal;
zxcAdd=false;
}
alert('Entered HEX Color '+zxcVal);
}


else {
zxcAdd=true;
for (zxc1=0;zxc1<zxcSelObj.options.length;zxc1++){
if (zxcSelObj.options[zxc1].value==zxcVal&&!zxcSelObj.options[zxc1].value==''){
zxcAdd=false;
}
}
if (!zxcAdd){
alert('Entered Select Color '+zxcVal);
}
else {
alert('Entered a HEX Color\nor Chose from \'Select a Color\'');
zxcColObj.value='';
}
}
}

</script>

<form>
<select name="s" onchange="zxcNewColor(this);">
<option value="">Select a Color</option>
<option value="RED">Red</option>
<option value="BLUE" >Blue</option>
<option value="" >You Chose(HEX)</option>
</select>
<br />
<input type="text" id="Color" name="t" / ><br>
<input type="button" id="But" onclick="zxcHexCk();" value="Update Color" />
</form>
</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum