HOME | FERGUSON Digital Blog

Submit Asynchronous Form To CFDIV

ColdFusion Add comments

Here is another piece of Ajax that could be very useful. This example will show you how to submit a form on a page to a CFDIV on the same page asynchronously. The first bit of business is our JavaScript using the "ColdFusion.Ajax.submitForm" function. This is the asynchronous part, meaning we don't actually change pages on the client side. That is, the results of the form are sent to a page on the server without building that page on the client side.

We have to use the CFFORM tag and not the regular HTML FORM tag for this to work. Well, that's not entirely true. Since we are not actually submitting the form through the Action attribute, you can use the FORM tag all you want. The real key is binding the form field by name to our CFDIV tag. Our submit button is actually just a regular button with an OnClick attribute to fire our JavaScript. Here's everything put together:

<html>
<head>
<title></title>
   <script type="text/javascript">
      fnSearch=function() {
         ColdFusion.Ajax.submitForm("FormSearch", "Result.cfm");}
   </script>
</head>

<body>
   <form method="get" name="FormSearch" id="FormSearch">
      <input name="Search" type="text" />
      <input name="Submit" type="button" onClick="fnSearch();" value="SEARCH" />
   </form>
   <cfdiv id="SearchResult" bind="url:Result.cfm?Search={Search}" />
</body>
</html>

Omitted from this example is the "Result.cfm" page, but it was only dumping the URL scope to observe the results of typing text into our search field and pressing the button.

If you find this post useful please leave a comment and let me know how you used the information.

1 response to “Submit Asynchronous Form To CFDIV”

  1. Betty Mock on Hi,
    This is the FIRST clear explanation I've found of what asynch transmission is, although I was closing in on it with various examples. Regarding your code, it isn't what I'm trying to do. I'm trying to bind a text field in a form to two other text fields via a javascript function. The onload part is working, but the dynamic bind part is not calling the function. I'm looking for an explanation, but not finding much.

    Betty

Leave a Reply




© Copyright 1997-2024, All Rights Reserved Coldfusion and MS SQL2008
Powered by Mango Blog.   Design by FERGUSON Digital
o:Event name="beforeHtmlBodyEnd" />