How to use Button in ColdFusion

Introduction

Buttons play a crucial role in web development, enabling user interaction to trigger various actions like submitting forms, displaying messages, or manipulating content dynamically. In Adobe ColdFusion, the <cfinput> tag offers a simple yet powerful way to create buttons and other input elements with built-in functionality. This tutorial demonstrates how to use the cfinput tag to create a button that interacts with a pop-up window (a ColdFusion cfwindow), providing an elegant and interactive experience for the user. By the end of this article, you'll understand how ColdFusion buttons can interact with dynamic content and JavaScript to enhance the usability of web pages.

Setting the Foundation: The HTML Structure

The example begins by setting up a basic HTML structure, including necessary headers and meta tags. It utilizes standard HTML to define the webpage layout, including a title, header, and an introduction to the button functionality. A heading (<h2>) is styled with a distinct color and font style to give the page a polished appearance. Additionally, a horizontal rule is used for aesthetic separation, enhancing readability.

The core of the HTML structure is complemented by ColdFusion-specific tags embedded within the page. These tags facilitate the dynamic functionalities provided by ColdFusion, such as pop-up windows and form elements.

Creating a ColdFusion Window: cfwindow Tag

One of the key components in this example is the use of the <cfwindow> tag, which creates a modal window. This window, named TestWindow, is set with the attribute initshow="false", meaning it will not be visible when the page initially loads. Inside this window, an image (Bee1.jpg) is loaded from the "Images" folder. This use of cfwindow allows for the creation of dynamic, on-demand content displays, such as image viewers, informational pop-ups, or forms.

The window itself remains hidden until activated by a button, demonstrating how ColdFusion can interact with JavaScript to control the display of on-page elements.

Building the Form: cfform and cfinput Tags

The form, constructed with the <cfform> tag, is named InputTypeButtonTest and is designed to accept user interaction. The form's format="html" attribute ensures it will render as standard HTML, making it accessible across browsers.

Inside the form, a table is used to structure the layout. The table includes a colorful header row with a DeepPink background, helping the form title stand out. The row also features custom font settings and center alignment, adding visual appeal.

At the heart of the form is the <cfinput> tag, which creates the button. This button is labeled "Show Window" and triggers a JavaScript function when clicked. The JavaScript code, ColdFusion.Window.show('TestWindow'), instructs ColdFusion to display the previously hidden window, effectively linking the button's action to the dynamic content. This interplay between ColdFusion and JavaScript demonstrates the flexibility ColdFusion offers for adding interactive features to web applications.

Interactivity with JavaScript and ColdFusion

The key functionality of this example is the seamless integration between ColdFusion and JavaScript. When the user clicks the button, the JavaScript function calls ColdFusion's ColdFusion.Window.show method to display the hidden cfwindow. This interaction is smooth and user-friendly, offering a practical way to implement pop-up windows that can be dynamically shown or hidden based on user actions.

This method can be expanded to display other types of content, such as forms, notifications, or additional information without reloading the page or navigating away. By combining ColdFusion tags and JavaScript, developers can create highly interactive and dynamic user experiences.

Summary

This ColdFusion tutorial provides a straightforward example of how to use the cfinput type button to control the visibility of a pop-up window (cfwindow). The form structure, combined with ColdFusion and JavaScript, showcases how easy it is to create dynamic web elements that respond to user actions.

Whether you are displaying images, additional content, or entire forms, this technique adds a layer of interactivity to your website. By mastering this combination of ColdFusion tags and JavaScript functions, developers can create sophisticated user interfaces with minimal code.


cfinputTypeButton.cfm

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cfinput type button: how to use input type button in coldfusion</title>
</head>

<body>
<h2 style="color:SaddleBrown; font-style:italic">cfinput type button example: how to use</h2>
<hr width="425" align="left" color="RosyBrown" />
<br />


<cfwindow name="TestWindow" title="Image Viewer" initshow="false">
 <img src="Images/Bee1.jpg" />
</cfwindow>

<cfform name="InputTypeButtonTest" method="post" format="html">
 <table border="1" cellpadding="5" cellspacing="0" bordercolor="Orange">
     <tr>
         <td colspan="2" bgcolor="DeepPink" style="color:Snow; font-size:large" align="center">
             Input type button test form
            </td>
        </tr>
     <tr>
         <td colspan="2" align="center">
       <cfinput 
                 name="Submit" 
                    type="button" 
                    value="Show Window" 
                    onClick="JavaScript:ColdFusion.Window.show('TestWindow')"
                    >
            </td>
        </tr>
    </table>
</cfform>
</body>
</html>








More ColdFusion examples