Auto save form field inputs using jquery and ajax

Question

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

Something like this fiddle should do what is required. 6 seconds instead of 60 is for testing. — Regent
– Regent, Commented Apr 14, 2015 at 7:18

Sukanya1991 · Accepted Answer · 2015-04-14 09:30:10Z

3

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.

answered Apr 14, 2015 at 9:30

Sukanya1991

7763 silver badges17 bronze badges

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

1 Comment

Mr. Blond Over a year ago

This approach will work only for scenarios where there are not so many ajax calls fired in small period of time. For example, when running automatic UI tests in parallel, this will NOT work.. Also better use debounce than setTimeout.

Moayad AL-Najdawi · Accepted Answer · 2015-04-14 07:18:33Z

0

I recommend that you use ajaxForm plugin

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

this is the fast and good way

answered Apr 14, 2015 at 7:18

Moayad AL-Najdawi

1027 bronze badges

4 Comments

Regent Over a year ago

So, instead of pointing out that setTimeout runs once, and setInterval is more suitable there, you just suggest plugin for form submitting?

jaggs Over a year ago

@Moayad AL-Najdawi , Thanks for your reply.But i am planning to do it without a plugin

Moayad AL-Najdawi Over a year ago

i assumed you will call autosave function another time inside it then you will fire the autosave every 6 Second

Moayad AL-Najdawi Over a year ago

@jegadees oh sorry i saw in your tags jquery-plugins so i put a plugin to help you

Collectives™ on Stack Overflow

Auto save form field inputs using jquery and ajax

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related