A form created with cfform inside a cfdiv will submit via AJAX and have the response placed in the div created by the cfdiv.
Its possible, with a little JavaScript and HTML, to have the form submit to a new page and to use the cfform validation if needed. First lets look at the main page:
<cfajaximport tags="cfform"> <h2>My Page</h2> <cfdiv bind="url:theForm.cfm">
Not doing much here other than setting up a very basic page with a cfdiv that will get the source from theForm.cfm. Lets now look at that page:
<cfform method="post" action="theDestination.cfm" id="divForm" name="divForm"> Team: <cfinput type="date" name="team" id="team" required="true" message="Please enter your team"> <br> <cfinput type="submit" name="sub" id="sub" value="Submit Via AJAX"><br> <input type="button" onclick="if (_CF_checkdivForm(this.form)) {document.divForm.submit();}" value="Submit the to a New Page"> </cfform>A standard cfform example that uses some validation (I researched this topic because the form I was using had extensive use of the datefield type of cfinput). Clicking on the Submit button will submit the form via AJAX and display the results (I've listed theDestination.cfm below).
Clicking on 'Submit to a New Page' button (and its a standard html button) will, if the form passes validation, submit to a new page. If it fails validation and the user had not entered a team that message via an alert will be displayed. Lets take a look at the JavaScript inside the onClick:
if (_CF_checkdivForm(this.form)) {document.divForm.submit();}
The function inside the if statement is written by ColdFusion and is there for all cfform produced forms. The name of this function is simply _CF_check and the value placed in the id attribute for cfform. That function will return true or false and if true we tell the browser to submit the form.
For reference here is the coe for theDestination.cfm:
<cfdump var="#form#">