Save form data using AJAX to PHP

Question

How can I save the form data in a file or a local db (maybe using AJAX) which send the data via form action to an external db?

The source code for my form is here: http://jsbin.com/ojUjEKa/1/edit

What changes (if any) should I make to the code?

EDIT:

Right. So I'm able to store the data into localStorage using AJAX and want to send the data stored across to a file called backend.php. Here's my html file: http://jsbin.com/iSorEYu/1/edit

and here's my backend.php file: http://jsbin.com/OGIbEDuX/1/edit

The AJAX is working absolutely fine to store the fields in localStorage but things go wrong when it tries to send the data across to backend.php. I receive the following errors:

 [24-Jan-2014 08:40:34 America/Chicago] PHP Notice:  Undefined index: data in /home4/private/public_html/marketer/backend.php on line 7
 [24-Jan-2014 08:40:34 America/Chicago] PHP Warning:  Invalid argument supplied for foreach() in /home4/private/public_html/marketer/backend.php on line 10
 [24-Jan-2014 08:40:58 America/Chicago] PHP Notice:  Undefined index: data in /home4/private/public_html/marketer/backend.php on line 7
 [24-Jan-2014 08:40:58 America/Chicago] PHP Warning:  Invalid argument supplied for foreach() in /home4/private/public_html/marketer/backend.php on line 10

What's the issue here?

Have some task that sends the form data to the server to save. Or if there is HTML5 support use localstorage. — Danny
– Danny, Commented Jan 23, 2014 at 16:12
@Danny - There is HTML5 support. How can I use localstorage for this purpose? Never used it before. — Bhanu Chawla
– Bhanu Chawla, Commented Jan 23, 2014 at 16:16
Try goodling "Local Storage Form Data" or something along those lines. Also Sisyphus looks like a nice jQuery plugin that does what you want, in 1 line. — Danny
– Danny, Commented Jan 23, 2014 at 17:05
@Danny - that's awesome! I just tried Sisyphus and also Garlic.js but I'm sort of a n00b with localStorage. How can I save the data on server with localStorage? I want to see all the entries from that form. — Bhanu Chawla
– Bhanu Chawla, Commented Jan 24, 2014 at 11:27
If you want it on the server you are going to have to use AJAX and send the data to the server occasionally, and it will be a much more complex solution. Local storage is simply using the clients machine to store the data, so they could technically save their form without an internet connection. — Danny
– Danny, Commented Jan 24, 2014 at 14:27

srquinn · Accepted Answer · 2014-01-24 13:40:42Z

1

LocalStorage would be your best bet. I would suggest using storejs as their API is straight forward, easy to use, and x-browser.

You could then trigger the form values to be stored on the "blur" event of each field.

$('input').on('blur', function (e) {
  var el = e.target;
  store.set(el.attr('name'), el.val());
});

When you are ready to submit to the server, you could use something like the following:

$('#formID').on('submit', function (e) {
  e.preventDefault();
  $.post('/my/save/route', store.getAll(), function () { ... });
});

You of course could do all of this without storejs and use vanilla JS to interact with the native LocalStorage API.

edited Jan 24, 2014 at 13:40

answered Jan 23, 2014 at 16:17

srquinn

10.5k2 gold badges50 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bhanu Chawla Over a year ago

The LocalStorage API url is broken.

srquinn Over a year ago

Oops! Accidently pasted some bad entities with the URL. Link is fixed and this link from MDN is also a good suplement developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage

Bhanu Chawla Over a year ago

I've put a bounty here: stackoverflow.com/questions/21336996/… if you can help me out mate :)

Bhanu Chawla · Accepted Answer · 2014-01-28 15:40:15Z

PHP:

<h1>Below is the data retrieved from SERVER</h1>
<?php
    date_default_timezone_set('America/Chicago'); // CDT
    echo '<h2>Server Timezone : ' . date_default_timezone_get() . '</h2>';
    $current_date = date('d/m/Y == H:i:s ');
    print "<h2>Server Time : " . $current_date . "</h2>";

    $dataObject = $_POST; //Fetching all posts

    echo "<pre>"; //making the dump look nice in html.
    var_dump($dataObject);
    echo "</pre>";

        //Writes it as json to the file, you can transform it any way you want
    $json = json_encode($dataObject);
    file_put_contents('your_data.txt', $json);
?>

JS:

<script type="text/javascript">
$(document).ready(function(){
localStorage.clear();

$("form").on("submit", function() {
    if(window.localStorage!==undefined) {
        var fields = $(this).serialize();

        localStorage.setItem("eloqua-fields", JSON.stringify( fields ));
        alert("Stored Succesfully");
        $(this).find("input[type=text]").val("");
        alert("Now Passing stored data to Server through AJAX jQuery");
        $.ajax({
           type: "POST",
           url: "backend.php",         
           data: fields,
           success: function(data) {
              $('#output').html(data);
           }
        });
    } else {
        alert("Storage Failed. Try refreshing");
    }
});
});
</script>

Collectives™ on Stack Overflow

Save form data using AJAX to PHP

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related