10 Replies Latest reply: May 17, 2014 12:12 AM by rumbizumbi RSS

    Using CFINPUT dateField with onChange

    DLAH Community Member
      I imagine this is easy, but have tried to search here as well as Google it and have come up empty.

      I have a CFINPUT dateField control that is OK when my form loads, but then I want the control to capture a new date selection from the user and update the form. I believe the onChange event is used to process this, but I don't know how to code it so that it will refresh the form using the new date and keep the user's date selection.
        • 1. Re: Using CFINPUT dateField with onChange
          DLAH Community Member
          I think I'm almost there with:
          <CFINPUT NAME="currdate"
          ONCHANGE="getURL('index2.cfm?CurrDate=' + currdate.selectedDate, '_self')"
          TYPE="datefield"
          VALUE="#newCurrDate#" />

          But it returns the value in the wrong format like:
          index2.cfm?CurrDate=Thu%20Sep%2014%2000:00:00%20GMT-0700%202000

          How do I format/simplify the "currdate.selectedDate"?
          • 2. Re: Using CFINPUT dateField with onChange
            DLAH Community Member
            Further to this issue, consider the following basic code that works with handling a selectedDate:

            <!--- Set initial dates.--->
            <cfparam name="Form.selectdate" default="#dateformat(now(), 'mm/dd/yyyy')#">

            <!--- Display the current date value. --->
            <cfif isDefined("Form.submitit")>
            <cfoutput><b>You selected #Form.selectDate#</b><br><br></cfoutput>
            <cfelse>
            <cfoutput><b>Form date is #Form.selectDate#</b><br><br></cfoutput>
            </cfif>

            <b>Please select a date on the calendar and click Save.</b><br>
            <br>
            <cfform name="form1" format="Flash" skin="haloBlue" width="375" height="350" >
            <cfinput type="dateField"
            name="selectdate"
            label="Initial date"
            width="100"
            value="#Form.selectdate#" >
            <cfinput type="Submit" name="submitit" value="Save" width="100">
            </cfform>

            I would like to accomplish the same thing but use onChange instead of a submit.
            • 3. Using CFINPUT dateField with onChange
              mcadle Community Member
              Why don't you just use:

              <cfinput type="date..." name="test" onchange="{_root.formfieldtochange.text=_root.test.text;}">
              <cfinput type="text" name="formfieldtochange">

              Whenever you update the datepicker, it will automatically change the value in the other field.
              • 4. Re: Using CFINPUT dateField with onChange
                YogeshM Community Member

                The onChange event doesn't work with cfinput type datefield using CFML in a plain HTML form.

                 

                In Flash form and flex, the onChange event works perfectly, i.e. whenever you choose a new date, the event fires.

                 

                In HTML form, when you choose a new date from the datefield, the event doesn't fire. You have to select the new date, then click into the textbox and hit the enter key. Then only it fires the onChange event. Very strange indeed!

                 

                Any ideas how to get this feature working or is it a bug in CF itself?

                 

                Thanks.

                • 5. Re: Using CFINPUT dateField with onChange
                  Adam Cameron. Community Member

                  From my reading of the HTML spec, it's not a bug, it's how the onchange event works.  The spec says:

                   

                  The onchange event occurs when a control loses the input focus and its value has been modified since gaining focus

                   

                  (My emphasis).

                   

                  (http://www.w3.org/TR/html401/interact/scripts.html#adef-onchange)

                   

                  When changing the control's value via script, the control never gets the focus, so implicitly never loses the focus, which is a prereq for the onchange event to fire.

                   

                  The same thing happens if one changes a normal form input control via script.  No event fires.

                   

                  --

                  Adam

                  • 6. Re: Using CFINPUT dateField with onChange
                    YogeshM Community Member

                    Thanks Adam!

                     

                    I've come across a possible workaround to this issue.

                     

                    You can find it here: http://www.coldfusionjedi.com/index.cfm/2008/10/1/Ask-a-Jedi-ColdFusion-datefieldchange-qu estion

                     

                    Hope this helps others as well.

                     

                    Regards

                    • 7. Re: Using CFINPUT dateField with onChange
                      YogeshM Community Member

                      I do however have an issue with the cfinput type datefield.

                       

                      How do you disable Saturdays and Sundays?

                       

                      In Flash form and Flex, we only use disabledDays=[0,6]

                       

                      For example,

                       

                      <cfinput
                                 type="datefield"

                                id="valuationDate_txt"

                                name="valuationDate_txt"
                                mask="dd/mm/yyyy" width="50"
                                value="#lsdateformat(now(),'dd/mm/yyyy')#"
                                onFocus="valuationDate_txt.disabledDays = [0,6];">

                       


                      How do we make the disabledDays=[0,6] work with the cfinput type datefield?

                       

                      Thanks and regards.

                      • 8. Re: Using CFINPUT dateField with onChange
                        Adam Cameron. Community Member

                        I have no idea, but I would start a new topic rather than tack it on to this one, because that question has nothing to do with the subject line.  People who might not know about onchange events but do know about enabling/displaying specific days will perhaps not see your question, as they might not bother reading it.

                         

                        --

                        Adam

                        • 9. Re: Using CFINPUT dateField with onChange
                          gmcfalls Community Member

                          This may not be the most elegant solution out there, but it works okay.

                           

                          ====== Javascript Code ======

                          i = 0;

                          function doSubmit(caldate) {

                          i++;

                          if (i>1) {

                          window.location = "index.cfm?caldate=" + document.getElementById('caldate').value;

                               }

                          }

                           

                           

                          =====CFML Code ======

                          <cfform ... typical code here ....>

                          <cfinput type="datetime" id="caldate" ...typical code here .... />

                          <cfajaxproxy bind="javaScript:doSubmit({caldate})">

                          </cfform>

                           

                           

                          What this does is fires doSubmit each time the form controls are touched or the value is modified.  When this happens, it will increment i.  You will fire doSubmit twice (once to open the calendar and then once when a date is actually selected).  So you want to fire when i = 2 or when i > 1.

                          • 10. Re: Using CFINPUT dateField with onChange
                            rumbizumbi Community Member

                            Not a very elegant solution also, but it works

                             

                            Use an JavaScript onclick event in the cfform tag.

                            Check if the old value is not the same as the new value and execute your code:

                             

                                <cfform name="form1" format="html" skin="haloBlue" style="display:inline;"
                                 onclick="if(document.getElementById('startdate').value != '' && oldval != document.getElementById('startdate').value)
                                 {alert('changed')}">

                             

                                <cfinput type="dateField" name="startdate" id="startdate"  style="width: 65px" mask="DD.MM.YYYY"  value="#mydate#">

                             

                                </cfform>

                             

                                <script type="text/javascript">
                                 var oldval = document.getElementById('startdate').value;

                                </script>

                             

                            regards

                            rene