Using CFDiv to bind text from form field to a div or span.

ColdFusion 8 just makes so many tasks easier.  Yesterday I was looking into doing something fun for a little project.  I wanted to type into a text field, and have it immediately show that text into a formated span tag somewhere else on the page.

With CFDiv and bind its as easy as this:

<cfform>
    <cfinput name="mytextfield" type="text">
</cfform>

<h1>show the span</h1>
<cfdiv bind="{mytextfield@keyup}" ID="mySpan" tagName="span" style="background-color:##dddddd; border: 1px solid ##000000; color:red; height:20"/>

The key part here is the bind="{mytextfield@keyup}".  This binds the content of the cfdiv tag (in this case a span tag) with the content of the mytextfield input. 

If you just left it as bind="{mytextfield}" it would also work, but only update the span when you have left the text field (submit, click elsewhere, etc) as the default is the change event.  By specifying @keyup you are telling it to bind for every event of your keys going up, which effectively lets the bind trigger in real time what you are typing and show it in the span. 

This would be useful for helping preview how a page/template/profile would look before having them save it.

This isn't rocket science to do without ColdFusion 8, but it is certainly more work. 

TweetBacks
Comments
jason's Gravatar cool
# Posted By jason | 2/18/08 1:18 AM
tonys's Gravatar man, this was a life saver. this saved me hours of frustration! kudos to you!
# Posted By tonys | 3/3/09 4:59 PM

NAVIGATION

Home
About Me

RSS


Search

Subscribe

Enter your email address to subscribe to this blog.

Recent Entries

Flash Camp Boston
New Blog Design
Pre-Conference Training at cf.Objective()
FireFox 3.6 KTML Editor Fix
I am now a part of the Adobe Community Professionals Group

Recent Comments

FireFox 3.6 KTML Editor Fix
Fred said: Found another bug in Firefox 3.6 When inserting a table you can't select the number of columns. So I... [More]

Repeating Events Question
ueghbxedu said: UaejcB <a href="http://ysyhrmkbkhco.com/&...;, [url=http://pwncz... [More]

Repeating Events Question
fadxkfyuadn said: n6qVCL <a href="http://bdiorhdtbwzb.com/&...;, [url=http://uvnao... [More]

FireFox 3.6 KTML Editor Fix
Joshua said: While changing that far will load the editor, does it show the drop down class menu correctly now? [More]

FireFox 3.6 KTML Editor Fix
Al Johnson said: HI, I am still fighting to keep my code going as there is nothing better than KTML nad I have writt... [More]

Calendar

Sun Mon Tue Wed Thu Fri Sat
 123456
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31    

Archives By Subject

blogs (31) [RSS]
books (4) [RSS]
Crazy (39) [RSS]
DIY (8) [RSS]
Flex (3) [RSS]
games (10) [RSS]
GRRR (13) [RSS]
Ideas (11) [RSS]
Local (14) [RSS]
LOLpics (2) [RSS]
money (9) [RSS]
music (3) [RSS]
Personal (27) [RSS]
Photos (8) [RSS]
Politics (8) [RSS]
Projects (22) [RSS]
Review (18) [RSS]
RPM (9) [RSS]
Spam (16) [RSS]
Technology (66) [RSS]
Testing (3) [RSS]
TV (15) [RSS]
video (32) [RSS]
Web Dev (218) [RSS]
World of Warcraft (16) [RSS]