Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Jun 2005
    Location
    Michigan, USA
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Drop Down Inputs into Text input box

    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.
    Last edited by @PEACE; 06-01-2005 at 04:32 AM.

  • #2
    Regular Coder
    Join Date
    May 2005
    Location
    Michigan, USA
    Posts
    566
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #3
    Regular Coder martin_narg's Avatar
    Join Date
    Jul 2002
    Location
    Chamonix, France
    Posts
    600
    Thanks
    1
    Thanked 3 Times in 3 Posts
    My comments to follow!

    Code:
    <!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>
    Last edited by martin_narg; 06-03-2005 at 09:10 AM.
    "Cos it's strange isn't it. You stand in the middle of a library and go 'Aaaaaaaaaaaaaaaaggggggghhhhhhh!'
    and everybody just stares at you. But you do the same in an aeroplane, and everybody joins in."
    -Tommy Cooper

  • #4
    Regular Coder martin_narg's Avatar
    Join Date
    Jul 2002
    Location
    Chamonix, France
    Posts
    600
    Thanks
    1
    Thanked 3 Times in 3 Posts
    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
    "Cos it's strange isn't it. You stand in the middle of a library and go 'Aaaaaaaaaaaaaaaaggggggghhhhhhh!'
    and everybody just stares at you. But you do the same in an aeroplane, and everybody joins in."
    -Tommy Cooper

  • #5
    Regular Coder
    Join Date
    May 2005
    Location
    Michigan, USA
    Posts
    566
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

  • #6
    New to the CF scene
    Join Date
    Jun 2005
    Location
    Michigan, USA
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by @PEACE
    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.

  • #7
    New to the CF scene
    Join Date
    Jun 2005
    Location
    Michigan, USA
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

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

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,493
    Thanks
    3
    Thanked 499 Times in 486 Posts
    bit rough and ready but is this what you want

    PHP Code:
    <!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> 

  • #9
    New to the CF scene
    Join Date
    Jun 2005
    Location
    Michigan, USA
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It is very close! Except I need the text input box to always be visible. But this is basically what I need.

  • #10
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,493
    Thanks
    3
    Thanked 499 Times in 486 Posts
    just get rid of the style visibility lines

    but the error checking will not be complete

  • #11
    Regular Coder martin_narg's Avatar
    Join Date
    Jul 2002
    Location
    Chamonix, France
    Posts
    600
    Thanks
    1
    Thanked 3 Times in 3 Posts
    nice one vwphillips =)
    "Cos it's strange isn't it. You stand in the middle of a library and go 'Aaaaaaaaaaaaaaaaggggggghhhhhhh!'
    and everybody just stares at you. But you do the same in an aeroplane, and everybody joins in."
    -Tommy Cooper

  • #12
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,493
    Thanks
    3
    Thanked 499 Times in 486 Posts
    Updated to get rid of visibility requirement, retain error checking and to add colors

    PHP Code:
    <!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> 


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •