Saving the output of a form to a text file via jQuery/Javascript posting to a php file?

Question

I've got a simple html form that as you can see below has been pre-filled with information for example purposes.

Currently when you click submit the form will be saved to Google Docs which works perfectly.

However I also want it to log/save the form output to a text file on the server where the page will be hosted.

Example Pre-Filled Form: http://jsfiddle.net/owcnwfhp/

The format I am wanting it to be logged/saved as is shown below, each new line is a new form submission.

Example Expected Output:

3/18/2015 8:06:27   testname    test4   test2   test3   test4   test5   test6   test7   test8   test9   test10
3/18/2015 8:07:07   testname1   test4   test4   test3   test4   test5   test6   test7   test8   test9   test10
3/18/2015 8:08:01   testname2   test2   test2   test3   test4   test5   test6   test7   test8   test9   test10
3/18/2015 8:09:41   testname3   test2   test5   test3   test4   test1   test6   test7   test8   test9   test10

The separating character must be an ASCII tab character

I need to be able to make the logging/saving queue itself so that if two people used the form at once that there isn't a conflict and only one of the form submissions gets logged/saved.

I think the best location for the capturing/logging/saving of the form would be at the start of the function below that fires once the form has been submitted to Google docs.

function breakRedirect() {
    $('#container').replaceWith('<div id="complete">Completed</div>');
};

Function so far...

This is what I have so far, it's in the right format (sure the javascript/jquery might be a bit wrong but it works), I now need to find a way to be able to post it to a php script? So that It queues and writes to a file...

function breakRedirect() {

    var month = new Array();
        month[0] = "01"; month[1] = "02"; month[2] = "03"; month[3] = "04"; month[4] = "05"; month[5] = "06"; month[6] = "07"; month[7] = "08"; month[8] = "09"; month[9] = "10"; month[10] = "11"; month[11] = "12";
    var collection = new Date().getDate() + "/" + month[new Date().getMonth()] + "/" + new Date().getFullYear() + " "+ new Date().getHours() + ":" + new Date().getMinutes() + ":" + new Date().getSeconds();

    var $inputs = $("input")
    $inputs.each(function () {
        var value = this.value;
        if (value != "Submit Selections" && value != "Clear Selections") {
            collection += "\t" + value
        };
    });

    var $selects = $("select")
    $selects.each(function () {
        var value = this.value;
        collection += "\t" + value
    });

    console.log(collection);

    $('#container').replaceWith('<div id="complete">Completed</div>');
};

Updated Fiddle: http://jsfiddle.net/owcnwfhp/1/

Any ideas?

Answer 1

jQuery

$.ajax()

---

You can do a post using the jQuery.ajax function. See the example below.

$.ajax({
      method: "POST",
      url: "some.php",
      data: { name: "John", location: "Boston" }
    })
      .done(function( msg ) {
        alert( "Data Saved: " + msg );
      });

For the data attribute you can use:

data: $('form#myForm').serialize(),

Source: jQuery website - .ajax(), Stackoverflow - Submit a form using jQuery

PHP

file_get_contents() AND $_POST[]

---

Then you can get the values in your PHP file with the $_POST variable and write it to a file.

Get the values

// WARNING! You should do some valiadation before writing to the file!
<?php
   $name = $_POST["name"];
   $location = $_POST["location"];
   $new_line = $name . "your tab ascii code" . $location . "\n";
   $file = 'people.txt';

   // Open the file to get existing content
      $current = file_get_contents($file);

   // Append a new person to the file
      $current .= $new_line;

   // Write the contents back to the file
      file_put_contents($file, $current);
?>

Source: PHP Website - File put contents