Updating form when ever they changes

Question

I would like to implement a form that sends data as soon as users changes it.

Example:

A moderator is editing an articles, it changes the values of a select. When he does it ajax sends the request to a dynamic page to change that field. Maybe after the changes if everything was ok the page should display a little box with "updating complete..."

Would be that possible? Which is the best way to do it?

(I can use jQuery)

score 1 · Answer 1 · answered Mar 17 '11 at 12:47

1

You'd probably want to use jQuery anyway, as it sounds like it'd be easiest for this.

Depending what events you wanted to call the ajax depends on the selector you use. I'd probably start by creating a function that call the ajax and then use a selector to loop through each element you want to change (via a tag name or class etc) then onblur or change, whichever suites, call your ajax passing the form parameters.

function callAjax(form)
{

    $.ajax({
       type: "POST",
       url:  "/yourscript.php",
       data: $(form).serialize(), // Send all the data from the form
       success: function(msg)
       {
           // Show a success message, or whatever
       }
    });

}
$("form input").blur(function()
{

   callAjax($("form"));

});

Something like that

Edit: As noted above, it might be an idea to not call a request on ever blur event because that could put a lot of load on the server. You'd be best off attaching the event to the form submit so the above would be:

$("form").submit(function()
{

   callAjax($("form"));

   return false;

});

answered Mar 17 '11 at 12:47

Alex

7,320
1
18
31

1

Would you really make an AJAX request on a form submit? After all, the form is submitted at that point anyway. – pyvi Mar 17 '11 at 12:56
If you wanted to do the form submission without the page reloading (part of the point of ajax), then yes, on the submit makes sense. – Alex Mar 17 '11 at 12:58
Ah, okay, I misunderstood what you meant. – pyvi Mar 17 '11 at 12:59
about your first solution: I don't think it's a good idea updating all form's field if the user has changed only 1. For your second option that would be good but i wanted the data uploaded before a sumbit :) +1 – dynamic Mar 17 '11 at 13:35
I guess one other method you could do is listen for the first change event on one of the inputs and set a timeout to save all the data, or an interval to save the data every now and again? It depends what your eventual outcome is meant to be – Alex Mar 17 '11 at 16:07

score 0 · Accepted Answer · answered Mar 17 '11 at 12:44

0

You're spot on with the jQuery AJAX stuff there. The only thing I'd be careful of is how many AJAX requests you make. For example, if you have a textarea, you don't want to update every keypress; the AJAX load on your server will be huge. In this case, update every 10 seconds or so.

For things like select boxes, just use $("#selectbox").change() and put an AJAX call inside that.

answered Mar 17 '11 at 12:44

Bojangles

99,427
50
170
208

With tjhat approach, the OP should be aware of cross-browsers issues when using the change event on a select: http://stackoverflow.com/questions/208471/getting-jquery-to-recognise-change-in-ie . Hence using 'click' would be a better idea for select boxes. – pyvi Mar 17 '11 at 12:54

score 0 · Answer 3 · answered Mar 17 '11 at 12:47

sure its possible you could an an on blur event to all the inputs that triggers an ajax call for that specific box or the whole form if you want. My concerns would be if you really want to submit that often and then I worry about validation as well. You could also have it submit the whole form rather than just the one box too if you like. But honestly I don't like this idea at all just my opinion

Updating form when ever they changes

3 Answers3