Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the slickest pieces of ColdFusion's AJAX functionality is the handling of form submissions inside bound elements. In this video, I'm going to show you how ColdFusion handles submitting a form inside of a bound cfdiv. So let's start by opening up login.cfm. So this contains a simple login form. I have my username, and password and a Submit button. At the top, I'm just simply dumping the results of the FORM scope whenever the login.cfm form is submitted. So I'm going to use this form inside of a cfdiv to embed a login form inside of another page.
So let's create a new file for hosting our login form. So I'm going to call this ajaxformsubmit. On this page, the first thing I'm going to do is I'm just going to dump out the form scope. So when a form has been submitted on this page, I can see all of its values. So we'll say label=FORM scope in ajaxformsubmit.cfm. All right, then at the top, I'm going to do a cfdiv.
I'm going to bind it to our login form, login.cfm. So let's go and take a look at the form in our browser, and see what happens. So, open up ajaxformsubmit. Here is the FORM scope in ajaxformsubmit.cfm. I'm going to go ahead and fill out this file or form rather. My username and password. I'm going to click Login. Now, you'll notice that ajaxformsubmit is dumping out the form scope, but my login.cfm is not.
The reason this happens is because we're using standard form tags, regular old HTML form tags inside of login.cfm. So I'm going to change these to be cfform tags. So I'll go ahead and dave that file. We'll go back to the browser. I'm going to reload this page, and you'll notice that I get an error. It says "the imports for the CFFORM are missing." "Use CFAJAXIMPORT to import them on your main page." So what's going on here? Let me just get rid of all the errors. It's that on this page I do not actually have any cfform tags.
They're all inside of login.cfm. So in order to use any cfform functionality, I need to actually make sure that I tell this page that I'm going to be using a cfform. So any AJAX-y tags that I use inside login.cfm, I need to actually make sure I import their AJAX functionality into the parent page. So let's switch back to the browser and reload again. Now I don't get any errors. So we're going to hide that for now. So let's go ahead and submit our login form again. So I'll say danshort, my password, then click Login.
You'll notice that this did not change, but up here at the top I'm now getting FORM Values in login.cfm. I not only have my LOGINBUTTON and my USERNAME and PASSWORD, but I have all of the CF container-specific attributes as well. If I take a look at Firebug, let's go ahead and submit this form again. So we'll do danshort, my password, click Login. We can see that it's making a POST to login.cfm. It's pulling in this response, which has all of my form functionality on it, and then rendering it back into the page.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 104365 Viewers
56 Video lessons · 116275 Viewers
71 Video lessons · 85516 Viewers
131 Video lessons · 40941 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.