Hi guys,
I was wondering if you can help me at all. I've just built a small html page which is meant to keep track of overtime. The data is entered through input fields. Then with jquery I extract the data from the input fields, create and populate a table. I want to make these changes permanent, meaning that I would like to have the ability to close the page, reopen it and see the data input previously. I take that's not achievable with jquery and I need php?
any idea?
Here is the code so you get an idea.
HTML
<!DOCTYPE html>
<html>
<head>
<title>This is a test</title>
<link rel="stylesheet" type="text/css" href="styles.css" >
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<table>
<tr>
<th>Week ending</th>
<th>Total week hours worked</th>
<th>Week overtime available</th>
<th>Total overtime</th>
<th>Comments</th>
</tr>
<tr class="editable">
<td><input type="text" class="date"></td>
<td> <input type="text" class="hoursWorked"></td>
<td class="overtimeAvailable"> </td>
<td class="totalOvertime"></td>
<td> <textarea type="text" class="comments"></textarea></td>
</tr>
</table>
<button>Submit</button>
</body>
</html>
Script
$(document).ready(function(){
var totalOvertime = 0;
$("button").click(function(){
var tableRow;
var date;
var hoursWorked;
var overtimeAvailable;
var comment;
date = $("input.date").val();
//console.log(date);
hoursWorked = parseFloat($("input.hoursWorked").val());
overtimeAvailable = hoursWorked - 37.5;
totalOvertime += overtimeAvailable;
comment = $(".comments").val();
console.log(comment);
console.log("hours " + typeof hoursWorked + " overtime " + typeof overtimeAvailable );
tableRow = '<tr>' +
'<td class="date">' + date + '</td>' +
'<td class="hoursWorked">' + hoursWorked + '</td>' +
'<td class="overtimeAvailable">' + overtimeAvailable + '</td>' +
'<td class="totalOvertime">' + totalOvertime + '</td>' +
'<td class="comments">' + comment + '</td>' +
'</tr>';
$(".editable").before(tableRow);
/* $(".overtimeAvailable").each(function(){
totalOvertime = totalOvertime + overtimeAvailable;
$(".totalOvertime").html(totalOvertime + " hrs");
}); */
$("input, textarea").val("");//clear input
});
});
thanks
