Hi guys, I have an HTML page that I built and at the moment the content on it gets changed via javascript. What I would like to achieve is to change the content permanently on this page (which will be uploaded to the server).
Now, I must admit that I have very little experience with PHP but I use javascript on a regular basis and I know a bit of JAVA too, I hope these skills might be useful. The only experience with PHP I had was ages ago when I built a small form.
So, here is the code, it might be useful to see it I think:
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>
Javascript
$(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
});
});
The way this is working at the moment is that the user type the data in the input fields and then when the submit button is clicked the page is populated. As I said before I'd like to change the page and make those changes permanent. Can anybody give me any indication of how this can be achieved please and what I need?
thanks
