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

Inception Plot Questions
Random Chuck Norris Fact Generator With A Twist
Virtual Currency for Buses
Applying ColdFusion Security Patches Gotcha
Privacy, Walled Gardens, Standards and Our Future

Recent Comments

FireFox 3.6 KTML Editor Fix
rock guitar said: Is the ktml realy discontinued for dreamweaver [More]

FireFox 3.6 KTML Editor Fix
Joshua said: Hi Wayne, I just tried opening the editor in IE from the link you supplied. I was able to open the ... [More]

FireFox 3.6 KTML Editor Fix
wayne said: Hi everybody, thanks for your reply joshua. I still have a bug for ktml in asp for a link properties... [More]

Inception Plot Questions
said: [More]

Inception Plot Questions
Taylor said: Hey there Josh, Great questions all. You seem to think this is more of a Jacob's Ladder equivalent ... [More]

Calendar

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

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 (19) [RSS]
RPM (9) [RSS]
Spam (16) [RSS]
Technology (68) [RSS]
Testing (3) [RSS]
TV (15) [RSS]
video (32) [RSS]
Web Dev (224) [RSS]
World of Warcraft (16) [RSS]