Solved

Edit an input element in ColdFusion Form without refreshing the page

Posted on 2013-01-15
9
663 Views
Last Modified: 2013-01-19
I am using Coldfusion. I have a form that creates a work schedule. I have the hours and minutes setup using select boxes. The form saves the form to the database. When making changes to the start time and end time, I want to have the total hours displayed at the end of the form in an input box without refreshing the page. Right now everything works and the total hours are displayed but when the form loads, the total hours are set to 12:00. So when the user makes changes to the start time or end time, I want the total hours input box to update without the page refreshing.
<cfform name="frmShift" method="POST" onsubmit="return checkForm(document.frmShift)">
<table cellpadding="5">
<cfif form.sh_id lt 0>
	<tr><td align="right">
	<b><span class="red">*</span>Employee:</b></td>
	<td><select name="emp_id" class="input">
	<option value="0">select employee...
	<cfloop query="qryEmployees">
	<option value="#emp_id#">#emp_fname# #emp_lname#
	</cfloop>
	</select></td></tr>
</cfif>
<tr>
<td align="right"><b><span class="red">*</span>Date of Shift:</b></td>
<td><cfinput name="sh_date" type="datefield" size="10" maxlength="10" required="yes" message="Enter the date of the shifts" validate="date" value="#dateformat(qryShiftInfo.sh_date,'mm/dd/yyyy')#" class="input"></td></tr>
<tr><td align="right"><b><span class="red">*</span>Time:</b></td>
<td>
	<cfif form.sh_id gt 0>
		<cfset thehour = hour(qryShiftInfo.sh_date)>
		<cfset theminute = minute(qryShiftInfo.sh_date)>
		<cfset theampm = "AM">
		<cfif thehour gt 12>
			<cfset thehour = thehour - 12>
			<cfset theampm = "PM">
		<cfelseif thehour eq 12>
			<cfset theampm = "PM">
		</cfif>
	<cfelse>
		<cfset thehour = 8>
		<cfset theminute = 0>
		<cfset theampm = "AM">
	</cfif>
	<select name="hour" class="input">
	<cfloop index="i" from="1" to="12">
		<option<cfif i eq thehour> selected</cfif>>#i#
	</cfloop>
	</select>
  <b>:</b>
  <select name="minute" class="input">
  <option<cfif theminute eq 0> selected</cfif>>00
  <option<cfif theminute eq 15> selected</cfif>>15
  <option<cfif theminute eq 30> selected</cfif>>30
  <option<cfif theminute eq 45> selected</cfif>>45
  </select>
  <select name="ampm" class="input">
  <option<cfif theampm eq "AM"> selected</cfif>>AM
  <option<cfif theampm eq "PM"> selected</cfif>>PM
  </select>
  <cfset startTimeHour =#timeFormat(#createTime('#thehour#', '#theminute#', '00')#)#>
</td></tr>
<tr>
<td align="right"><b><span class="red">*</span>End Date of Shift:</b></td>
<td><cfinput name="sh_end_date" type="datefield" size="10" maxlength="10" required="yes" message="Enter the end date of the shifts" validate="date" value="#dateformat(qryShiftInfo.sh_end_date,'mm/dd/yyyy')#" class="input"></td></tr>
<tr><td align="right"><b><span class="red">*</span>Time:</b></td>
<td>
	<cfif form.sh_id gt 0>
		<cfset theshhour = hour(qryShiftInfo.sh_end_date)>
		<cfset theshminute = minute(qryShiftInfo.sh_end_date)>
		<cfset theshampm = "AM">
		<cfif theshhour gt 12>
			<cfset theshhour = theshhour - 12>
			<cfset theshampm = "PM">
		<cfelseif theshhour eq 12>
			<cfset theshampm = "PM">
		</cfif>
	<cfelse>
		<cfset theshhour = 8>
		<cfset theshminute = 0>
		<cfset theshampm = "AM">
	</cfif>
	<select name="sh_hour" class="input">
	<cfloop index="i" from="1" to="12">
		<option<cfif i eq theshhour> selected</cfif>>#i#
	</cfloop>
	</select>
  <b>:</b>
  <select name="sh_minute" class="input">
  <option<cfif theshminute eq 0> selected</cfif>>00
  <option<cfif theshminute eq 15> selected</cfif>>15
  <option<cfif theshminute eq 30> selected</cfif>>30
  <option<cfif theshminute eq 45> selected</cfif>>45
  </select>
  <select name="sh_ampm" class="input">
  <option<cfif theshampm eq "AM"> selected</cfif>>AM
  <option<cfif theshampm eq "PM"> selected</cfif>>PM
  </select>
  <cfset endTimeHour =#timeFormat(#createTime('#theshhour#', '#theshminute#', '00')#)#>
  <br />
  
</td></tr>
<tr>
	<td align="right"><b>
	<cfset totalHours=#timeFormat(#endTimeHour# - #startTimeHour#)#>
		Total Hours:</b>
	<cfinput type="text" name="sh_hours" value="#left(totalHours, 5)#" /><br />
		
	</td>
</tr>
<tr>
	<td colspan="2" align="center"><input type="submit" value="#Button#" name="submit"></td>
	<td><input type="reset" name="resetButton" value="Reset Form" /></td>
	
</tr>
</table>
<input type="Hidden" name="sh_id" value="#form.sh_id#">
</cfform>

Open in new window

0
Comment
Question by:dxladner
  • 4
  • 3
  • 2
9 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38784098
Include the total hours in the form submission and then on the server populate the total hours with that value when you return the form.

You cannot get a response back from the submission of a form without the page refreshing.

Cd&
0
 

Author Comment

by:dxladner
ID: 38784182
Cd& thanks for the response. I was thinking of some type of javascript or AJAX to calculate the total hours without refreshing the page and before the submission as I do have a totalHours row in my database table. After the form is submitted, the hours are calculated correctly and saved correctly in my database table so when I use my edit form to make a change to the shift, the query pulls the totalHours from the database table which has been correctly calculated and saved. I want the user to see the totalHours before the form submits. I do not know enough about AJAX or JavaScript.
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 38784236
Which version of Coldfusion you are using ?

It is CF8 or above.

You can use coldfusion ajax (cfdiv) to bind the changes to input fields and post back the result to desired field,

I will try to post some example
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 29

Accepted Solution

by:
Pravin Asar earned 500 total points
ID: 38784398
See an example code below:


<cfform>
      <table border="1">
            <tr><td>Monday</td><td><cfinput type="text" name="day1" validate="integer" value="4" /></tr>
            <tr><td>Tuesday</td><td><cfinput type="text" name="day2" validate="integer" value="4" /></tr>
            <tr><td>Wednesday</td><td><cfinput type="text" name="day3" validate="integer" value="4"/></tr>
            <tr><td>Thursday</td><td><cfinput type="text" name="day4" validate="integer" value="4" /></tr>
            <tr><td>Friday</td><td><cfinput type="text" name="day5" validate="integer" value="4"/></tr>
            <tr><td colspan="2">&nbsp;</td></tr>
            <tr>
                  <td>Total Hours</td>
                  <td>
                  <cfdiv bindonload="true" bind="url:calctimesheet.cfm?d1={day1}&d2={day2}&d3={day3}&d4={day4}&d5={day5}" ID="theDiv"
        style="background-color:##CCffFF; color:red;position:relative;"/>      
                  </td>
            </tr>
      </table>
</cfform>


calctimesheet.cfm  is very simple.


<cfset total= #Int(url.d1)# + #Int(url.d2)# + #Int(url.d3)# + #Int(url.d4)# + #Int(url.d5)#/>
<input type="text" name="total" readonly value="<cfoutput>#total#</cfoutput>"/>
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38784555
AJAX is pretty much a sledgehammer to crack a peanut.

Cd&
0
 

Author Comment

by:dxladner
ID: 38787739
pravinasar,

thanks for your example. works great but I have seen this example before. The problem is the way I have my form setup so the user can user select boxes to choose the hour, the minute. The problem is taking the select box values and from both the starttime and endtime and having the user see the total hours update just like your example. That is the issue I am having. I have been banging my head trying all different ways but no luck. That is why I placed it on ExpertsExchange. No ideas on how to take the select box values for the startime and endtime and bind them to the totalhours value so it will update on the page without refreshing. Right now, I use the following lines to do this:
for starting value:

 <cfset startTimeHour =#timeFormat(#createTime('#thehour#', '#theminute#', '00')#)#>

for ending value:

<cfset endTimeHour =#timeFormat(#createTime('#theshhour#', '#theshminute#', '00')#)#>

then the total hours:

<cfset totalHours=#timeFormat(#endTimeHour# - #startTimeHour#)#>
            Total Hours:</b>
      <cfinput type="text" name="sh_hours" value="#left(totalHours, 5)#" />

So when the form is executed the calculations are done and the correct value is entered into my database table. It is now just updating the totalHours variable to display the updated value before form submission.

Thanks for all of your help!
D
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 38792637
D,

Thanks for the update and bit more details on your problems.

Although it is possible to bind the unit selection (in conjunction with duration values), it can get really messy.

In such situations, doing all the calculations with Javascript could be an option.

Look at

http://www.javascriptjournal.com/tutorials/cuttingspeed.htm

Here I am doing calculations based on unit. Has different equations (see the source code).
0
 

Author Comment

by:dxladner
ID: 38794119
pravinasar,

We are really close now. From the previous example, I did create a calctimesheet and now I getting my totalhours to update but getting the wrong calculations dealing with the PM vs AM. So do not worry I will be giving you some credit for that answer as a solution. But if you could help me out with one more little issue. For example, if I start someone at 8:00 AM and end at 3:00 PM I get the correct time of 7 hours but when I go over the 12 hour difference in the AM vs PM it breaks. For example, I have a 8:00 AM start time and a 9:00 PM quick time shows 1 hour difference. How could I fix. this issue.

Again thanks so much for your help.

Here is the code I did to get the update working for future examples:

starttime

<td>
      <cfif form.sh_id gt 0>
            <cfset thehour = hour(qryShiftInfo.sh_date)>
            <cfset theminute = minute(qryShiftInfo.sh_date)>
            <cfset theampm = "AM">
            <cfif thehour gt 12>
                  <cfset thehour = thehour - 12>
                  <cfset theampm = "PM">
            <cfelseif thehour eq 12>
                  <cfset theampm = "PM">
            </cfif>
      <cfelse>
            <cfset thehour = 8>
            <cfset theminute = 0>
            <cfset theampm = "AM">
      </cfif>
      <select name="hour" class="input">
      <cfloop index="i" from="1" to="12">
            <option<cfif i eq thehour> selected</cfif>>#i#
      </cfloop>
      </select>
  <b>:</b>
  <select name="minute" class="input">
  <option<cfif theminute eq 0> selected</cfif>>00
  <option<cfif theminute eq 15> selected</cfif>>15
  <option<cfif theminute eq 30> selected</cfif>>30
  <option<cfif theminute eq 45> selected</cfif>>45
  </select>
  <select name="ampm" class="input">
  <option<cfif theampm eq "AM"> selected</cfif>>AM
  <option<cfif theampm eq "PM"> selected</cfif>>PM
  </select>
         
  <cfinput type="text" name="startTimeHourInput" bind="{hour}:{minute} {ampm}" value="8:00 AM" />
</td>
        


endtime:

<td>
      <cfif form.sh_id gt 0>
            <cfset theshhour = hour(qryShiftInfo.sh_end_date)>
            <cfset theshminute = minute(qryShiftInfo.sh_end_date)>
            <cfset theshampm = "AM">
            <cfif theshhour gt 12>
                  <cfset theshhour = theshhour - 12>
                  <cfset theshampm = "PM">
            <cfelseif theshhour eq 12>
                  <cfset theshampm = "PM">
            </cfif>
      <cfelse>
            <cfset theshhour = 8>
            <cfset theshminute = 0>
            <cfset theshampm = "AM">
      </cfif>
      <select name="sh_hour" class="input">
      <cfloop index="i" from="1" to="12">
            <option<cfif i eq theshhour> selected</cfif>>#i#
      </cfloop>
      </select>
  <b>:</b>
  <select name="sh_minute" class="input">
  <option<cfif theshminute eq 0> selected</cfif>>00
  <option<cfif theshminute eq 15> selected</cfif>>15
  <option<cfif theshminute eq 30> selected</cfif>>30
  <option<cfif theshminute eq 45> selected</cfif>>45
  </select>
  <select name="sh_ampm" class="input">
  <option<cfif theshampm eq "AM"> selected</cfif>>AM
  <option<cfif theshampm eq "PM"> selected</cfif>>PM
  </select>

<cfinput type="text" name="endTimeHourInput" bind="{sh_hour}:{sh_minute} {sh_ampm}" value="8:00 AM" />

      <cfdiv bindonload="true" bind="url:calctimesheet.cfm?endTimeHourURL={endTimeHourInput}&startTimeHourInputURL={startTimeHourInput}" ID="theDiv"
        style="background-color:##CCffFF; color:red;position:relative;"/>

and now here is my calctimesheet:

<cfoutput>
<cfset totalHours = #timeFormat(#url.endTimeHourURL# - #url.startTimeHourInputURL#)# />

<input type="text" name="totalHours" readonly value="<cfoutput>#totalHours#</cfoutput>"/>
</cfoutput>
0
 

Author Closing Comment

by:dxladner
ID: 38796643
Using this example, I was able to convert it into my form and display the results without refreshing the page using a second cfm page that does the calculations and then bind this page to a cfdiv on the form page.

Thanks for all of your help!
0

Featured Post

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
JS library vs Js framework 11 24
window close link 7 36
how to customize the text in the legend in highcharts 3 35
center navbar (navigation menu) on web page 3 23
Hi. There are several upload tutorials using jquery and coldfusion. I found a very interesting one here Upload Your Files using Jquery & ColdFusion and Preview them (http://www.randhawaworld.com/) . I did keep the main js functions but made sever…
Recently while working on a project I got a very annoying cfdocument has no body error message. I had never seen this error before. So I checked the code. The code was pretty simple; it was Just showing me the cfdocumnt tag and inside that tag a …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question