A user pinged me during MAX (what's wrong with you guys, didn't I warn you about questions??!? ;) with a problem. He wanted to use a CFDIV tag that bound to a form. The problem was - he didn't want to actually do anything until the form was complete. He was using bindings, and everytime the form changed, the div reloaded, even though the form wasn't complete. There are two simple solutions to this.
First off - one simple solution is to build the source file, and by source file I mean what your CFDIV is pointing to - build it such that it recognizes an incomplete form and simply doesn't do anything. So consider this form:
<form id="myform"> Name <input type="text" id="name" name="name"><br> Age <input type="text" id="age" name="age"><br> </form>You could simply check to see if name and age have values before you output a response. But that doesn't technically answer his question. He wants the CFIDV to do nothing at all until the form is done.
So the second option is to just use a submit handler or a button to run a JavaScript function. This function can check the form - and when happy, use ColdFusion.navigate, or ColdFusion.Ajax.submitForm. I tend to prefer navigate, so here is an example.
<script> function checkForm() { var name = document.getElementById("name").value; var age = document.getElementById("age").value; //Employ Mr. T error handling if(name == '') { alert('Enter a name, fool!'); return false; } if(age == '') { alert('I pity the fool who doesn\'t have an age!'); return false; } ColdFusion.navigate('div.cfm?name='+escape(name)+'&age='+escape(age),'resultdiv'); return false; } </script><form id="myform"> Name <input type="text" id="name" name="name"><br> Age <input type="text" id="age" name="age"><br> <input type="button" value="Test" onClick="checkForm()"> </form>
<cfdiv id="resultdiv" style="background-color:##fff271" />
As a quick FYI, div.cfm simply dumped the URL scope, and the background color on the div was just me being fancy.