XML forms and CFIMAGE
I was working with Dan Plesse on an odd issue he had with CF8 Image Captcha's and CFFORM. No matter what he did, he couldn't get the captcha to show up in the form. My first though was a broken CFIDE or some other 'special' folder, but that wasn't the case. If we viewed source on his page, there was no IMG tag at all. I finally got it down to one very simple example:
<cfform name="register"
id="register"
format="XML"
skin="blue"
style="border-left-style:groove; padding:0px; width:auto"
enctype="multipart/form-data"
action="<cfoutput>#CGI.script_name#</cfoutput>"
method="post"
>
<!--- Use cfformgroup to put the first and last names on a single line. --->
<cfformgroup type="vertical" label="Step 4 - captcha ">
<cfinput type="text" name="captcha_test" value="" size="7"
label="Enter text that you see in the image:" />
<img src="http://images.pcworld.com/images/header/logo_hd.jpg">
<cfimage
action="captcha"
height="60"
width="200"
text="moon pies"
difficulty="low"
fonts="verdana,arial,times new roman,courier"
fontsize="15" />
</cfformgroup>
</cfform>
I finally figured out that the issue was with the format="xml". When I removed that, it worked perfectly.
And then I did something magical. I actually read the docs on XML forms. (This is a feature in ColdFusion I've never used in production, nor have I played with it much.) The docs clearly say that any non-form items will be stripped. To keep them in...
ColdFusion does not process inline text or standard HTML tags when it generates an XML form; therefore, you use the cfformitem tag to add formatted HTML or plain text blocks and any other display elements, such as horizontal and vertical rules, to your form.
So taking the above code, we can fix it right away like so:
<cfform name="register"
id="register"
format="XML"
skin="blue"
style="border-left-style:groove; padding:0px; width:auto"
enctype="multipart/form-data"
action="<cfoutput>#CGI.script_name#</cfoutput>"
method="post"
>
<!--- Use cfformgroup to put the first and last names on a single line. --->
<cfformgroup type="vertical" label="Step 4 - captcha ">
<cfinput type="text" name="captcha_test" value="" size="7"
label="Enter text that you see in the image:" />
<img src="http://images.pcworld.com/images/header/logo_hd.jpg">
<cfformitem type="html">
<cfimage
action="captcha"
height="60"
width="200"
text="moon pies"
difficulty="low"
fonts="verdana,arial,times new roman,courier"
fontsize="15" />
</cfformitem>
</cfformgroup>
</cfform>
Comments
Ray, is there a reason you are using the <cfoutput> tags here:
action="<cfoutput>#CGI.script_name#</cfoutput>"
No need for them.
Paul, if you are talking about Spry widgets with cfform then there is a way:
http://blog.fusefly.info/index.cfm/2007/10/7/Using...
I cant comment on that blog for some reason, the captach and the whole post comment windows is messed up (says captach not available and requires me to input the "text")
BUt I dont know how is that working for him because CF replaces the onSubmit method for the CFFORM
I have a form running on my website. The code is like this:
<cfform
action="formResponse.cfm"
method="post"
name="contactForm"
id="contactForm"
onsubmit="return validateForm();">
When it is rendered the HTML looks like this:
<form
name="contactForm"
id="contactForm"
action="formResponse.cfm"
method="post"
onsubmit="return _CF_checkcontactForm(this)">
And the JavaScript that CF puts on the page conatins this:
else {
// run userdefined onSubmit javascript.
return validateForm();
return true;
}
Which meams that after the CF JavaScript runs, the SPRY JavaScript will run.