· 6 years ago · Jan 06, 2020, 08:06 AM
1<!DOCTYPE HTML>
2<html>
3 <body>
4 <h2>Add Expense</h2>
5 <form>
6 <table >
7 <tr>
8 <td>
9 Date:
10 </td>
11 <td>
12 <input type="date" id="dateTxt">
13 </td>
14 </tr>
15 <tr>
16 <td>
17 Amount:
18 </td>
19 <td>
20 <input type="number" id="amtTxt">
21 </td>
22 </tr>
23 <tr>
24 <td>
25 Description
26 </td>
27 <td><input type="text" id="descTxt"></td>
28 </tr>
29 <tr>
30 <td colspan="2">
31 <button type="button" id="addBtn">Add</button>
32 </td>
33 </tr>
34 </table>
35 </form>
36 <h2>Expenses</h2>
37 <table id="expList">
38 <tr>
39 <th>Date</th>
40 <th>Amount</th>
41 <th>Description</th>
42 </tr>
43 </table>
44 </body>
45</html>
46<script>
47 document.getElementById("addBtn").onclick=function(){
48 addExpense();
49 }
50</script>
51<cfclient>
52 <cfset variables.dsn="expensedb">
53 <cfquery datasource="#variables.dsn#">
54 create table if not exists expense
55 (
56 id integer primary key,
57 expensedate integer,
58 amount real,
59 desc text
60 )
61 </cfquery>
62
63 <cfquery datasource="#variables.dsn#" name="expenses">
64 select * from expense order by expensedate desc
65 </cfquery>
66
67 <cfloop query="expenses">
68 <cfset var tempdate=new Date(expensedate)>
69 <cfset addExpenseRow(expensedate,amount,desc)>
70 </cfloop>
71 <cffunction name="addExpenseRow" >
72 <cfargument name="expensedate" >
73 <cfargument name="amt" >
74 <cfargument name="desc" >
75 <cfoutput >
76 <cfsavecontent variable="rowHTML" >
77 <tr>
78 <td>#dateFormat(expensedate,"mm/dd/yyyy")#</td>
79 <td>#amt#</td>
80 <td>#desc#</td>
81 </tr>
82 </cfsavecontent>
83 </cfoutput>
84 <cfset document.getElementById("expList").innerHTML+=rowHTML>
85 </cffunction>
86 <cffunction name="addExpense" >
87 <cfset var tmpDate=new Date(document.getElementById("dateTxt").value)>
88 <cfset var amt=Number(document.getElementById("amtTxt").value)>
89 <cfset var desc=document.getElementById("descTxt").value>
90 <cfquery datasource="#variables.dsn#">
91 insert into expense(expensedate,amount,desc) values
92 (
93 <cfqueryparam cfsqltype="cf_sql_date" value="#tmpDate.getTime()#">,
94 <cfqueryparam cfsqltype="cf_sql_numeric" value="#amt#">,
95 <cfqueryparam cfsqltype="cf_sql_varchar" value="#desc#">
96 )
97 </cfquery>
98 <cfset addExpenseRow(tmpDate,amt,desc)>
99 </cffunction>
100</cfclient>