[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 690
  • Last Modified:

Edit an input element in ColdFusion Form without refreshing the page

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
dxladner
Asked:
dxladner
  • 4
  • 3
  • 2
1 Solution
 
COBOLdinosaurCommented:
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
 
dxladnerAuthor Commented:
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
 
Pravin AsarCommented:
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
Pravin AsarCommented:
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
 
COBOLdinosaurCommented:
AJAX is pretty much a sledgehammer to crack a peanut.

Cd&
0
 
dxladnerAuthor Commented:
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
 
Pravin AsarCommented:
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
 
dxladnerAuthor Commented:
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
 
dxladnerAuthor Commented:
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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 4
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now