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

Is this an intranet/internet application used by many people or is this only for you?

If it's only for you, you can save it to localstorage and no need for a serverside language.

it's just for me really but I would like to put it on our servers and have the ability to input my data using the input field rathen than changing the html everytime (in a previous version I did just that). For that I take I need a serverside language?
thanks

Member Avatar

diafol

localstorage is great if you're just working off the one machine, however, localstorage can be cleared :(.

For any robust permanence you'll need a database (or if that's not possible datafiles). A server-side solution would probably entail PHP and MySQL (or SQLite), although you could use anything really such as Java or .NET/MSSQL. You'll probably find PHP/MySQL easier to get going if you have no experience of server-side languages.

thanks. Now, sorry a bit confused about the terminology, when you say local storage what do you mean? DO you mean literally save the file onto my machine and change the html every time I need to update it, right?

The local storage that is being referred to is HTML5 localstorage.

Your best bet is as diafol recommends which is server side scripting and storing your data in a database.

Oh I see, sorry I have never heard of HTML5 localstorage, just looked it up now. It sounds interesting, but I would like to explore first the PHP option, and see how complicated is to achieve what I want.
thanks guys

Member Avatar

diafol

Tip - download a stack, e.g. XAMPP to your mnachine (Apache webserver, php MySQL and a few other things you won't need right now). There are others, but I found XAMPP to be the easiest.

If you get the XAMPP start page once you go to 'http://localhost/index.php' then you're up an ready to go.

For any advice on PHP pop over to the forum. Don't be afraid to ask 'noob' questions ;)