Curt Danceswithformfields asked:
I am trying to get a form to submit onchange with cfinput type="datefield" and it won't fire my onchange event if the change is made using the popup calendar.
Consider the following...
<cfinput type="datefield" id="duedate" name="duedate" value="#NOW()#" onchange="javascript: ItemsDueForm.submit();">Have you ever run into anything like this before. Do you know of a quick workaround?
As much as I've played around with ColdFusion 8, I really haven't done much with the date controls. What's interesting is that the onchange runs just fine if you manually change the value, but the little calendar icon won't fire onchange when you change the value. So what can we do?
My first thought was - let's try a bind command with cfajaxproxy:
<cfajaxproxy bind="javaScript:doSubmit({duedate})">
Unfortunately this fired the second you clicked the calendar. Even though - visibly - nothing changed the doSubmit function was firing immediately for me. When I switched from a form submit to just a console.log('twinkies'), I noticed quite a few log messages when using the control. I figured the only way to make this work would be to store the original value, and compare that in my JavaScript. This is what I ended up with:
<head>
<script>
var origDate;
function setOrig() {
origDate = document.getElementById('duedate').value;
}
function doSubmit(duedate) {
//submit if we really changed
if(duedate != origDate) document.getElementById('ItemsDueForm').submit();
}
</script>
</head>
<body>
<cfif isDefined("form.duedate")>
<cfdump var="#form#">
<cfelse>
<cfform id="ItemsDueForm" action="#cgi.SCRIPT_NAME#" method="post">
<cfinput type="datefield" id="duedate" name="duedate" value="#NOW()#">
</cfform>
<cfajaxproxy bind="javaScript:doSubmit({duedate})">
<cfset ajaxOnLoad('setOrig')>
</cfif>
</body>
</html>
As you can see, I added an ajaxOnLoad. This will fetch the current value of the field and store it. Now when doSubmit is fired, it will only do the form submission when the value is changed.