CODEWITHSUNDEEP
phpjquery
michi
michi

Reputation: 6625

autosaving form data with jquery and php

I am quite ok with PHP, but a total noob with jQuery, and got stuck with autosaving form data.

The autosave function gets called every 30 seconds in dummy.php. I'm sending the serialized form data for processing (--> database) to savetest.php.

At this moment, I am stuck with this question:

How do I get savetest.php to 'listen' to incoming data and react to it?

At this moment, I get the alert 'Oh no!' ( = no success) every 30 seconds.

Here's my shortened sample code:

dummy.php, snippet 1 (HTML & PHP): 

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="../../_include/jquery-1.9.1.min.js"></script>
</head>
<body>
    <h1>My Form</h1>
    <form name="form1" id="form1" method="post" action="<?php echo $_SERVER['PHP_SELF'] ?>"> 
        <input type="radio" name="item_2_1" id="c_2_1_0" value="0" />
        <input type="radio" name="item_2_1" id="c_2_1_1" value="1" />
        <input type="radio" name="item_2_1" id="c_2_1_2" value="2" />
        <input type="radio" name="item_2_1" id="c_2_1_3" value="3" />
        <input type="checkbox" name="item_3_1[]" id="c_3_1_0" value="yes" />
        <input type="checkbox" name="item_3_1[]" id="c_3_1_1" value="no" />
        <input type="text" name="item_4_1" id="c_4_1_0" />
    </form>

dummy.php, snippet 2 (jQuery): 

<script type="text/javascript">
    function autosave() {
         jQuery('form').each(function() {
         jQuery.ajax({
                url: 'savetest.php',
                data: {
                'autosave' : true,
                'formData' : jQuery(this).serialize()},
                type: 'POST',
                success: function(data){
                    if(data && data == 'success') {
                        alert("OK!");
                    }else{
                        alert("Oh no!");
                    }
                }// end successful POST function
            }); // end jQuery ajax call
        }); // end setting up the autosave on every form on the page
    }// end function autosave()

    jQuery(function($) {
        setInterval(autosave, 30 * 1000);
    });
</script>

and this is savetest.php:

if (isset($_POST)) {
var_dump($_POST);
exit();
} else {
    echo 'Hi, no $_POST.';
}

unfortunately, still the unsuccessful alert... and savetest.php dumping array(0){} :-(

Upvotes: 4

Views: 9160

Answers (1)

Ohgodwhy
Ohgodwhy

Reputation: 50797

if(isset($_POST)):
    //processing to save autosave
else:
    //the rest of your form code and jQuery stuff
endif;

This will check if the data is posted, the //rest of your data should represent All other code generated by the page that does not do any processing.

Also, may I suggest cleaning up that data attribute?

data: {
    'navigation': 'save',
    'autosave' : true,
    'formData' : jQuery(this).serialize()
}

Then on the server side you can access it just like normal, $_POST['navigation'] and $_POST['formData'] contains the array of name=value combinations.

Moreover, your function should be within $(document).ready, or like the following:

jQuery(function($){
    //the rest of your code
});

jQuery(function($) will run as $(document).ready and will alias the $ symbol as jQuery while within that function.

This should cover all bases.

Upvotes: 2

Related Questions