Time:
Scotland: Fri, 10:04 pm
Rhode Island: Fri, 5:04 pm
Florida: Fri, 5:04 pm
New Mexico: Fri, 3:04 pm
California: Fri, 2:04 pm

Click here to visit Livelife365.com

Click here to visit nmdarts.com



Buy this Ad Space.

180px wide.

Please get in touch with KH@ if you are interested and make an offer.

CLICK HERE TO GET AUCTION BAR NOW
US$10 per year - Save $100s!
The Fabulously Unfair
WebX Auction Bar. For Ebay etc.
Ro-Sham-Bo the opposition. Laugh like Eric Cartman when you win! CLICK HERE NOW!

More information and sign-up.

WebXpertz Hosting.
Custom fit from $5pm. PHP/MySQL
You'll save money, we'll save money. Seems fair to me. Interested? If so Please PM me here and tell me what you need. Thanks!


Please click here for more information
PDA

For continued disscussion on this topic : Auto filling text input from dropdown

sadair
06-18-2004, 05:12 PM
I know this issue has been addressed some, but my problem is, i'm trying to loop through values, and populate the text input (below/outside of the loop) based on what is selected in the dropdown. Since coldfusion gets processed first, I always end up with the last value in the dropdown.
Any suggestions???
Thanks.
<cfset colors = "Red, Blue, White, Green, Yellow, Black, Gold, Purple">
<cfset colorslist = ListToArray(colors)>
<form name="colors" method="post" action="">
<select name="colors" onChange="getColors()">
<cfloop from="1" to="#ArrayLen(colorslist)#" index="index">
<cfoutput>
<option>#colorslist[index]#</option>
<script language="JavaScript">
function getColors() {
document.colors.chosen_color.value='#colorslist[index]#';
}
</script>
</cfoutput>
<cfset index = index + 1>
</cfloop>
</select>
<br><strong>Color:</strong> <input type="text" name="chosen_color" size="6">
KH@
06-23-2004, 06:51 PM
Is this what you are after?? I'm not sure.

<cfset colors = "Red, Blue, White, Green, Yellow, Black, Gold, Purple">
<cfset colorslist = ListToArray(colors)>
<form name="colors" method="post" action="">
<select name="colors" onChange="document.getElementById('myTarget').value=this.value;">
<cfloop from="1" to="#ArrayLen(colorslist)#" index="index">
<cfoutput>
<option value="#colorslist[index]#">#colorslist[index]#</option>
</cfoutput>
<cfset index = index + 1>
</cfloop>
</select>
<br><strong>Color:</strong> <input type="Text" name="chosen_color" size="6" id="myTarget">
sadair
06-23-2004, 07:07 PM
Yes. Thanks a lot Keith!
As you can see, my Javascript skills need a little work.
KH@
06-24-2004, 08:26 AM
Jolly good,

If like me, your Javascript is limited you can always try the Javascript forum here. There are some very clever chaps providing answers over there and I pester them often with daft questions.

Anyhoo, just for future reference:

you can always get the values and styles etc. of the element you are in using

=this.style.color
=this.value
=this.innerHTML

etc. which is great for scripting in-line events onClick, onChange etc

But there was no problem with using a function either. A Javascript function does much the same as CFMODULE or a CF custom tag so no need to use one for a one off, but you could make a bit of reusable code to do the same thing as I did earlier and pass attributes to it.

<head>
<script language="JavaScript">
function getColors(daTarget,daValue) {
document.getElementById(daTarget).value=daValue;
}
</script>
</head>

You pass the attributes to the function like this

onClick="getColors('myTarget',this.value);"

At least I think that's right , just keep an eye on what you surround with quotation marks and what you don't :)

Here is a CFMODULE I made for my own site. It is for color picking in a form and has a bit of WYSIWYG JS code in it. It requires this graphic for the imgMap

http://www.avarte.com/hospitality/net216.gif

And this is the calling CFMODULE Tag

<cfmodule template="mod_dsp_colorchart.cfm" dafield="w4color1" viz="show" dacolor="FFFFFF" da_id="xtitle" da_style="color" dix="Title text color">

daField is the ID of the input tag you want to change the value of

viz is a toggle to make the above field hidden or visible

dacolor is the default color, you can use a previously selected color which has been stored in a database by #queryname.fieldname# (assuming the hex code was stored as FF4567 and not #FF4567 as the later requires extra hash marks eg ###queryname.fieldname#, and screws everything up :o )

da_id is the ID of the element you want the changed color to be shown in, so the visitor can see what the color they picked looks like

da_style can be either color or backgroundColor (whatever you want to change in the element "da_id" above)

dix is whatever text you want to appear next to the input box.

Hope you can make sense of it. :D

The code is to long to fit in this message so you will have to download it as txt and change the file extension

http://www.avarte.com/mod_dsp_colorchart.txt

Hope its usful. It took a while to make but has saved me much time since :)