Solved

Edit an input element in ColdFusion Form without refreshing the page

Posted on 2013-01-15
9
647 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 28

Accepted Solution

by:
Pravin Asar earned 500 total points
Comment Utility
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
AJAX is pretty much a sledgehammer to crack a peanut.

Cd&
0
 

Author Comment

by:dxladner
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

CFGRID Custom Functionality Series -  Part 1 Hi Guys, I was once asked how it is possible to to add a hyperlink in the cfgrid and open the window to show the data. Now this is quite simple, I have to use the EXT JS library for this and I achiev…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

728 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now