Solved

Edit an input element in ColdFusion Form without refreshing the page

Posted on 2013-01-15
9
659 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 28

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
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 
LVL 28

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 28

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

Hi, Even though I have created this Tutorial on My personal Blog, Some people might not able to find my website, So here i am posting it again Today, from the topic it is very clear that i will be showing you here the very basic usage of how we …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

856 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