发送请求后ajaxform jQuery插件重置表格

Question

Before i begin I believe this is not a dublicate at first.

Here's my problem:

I have a chatroom php script that i use ajaxForm jQuery plugin in order to send new messages without reloading the whole page.

The fact is that posting takes about 1-2 secs with times: eg

Blocking:6ms

Sending:1ms

Waiting:1.15 sec

Recieving 1ms

$('#myform').ajaxForm(function() {
    //clear form after this
    $('#myform').clearForm();
});

The form is cleared after te recieving time,meaning it takes about 1.20sec to clear each message i send... and it seems like the chat lags for a bit.

I am trying to figure out a way to clear the form after the Sending part,without callback or something.

Answer 1

If ajaxForm is working fine, you can do:

$('#myform').ajaxForm({
    beforeSubmit:  function() {
       $('#myform').clearForm();    //Call the reset before the ajax call starts
    },
    success: function(data){
       //Your normal callback here
    }
});

(If $('#myform').clearForm() didn't work use $('#myform')[0].reset(); )

Hope this helps. Cheers

Answer 2

$('#mydiv').ajaxForm(function() {
   //...
    $("#mydiv")[0].reset();
});

Answer 3

I've never used ajaxForm , but just using the browser's reset() function on the <form> element should suffice (I'm assuming that ajaxForm returns a jQuery instance):

$('#myform').ajaxForm(function() {
    this.reset();
});

If the above throws a has no method reset() error, try this:

$('#myform').ajaxForm(function() {
    $('#myform')[0].reset();
});

Answer 4

If you have problems with ajaxForm . You could avoid ajaxForm with the following:

$(".ajaxform").submit(function(event){
   var $form = $(this);
   event.preventDefault();
   $form.get(0).reset();   //Call the js reset method before ajax starts
    $.ajax({
        url: $form.attr("action"),
        type: $form.attr("method"),
        data: $form.serialize(),
        success: function(data){
           //your code when response arrived here
        }
    });
});

Hope this helps. Cheers