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 (Comment Moderation is enabled. Your comment will not appear until approved.)
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

Google TV Review
Playbook - Developers It's Time To Get Started
cf.Objective 2011 - Speak Your Mind
Timesheets, Project Management, and Invoicing - FreshBooks Review
A New Phase of My Life

Recent Comments

FireFox 3.6 KTML Editor Fix
Herman said: Hello, Sinds Firefox 10 is out the filebrowser in KTML and CSS Styles are not avaible... Any sugges... [More]

OTA OK?
AnoraDD said: I get 18 of these exact sms's everyday! How do I get it to STOP?!? [More]

Coldfusion Hosting with Network Solutions
LIzm said: Ugh. I have a client who insists on hosting with them and two weeks after first contact, a very simp... [More]

IE nested list item whitespace solution: vertical-align:bottom
Lauren said: Thought I'd add to the thank yous... Thank you! [More]

OTA OK?
Rita said: Thank you, this was very helpful. [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    

Archives By Subject

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