|
cfinput
DescriptionUsed
within the cfform tag, to place input
controls that support input validation on a form.
Syntax<cfinput
name = "name"
autosuggest = "list or bind expression"
autosuggestBindDelay = "integer number if seconds"
autosuggestMinLength = "integer"
bind = "bind expression"
bindAttribute = "attribute name"
bindOnLoad = "no|yes"
checked = "yes|no"
dayNames = "day of week labels separated by commas"
delimiter = "character"
disabled = "disabled"
enabled = "yes|no"
firstDayOfWeek = "day name"
height = "number of pixels"
id = "HTML id"
label = "text"
matchContains = "true|false"
mask = "masking pattern"
maxLength = "number"
maxResultsDisplayed = "number"
message = "text"
monthNames = "month labels"
onBindError = "JavaScript function name"
onChange = "JavaScript or ActionScript"
onClick = "JavaScript or ActionScript"
onError = "script name"
onKeyDown = "JavaScript or ActionScript"
onKeyUp = "JavaScript or ActionScript"
onMouseDown = "JavaScript or ActionScript"
onMouseUp = "JavaScript or ActionScript"
onValidate = "script name"
pattern = "regular expression"
range = "minimum value, maximum value"
required = "yes|no"
showAutosuggestLoadingIcon = "yes|no"
size = "integer"
sourceForToolTip = "URL"
src = "image URL"
style = "style specification"
tooltip = "text"
type = "input type"
typeahead = "no|yes"
validate = "data type"
validateAt = "onBlur|onServer|onSubmit"
value = "initial value"
visible = "yes|no"
width = "integer number of pixels">
Some
attributes apply to only specific display formats. For details,
see the Attributes table.
In HTML format forms, standard
HTML input control attributes not listed above are passed to the
HTML and have their normal effect.
Note: You can
specify this tag’s attributes in an attributeCollection attribute
whose value is a structure. Specify the structure name in the attributeCollection attribute
and use the tag’s attribute names as structure keys.
See alsocfajaximport, cfapplet,cfcalendar,cfform, cfformgroup, cfformitem, cfgrid, cfselect, cfslider, cftextarea, cftree, Using
Ajax form controls and features in Using
Ajax User Interface Components and Features in
the Developing ColdFusion Applications
HistoryColdFusion
8
Added autosuggest, autosuggestBindDelay, autosuggestMinLength, delimiter, maxResultsDisplayed, showAutosuggestLoadingIcon,
and typeahead attributes.
Added support for the bind attribute in
HTML forms and the bindAttribute and bindOnload,
and onBindError attributes.
Added the sourceForTooltip attribute
Added support for datefield value of the type attribute
in HTML forms.
ColdFusion MX 7:
Added
support for button, file, hidden, image, reset, and submit controls.
Added support for generating Flash and XML controls (specified
in the cfform tag).
Added datefield type (Flash forms only)
and the supporting dayNames and monthNames attributes.
Added bind, enabled, height, label, tooltip, visible,
and width attributes for use in Flash forms.
Added support for onBlur and onServer validation, including
the validateAt attribute.
Added USdate, range, boolean, email, URL, uuid, guid, maxlength,
noblanks, and submitOnce validate attribute values.
Added support for preventing multiple submissions.
Added the mask attribute.
Deprecated the passthrough attribute. The
tag now supports all HTML input tag attributes
directly.
ColdFusion MX: Changed the cfform tag preserveData attribute
behavior: if it is set to True, ColdFusion checks radio and check
box values only if their value matches the posted value for the
control. (In earlier releases, if the posted value did not match
any of the cfinput check boxes or radio buttons
for the control, the checked attribute was used.
AttributesThe
following table lists attributes that ColdFusion uses directly.
The tag also supports all HTML form tag attributes
that are not on this list, and passes them directly to the browser.
Note: Attributes that are not marked as supported in
All or XML are not handled by the skins provided with ColdFusion.
They are, however, included in the generated XML.
Attribute
|
Req/Opt; formats
|
Default
|
Description
|
name
|
Required;
all
|
|
Name for form input element.
|
autosuggest
|
Optional, HTML
|
|
Specifies entry completion suggestions to
display as the user types into a text input. The user can select
a suggestion to complete the text entry.
The valid value
can be either of the following:
A string that consists
of the suggestion values separated by the delimiter specified by
the delimiter attribute.
A bind expression that gets the suggestion values based on
the current input text. The bind expression must pass a cfautosuggestvalue bind parameter
to represent the user input.
Valid only for cfinput type="text".
For more information,
see Using
autosuggest text input fields in the Developing ColdFusion Applications
|
autosuggestBindDelay
|
Optional, HTML
|
0.5 seconds
|
A nonzero integer that specifies the minimum
time between autosuggest bind expression invocations,
in seconds. This value also specifies the delay from when the user
first enters a minimum-length entry in the field until the suggestion
box appears. Use this attribute to limit the number of requests
that are sent to the server when a user types.
Valid only
for cfinput type="text".
Note: The
only way to get the default behavior is to omit the attribute. Otherwise,
the delay must be a nonzero integer value.
|
autosuggestMinLength
|
Optional, HTML
|
1
|
The minimum number of characters required
in the text box before invoking a bind expression to return items
for suggestion.
Valid only for cfinput type="text".
|
bind
|
Optional;
HTML,
Flash
|
|
A bind expression that dynamically sets
an attribute of the control. For details, see Usage.
|
bindAttribute
|
Optional;
HTML
|
value
|
Specifies the HTML tag attribute whose value
is set by the bind attribute. You can only specify
attributes in the browser’s HTML DOM tree, not ColdFusion-specific
attributes.
Ignored if there is no bind attribute.
Valid
only for cfinput type="text".
|
bindOnLoad
|
Optional;
HTML
|
no
|
A Boolean value that specifies whether to
execute the bind attribute expression when first
loading the form.
Ignored if there is no bind attribute.
Valid
only for cfinput type="text".
|
checked
|
Optional;
all
|
no
|
Selects a radio button or check box control:
For HTML format,
you can indicate that the item is selected by specifying the value
as checked or specifying the attribute with no
value.
|
dayNames
|
Optional;
all
|
S, M, T, W, T, F, S
|
Applies to datefield type
only. A comma-delimited list that sets the names of the weekdays
displayed in the calendar. Sunday is the first day; the rest of
the weekday names follow in the normal order.
|
delimiter
|
Optional, HTML
|
comma (,)
|
The delimiter to use to separate entries
in a static auto-suggest list. This attribute is meaningful only
if the autosuggest attribute is a string of delimited
values.
|
disabled
|
Optional;
all
|
not disabled
|
Disables user input, making the control
read-only. The attribute behavior depends on the format of the form
as follows:
HTML format forms: ColdFusion passes
this attribute directly to the HTML. To disable input, specify disabled without
a value (HTML format) or with the value disabled (XHTML
compliant). To enable input, omit this attribute.
Flash format forms: To disable input, specify disabled without
an attribute, or disabled="yes" (or any ColdFusion
positive Boolean value, such as true). To enable input, omit the
attribute or specify disabled="no" (or any ColdFusion
negative Boolean value, such as false).
|
enabled
|
Optional; Flash
|
yes
|
Boolean value that specifies whether the
control is enabled. A disabled control appears in light gray. The
inverse of the disabled attribute.
|
firstDayOfWeek
|
Optional;
all
|
0
|
Applies to datefield type
only. Integer in the range 0-6 that specifies the first day of the
week in the calendar: 0 indicates Sunday; 6 indicates Saturday.
|
height
|
Optional; see Description
|
|
Applies to most Flash types, HTML image
type on some browsers. The height of the control, in pixels. The
displayed height might be less than the specified size.
|
id
|
Optional;
HTML
|
name attribute value
|
The HTML ID of the form.
|
label
|
Optional; Flash, XML
|
|
Label to put next to the control on a Flash
form. Not used for button, hidden, image, reset, or submit types.
|
mask
|
Optional;
Flash, HTML
|
|
For
tags with type="text". A mask pattern that controls
the character pattern that users can enter, or that the form sends
to ColdFusion. Mask characters and the corresponding valid input
characters are:
For
tags with type="datefield", a pattern that controls
the format of dates that the user selects in the calendar. Mask
characters are:
D = day; can use 0-2 mask characters.
M = month; can use 0-4 mask characters.
Y = year; can use 0, 2, or 4 characters.
E = day in week; can use 0-4 characters.
For
more information, see the Usage section.
|
matchContains
|
Optional
|
false
|
If true, the match returned contains the
query string. By default, the results that start with the
query string are returned.
|
maxLength
|
Optional;
all
|
|
Maximum length of text entered, if type="Text" or "password".
For complete length validation, specify maxLength validation
in a validate attribute; otherwise, this attribute
prevents users from typing beyond the specified length, but does
not prevent them from pasting in a longer value.
|
maxResultsDisplayed
|
Optional;
HTML
|
10
|
The maximum number suggestions to display
in the auto-suggest list.
Valid only for cfinput type="text".
|
message
|
Optional;
all
|
|
Message text to display if validation fails.
|
monthNames
|
Optional;
all
|
January, February, March, April, May, June, July, August, September, October, November, December
|
Applies to datefield type
only. A comma-delimited list of the month names that display at
the top of the calendar.
|
onBindError
|
Optional;
HTML
|
See Description
|
The name of a JavaScript function to execute
if evaluating a bind expression, including an auto-suggest bind
expression, results in an error. The function must take two attributes:
an HTTP status code and a message.
If you omit this attribute,
and have specified a global error handler (by using the ColdFusion.setGlobalErrorHandler function),
it displays the error message; otherwise a default error pop-up
displays.
|
onChange
|
Optional;
all
|
|
JavaScript (HTML/XML) or ActionScript (Flash)
to run when the control changes due to user action. In Flash, applies
to datefield, password, and text types only.
|
onClick
|
Optional;
all
|
|
JavaScript (HTML/XML) or ActionScript (Flash)
to run when the user clicks the control. In Flash, applies to button,
checkbox, image, radio, reset, and submit types only.
|
onError
|
Optional;
HTML, XML
|
|
Name of a custom JavaScript function to
execute if validation fails.
|
onKeyDown
|
Optional;
all
|
|
JavaScript (HTML/XML) or ActionScript (Flash)
ActionScript to run when the user presses a keyboard key in the
control.
|
onKeyUp
|
Optional;
all
|
|
JavaScript (HTML/XML) or ActionScript (Flash)
to run when the user releases a keyboard key in the control.
|
onMouseDown
|
Optional;
all
|
|
JavaScript (HTML/XML) or ActionScript (Flash)
to run when the user releases a mouse button in the control.
|
onMouseUp
|
Optional;
all
|
|
JavaScript (HTML/XML) or ActionScript (Flash)
to run when the user presses a mouse button in the control.
|
onValidate
|
Optional;
HTML, XML
|
|
Name of a custom JavaScript function to
validate user input. The form object, input object, and input object
values are passed to the routine, which should return true if
validation succeeds, and false otherwise. If used,
the validate attribute is ignored.
|
pattern
|
Required if validate= "regex";
HTML,
XML
|
|
JavaScript regular expression pattern to
validate input. ColdFusion uses this attribute only if you specify regex in
the validate attribute.
Omit leading and
trailing slashes. For examples and syntax, see Building Dynamic
Forms with cfform Tags in the Developing ColdFusion Applications.
|
range
|
Optional;
all
|
|
Minimum and maximum allowed numeric values.
ColdFusion uses this attribute only if you specify range in
the validate attribute.
If you specify a
single number or a single number followed by a comma, it is treated
as a minimum, with no maximum. If you specify a comma followed by
a number, the maximum is set to the specified number, with no minimum.
Note: ColdFusion
does not process the range attribute when you use onsubmit or onBlur validation
in XML format forms.
|
readonly
|
Optional; Flash, HTML
|
|
Applies to HTML and Flash forms.Valid only
for cfinput type= "text". ColdFusion ignores this
attribute for all other input types.
|
required
|
Optional;
all
|
no
|
|
showAutosuggestLoadingIcon
|
Optional; HTML
|
true
|
A Boolean value that specifies whether to
display an animated icon when loading an auto-suggest value for
a text input.
|
size
|
Optional;
all
|
|
Size of input control. Ignored, if type="radio" or "checkbox".
If
specified in a Flash form, ColdFusion sets the control width pixel
value to 10 times the specified size and ignores the width attribute.
|
sourceForTooltip
|
Optional; HTML
|
|
The URL of a page to display as a tool tip.
The page can include HTML markup to control the format, and the
tip can include images.
If you specify this attribute, an
animated icon appears with the text "Loading..." while the tip is
being loaded.
|
src
|
Optional;
Flash, HTML
|
|
Applies to Flash button, reset, submit,
and image types, and the HTML image type. URL of an image to use
on the button.
|
style
|
Optional;
all
|
|
In HTML or XML format, ColdFusion passes
the style attribute to the browser or XML.
In Flash format,
must be a style specification in CSS format. For detailed information
on specifying Flash styles, see Creating
Forms in Flash in the Developing ColdFusion Applications.
In
XML format, ColdFusion passes the style attribute to the XML.
|
tooltip
|
Optional; Flash, HTML
|
|
Text to display when the mouse pointer hovers
over the control.
Ignored if you specify a sourceForTooltip attribute.
|
type
|
Optional;
all
|
text
|
The input control type to create:
button: push button.
checkbox: check box.
datefield: HTML and Flash only; date entry
field with an expanding calendar from which users select the date
or dates. In HTML format only, users can also enter the date by
typing in the field.
file: file selector; not supported in Flash.
Not supported when you use Ajax form submission to submit the form
asynchronously from the page.
hidden: invisible control.
image: clickable button with an image.
password: password entry control; hides
input values.
radio: radio button.
reset: form reset button.
submit: form submission button.
text: text entry box.
|
typeahead
|
Optional;
HTML
|
no
|
A Boolean value that specifies whether the
auto-suggest feature should automatically complete a user’s entry
with the first result in the suggestion list.
Valid only for cfinput type="text".
|
validate
|
Optional;
all
|
|
The type or types of validation to do. Available
validation types and algorithms depend on the format. For details,
see Usage.
|
validateAt
|
Optional;
all
|
onSubmit
|
How to do the validation; one or more of
the following values:
The onBlur and
onSubmit values are identical in Flash forms. For multiple values,
use a comma-delimited list.
For details, see Usage.
|
value
|
depends on type setting;
all
|
|
HTML: corresponds to the HTML value attribute.
Its use depends on control type.
Flash: optional; specifies
text for button type inputs: button, submit, and image.
|
visible
|
Optional; Flash
|
yes
|
Boolean value that specifies whether to
show the control. Space that would be occupied by an invisible control
is blank.
|
width
|
Optional; see Description
|
|
Applies to most Flash types, and HTML image
type on some browsers. The width of the control, in pixels. For
Flash forms, ColdFusion ignores this attribute if you also specify
a size attribute value.
|
Note: Attributes that are marked
as not supported in XML are not handled by the skins provided with
ColdFusion. They are, however, included in the generated XML.
UsageFor this
tag to work properly. the browser must be JavaScript-enabled.
If
the cfformpreserveData attribute
is true and the form posts back to the same page, the posted value
of the cfinput control is used, instead of its Value or Checked
attribute.
You can use the keyboard to access and select dates
from a datefield Flash input: press Tab to go to
the field and press the Spacebar to open the menu. Use the Up, Down,
Left, and Right Arrow keys to change the selected date. Use the Home
and End keys to reach the first and last enabled date in a month,
respectively. Use the Page Up and Page Down keys to reach the previous
and next month, respectively.
Note: To clear a
datefield entry in Flash format forms, select the field to open
the menu, and click the selected date.
For more information,
see cfform. For information on
using JavaScript regular expressions with this tag, see Building
Dynamic Forms with cfform Tags in the Developing ColdFusion Applications.
ValidationThe
following sections describe how to do validation in cfinput tags.
- Validation methods
- ColdFusion provides four methods of validation of cfinputtext and password fields.
You
can specify one or a combination of the following in the validateAt attribute:
onSubmit The form page on the browser includes
JavaScript functions that perform validation before the form is
submitted to the server. In Flash format forms, this option is identical
to onBlur.
onBlur In HTML format the form page on the
browser includes JavaScript functions that perform validation when
the field loses the focus. In Flash format, the attribute is equivalent
to onSubmit. OnBlur validation uses the same algorithms as onSubmit
validation. OnBlur validation was added in ColdFusion MX 7.
onServer ColdFusion performs the validation
on the server. Some onServer algorithms vary from the onSubmit algorithms.
OnServer Date and Time validation allow more patterns than onSubmit
validation. OnServer validation was added in ColdFusion MX 7, and
automatically generates hidden fields to support the validation.
You
can also omit a validate attribute and specify
the type of validation for the field in a separate hidden form field.
This form of validation is equivalent to onServer validation, but
it lets you specify separate messages for each validation that you
do on the field. It is backward compatible with previous ColdFusion releases.
For more information on hidden form field validation, see cfform and Validating
form data using hidden fields in Validating
form data using hidden fields in the Developing ColdFusion Applications.
- Validation types
- Use the following values in the validate attribute
to specify input validation for all validation methods. Most attributes
apply only to password or text fields. You can specify multiple
validation types in a comma-delimited list, but only some combinations
are meaningful.
Type
|
Description
|
date
|
If validateAt="onServer",
allows any date format that returns true in the IsDate function;
otherwise, same as USdate.
|
USdate
|
A US date of the format mm/dd/yy mm-dd-yy
or mm.dd.yy, with 1-2 digit days and months, 1-4 digit years.
|
eurodate
|
A date of the format dd/mm/yy, with 1-2
digit days and months, 1-4 digit years. The format can use /, -, or
. characters as delimiters.
|
time
|
Time format hh:mm:ss
|
floatornumeric
|
A number; allows integers.
|
integer
|
An integer.
|
range
|
A numeric range.
|
boolean
|
A value that can be converted to a Boolean
value: Yes, No, True, False, or a number.
|
telephone
|
Standard U.S. telephone formats. Allows
an initial 1 long-distance designator and up to 5-digit extensions,
optionally starting with x.
|
zipcode
|
U.S. 5- or 9-digit ZIP code format #####-####.
The separator can be a hyphen (-) or a space.
|
creditcard
|
Strips blanks and dashes; verifies number
using mod10 algorithm. Number must have 13-16 digits.
|
ssnorsocial_security_number
|
US. Social Security number format, ###-##-####.
The separator can be a hyphen (-) or a space.
|
email
|
A valid e-mail address of the form name@server.domain.
ColdFusion validates the format only; it does not check that entry
is a valid active e-mail address.
|
URL
|
A valid URL pattern; supports http, https,
ftp file, mailto, and news URLs.
|
guid
|
A unique identifier that follows the Microsoft/DCE
format, xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx, where x is a hexadecimal
number.
|
uuid
|
A universally unique identifier (UUID) that
follows the ColdFusion format, xxxxxxxx-xxxx-xxxx-xxxxxxxxxxxxxxxx,
where x is a hexadecimal number.
|
maxlength
|
Limits the input to a maximum number of
characters.
|
noblanks
|
Does not allow fields that consist only
of blanks.
|
regexorregular_expression
|
Matches input against the pattern attribute.
Valid in HTML and XML format only; ignored in Flash format.
|
SubmitOnce
|
Used only with submit and image types; prevents
the user from submitting the same form multiple times before until
the next page loads (for example, submitting an order a second time
before getting the first order confirmation). Valid in HTML and
XML format only; ignored in Flash format.
|
- Validation differences
- The preceding table describes the general validation behavior.
The underlying validation code must differ depending on the validation
method and the form type. As a result, the algorithms used vary
in some instances, including the following:
The validation
algorithms used for date/time values varies between onSubmit/OnBlur
and OnServer.
The algorithms used for onSubmit/OnBlur validation in Flash
vary from those used for HTML/XML format, and generally follow simpler
rules.
The table describes the onSubmit/OnBlur behavior
in HTML format. For detailed information on the OnServer validation
algorithms, see Data
validation types in Data
validation types in the Developing ColdFusion Applications.
For
more information on validation, including discussions of the advantages
and disadvantages of different validation types, see Validating
Data in the Developing ColdFusion Applications.
Masking input dataIn HTML and Flash forms, the mask attribute
controls the format of data that can be entered into a text field
or that is selected in a datefield input control calendar. In HTML
format, it does not prevent users from typing a date that
does not follow the mask into a datefield input control. You can
combine masking and validation on a field.
In text fields,
ColdFusion automatically inserts any literal mask characters, such
as hyphen (-) characters in telephone numbers. Users type only the
variable part of the field.
The following pattern enforces
entry of a part number of the format EB-1234-c1-098765, where the
user starts the entry by typing the first numeric character, such
as 3. ColdFusion fills in the preceding EB prefix and all - characters.
The user must enters four numbers, followed by two alphanumeric
characters, followed by six numbers.
<cfinput type="text" name="newPart" mask="EB-9999-XX-999999"/>
Note: To force a pattern to be all-uppercase or all-lowercase,
use the ColdFusion UCase or LCase functions
in the action page.
For tags with type="datefield"
(and cfcalendar tags), the number of pattern characters
determines the format of the output when the user selects a date
in the calendar, as follows:
Mask
|
Pattern
|
D
|
Single- or double-digit day of month, such
as 1 or 28
|
DD
|
Double-digit day of month, such as 01 or
28
|
M
|
Single- or double-digit month, such as 1
or 12
|
MM
|
Double-digit month, such as 01 or 12
|
MMM
|
Abbreviated month name, such as Jan or Dec
|
MMMM
|
Full month name, such as January or December
|
YY
|
Two-character year, such as 05
|
YYYY
|
Four-character year, such as 2005
|
E
|
Single-digit day of week, such as 1 or 7
|
EEE
|
Abbreviated day of week name, such as Mon
or Sun
|
EEEE
|
Full month day of week name, such as Monday
or Sunday
|
The following pattern specifies that the
Flash forms sends the date selected by using a datefield input
control to ColdFusion as text in the format 04/29/2004:
<cfinput name="stDate" type="datefield" label="date:" mask="mm/dd/yyyy"/>
Flash form data bindingThe bind attribute
lets you populate form fields by using the contents of other form
fields. To specify text from another field in a Flash format cfinput tag bind attribute,
use the following format:
{sourceTagName.text}
For
example, the following line uses the values from the firstName and
lastName fields to construct an e-mail address. (The user can change
or replace this value with a typed entry.)
<cfinput type="text" name="email" label="email"
bind="{firstName.text}.{lastName.text}@mm.com">
HTML form data bindingThe bind attribute
lets you set cfinput attributes dynamically. For
example, you can automatically fill an email field text-input value
based on name and domain field values.
In HTML format, the bind attribute
specifies a bind expression, which can have any for the following
forms:
A Bind parameter or string that contains
one or more bind parameters. A bind parameter specifies a form control
value or other attribute and, optionally, an event. In its most
basic form, a bind parameter consists of the name or id attribute
of the control to which you are binding in braces ({ }) The value
of the control attributes specified in the bind parameters determine
the value of the cfinput control attribute.
A CFC or JavaScript function, or URL, typically using one
or more bind parameters as function parameters. The data returned
by the function or URL sets the cfinput attribute
value.
For details of using HTML form data binding,
see Binding
data to form fields in the Developing ColdFusion Applications.
Note: To bind to a cfinput control
with type attribute of button,
specify a bind event setting such as click in the
bind expression of the control that binds to the button. The default
event, onChange, has no effect.
Example: without binding<!--- This example shows the use of cfinput within a cfform to ensure simple
validation of text items. --->
<cfform action = "cfinput.cfm">
<!--- Phone number validation. --->
Phone Number Validation (enter a properly formatted phone number): <br>
<cfinput
type = "Text" name = "MyPhone"
message = "Enter telephone number, formatted xxx-xxx-xxxx (e.g. 617-761-2000)"
validate = "telephone" required = "yes">
<font size = -1 color = red>Required</font>
<!--- Zip code validation. --->
<p>Zip Code Validation (enter a properly formatted zip code):<br>
<cfinput
type = "Text" name = "MyZip"
message = "Enter zip code, formatted xxxxx or xxxxx-xxxx"
validate = "zipcode" required = "yes">
<font size = -1 color = red>Required</font>
<!--- Range validation. --->
<p>Range Validation (enter an integer from 1 to 5): <br>
<cfinput
type = "Text" name = "MyRange" range = "1,5"
message = "You must enter an integer from 1 to 5"
validate = "integer" required = "no">
<!--- Date validation. --->
<p>Date Validation (enter a properly formatted date):<br>
<cfinput
type = "Text" name = "MyDate"
message = "Enter a correctly formatted date (dd/mm/yy)"
validate = "date" required = "no">
<input
type = "Submit" name = ""
value = "send my information">
</cfform>
Example: with bindingThe
following example uses binding to generate a default e-mail address
based on input controls with a first, last and domain names, and
fills in the e-mail text-input field with the result.
The
CFML page contains the following code:
<h3>CFC bind using onkeyup() event</h3>
<ul>
<li>When you type in the First Name field, the first initial appears in
the Email control.</li>
<li>Each key you enter in the Last Name and Domain fields appears in the
Email control.</li>
</ul>
<cfform name="mycfform">
First Name<font color="#FF0000">*</font>:
<cfinput type="text" name="firstname" required="yes"><br>
Last Name<font color="#FF0000">*</font>:
<cfinput type="text" name="lastname" required="yes"><br>
Domain<font color="#FF0000">*
</font>:
<cfinput type="text" name="domain" required="yes"><br>
<br>
<cfinput type="text" name="email1"
bind="cfc:bindFcns.getEmailId({firstname@keyup},{lastname@keyup},
{domain@keyup})">
<br><br>
<font color="#FF0000">*</font> indicates the field is required.
</cfform>
The bindFcns CFC contains the following
code:
<cfcomponent>
<cffunction name="getEmailId" access="remote">
<cfargument name="firstname">
<cfargument name="lastname">
<cfargument name="domain">
<cfreturn "#left(firstname,1)#.#lcase(arguments.lastname)#@#
lcase(domain)#">
</cffunction>
</cfcomponent>
|