JavaScript: Saving certain data to a csv

Question

I understand that JavaScript isn't really made to open and save files. The best method I've seen to get this to work is to use a form and then POST all the information I need to a PHP file that can than save the information I want to a file.

I plan on producing this kind of data and storing it to a csv:

Name,Low,High,Number

Using inputboxes and javascript. I have decided that I will start off like this (____ is an inputbox)

Name: ______________    Start: 0      End: _____  Wage ______  [add button]

When the person clicks add, it will then store the data to a variable. How should I do this the best? Assuming the person fills in this information:

Name: Brian             Start: 0      End: 100    Wage 200  [add button]

Should I do something like $Array['Brian'][0,100,200]?

And then I can somehow loop through the array in PHP when its sent via POST?

---

Keep in mind when the person clicks Add, another option appears using previous data such as my example of Brian,0,100,200

Name: Brian           Start: 100       End: ______   Wage: ______   [add button]

The idea being that no gaps between low and high can be created. You can't end at 100 and start at 200, the next is always the start.

Edit:

Just to give some background, what I am storing is actually hourly wage for people. Brian,0,20,20 actually sets that for hours between 0 and 20; brian will make $20 an hour.

What are "Start", "End" and "Wage" signifying?
Start of the hour range, End of the hour range, and the hourly wage.

Do you need to store their data permanently?
It will need to be stored to a CSV file, which gets intercepted by the client and covertes it into a SQLite memory database for processing

Will there be more than one entry for "Brian" within a storage period?
Yes, as many entries as you wish. There also HAS to have a name which 'Default' is set... This will be the case where if the employee doesn't have special wages, they get the default employee wages and overtime something like:
Default,0,40,15
Default,40,1000,20

Answer 1

I would have the input boxes set up like so:

Name:  <input type="text" name="name[]">
Start: <input type="text" name="start[]">
End:   <input type="text" name="end[]">
Wage:  <input type="text" name="wage[]">

That way you can easily handle multiple entries.

---

See Working Demo and Source Code

Code is very ugly but I am sure you can more polish into it. You can do all your verification on the server side, removing empty entries and such. Most of the explanation and some sample code on the links. (Needs jQuery.)

Answer 2

You may want to consider storing your information in a local array variable in JSON format and then sending that to your PHP page via a POST variable.

Here's a quick fiddle that I put together to illustrate it. I believe it does what you're looking for. (The HTML markup and JavaScript are at the end of this answer in case jsFiddle.net goes away.)

Basically what I do is declare an empty array variable:

var data = [];

Then, using jQuery, I add your text boxes and start value to the array when the "Add" button is clicked:

data.push({"name" : $("#name").val(), "start": $("#start").text(), "end": $("#end").val(), "wage": $("#wage").val()});

You can see the array in JSON format every time you click "Add" - I output it using the JSON2.js library:

$("#jsonData").text(JSON.stringify(data));

Since the data is an array, you can loop through it on the client and pull out information:

alert(data[data.length-1].name);

And you can also access it on the server side (I'm not a PHP guy, but I'm 99.99% certain there's JSON support there).

Hope this helps! If there are questions about this or if I didn't get the requirements right, let me know and I'll update my answer accordingly.

EDIT: Here's the markup and JavaScript

Markup

Name: <input type="text" id="name" /><br/>
Start: <span id="start">0</span><br/>
End: <input type="text" id="end" /><br/>
Wage: <input type="text" id="wage" /><br/>
<button id="add">Add</button>

<br/>
<div id="jsonData"></div>

<br/>
<button id="submit">Submit</button>
​

JavaScript (please note that I realize that this JavaScript isn't optimal -- I could cache jQuery selector queries instead of re-executing them. I was just putting something together quickly for demo purposes.)

var data = [];

$(document).ready(function() {
    $("#add").click(function(e) {
        e.preventDefault();
        //add the entered values into the array...
        data.push({"name" : $("#name").val(), "start": $("#start").text(), "end": $("#end").val(), "wage": $("#wage").val()});
        //set the start span to the value entered in the end textbox...
        $("#start").text($("#end").val());
        //clear out the text boxes (not efficient!)
        $("#name").val("");
        $("#end").val("");
        $("#wage").val("");

        //show some values!
        alert(data.length);
        alert(data[data.length-1].name);

        //show the JSON formatted array in the DIV at the bottom of the page...
        $("#jsonData").text(JSON.stringify(data));
    });

    $("#submit").click(function(e) {
        e.preventDefault();
        $.ajax({
            url: "/ajax_html_echo/",
            type: "POST",
            dataType: "json",
            data: {html: JSON.stringify(data)},
            success: function(data) { alert(JSON.stringify(data)); },
            error: function(x, t, m) { alert(t + " :: " + m); }
        });
    });
});
​