CODEWITHSUNDEEP
javascriptjqueryajaxjquery-plugins
jaggs
jaggs

Reputation: 308

Auto save form field inputs using jquery and ajax

I have a form with different input fields.So for very minute , the data entered by the user needs to be automatically stored in the database. Once the request is submitted , it will be directed to the struts file where the database interactions will be carried out .

What i have tried, I had set the timeout function to run every time the page is loaded 

var timer;
$(document).ready(function() {
timer = setTimeout("autosave()", 60000); 
});

And in the autosave function , i am trying to post the input data to the designated URL

jQuery('form').each(function() {
        jQuery.ajax({
            url: "http://localhost:7002/submitStudent.do?requestType=auto&autosave=true",
            data: jQuery(this).serialize(),
            type: 'POST',
            success: function(data){
                if(data && data == 'success') {
                    alert("data saved");
                }else{
                }
            }
        }); 
    }); 
}
 }

And once the request is sent to the struts , it will be processed based on the requesttype and the data will be submitted.

But in my case , data doesn't get saved.

Kindly share your suggestions on what i am doing wrong and any other ways to do it ?

Thanks for your valuable suggestion and time..

FYI , i am a beginner in Jquery and ajax technologies

JSFIDDLE : jsfiddle

Upvotes: 1

Views: 14512

Answers (2)

Sukanya1991
Sukanya1991

Reputation: 776

I have made a fiddle according to your requirement.

var timer;

var fun = function autosave() {
    alert();
    jQuery('form').each(function () {
        jQuery.ajax({
            url: "http://localhost:7002/submitStudent.do?autosave=true",
            data: jQuery(this).serialize(),
            type: 'POST',
            success: function (data) {
                if (data && data == 'success') {
                    alert("data saved");
                } else {}
            }
        });
    });
}
$(document).ready(function () {
    setTimeout(fun, 1000);
    //setInterval(fun,1000);
});

You need to focus on two methods setTimeout and setInterval. setTimeout will call autosave() after 1 second of DOM loading but only once. setInterval will call autosave() after every 1 second repeatedly. You can read it here.

The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds. Tip: The function is only executed once. If you need to repeat execution, use the setInterval() method.

For more details on your ajax request you need to look at the console(F12) errors.

Upvotes: 3

Moayad AL-Najdawi
Moayad AL-Najdawi

Reputation: 102

I recommend that you use ajaxForm plugin

and in the autosave function just fire $('form').submit();

this is the fast and good way

Upvotes: 0

Related Questions