0

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

4
Contributors
7
Replies
19
Views
3 Years
Discussion Span
Last Post by diafol
0

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.

0

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

0

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.

0

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?

0

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.

0

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

0

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 ;)

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.