AJAX：提交没有页面刷新的表单只能运行一次

Question

I am using AJAX to submit a form behind the scenes, without refreshing the page. The problem I am running into is I can only submit the form once. After I submit it once, the on('submit') function no longer works and I am getting no errors. This completely defeats the purpose of using AJAX to submit the form :/

           $(document).on('submit', '#myForm', function(e) {
                $.post('mail.php', $(this).serialize(), function (data) {
                    //SUCCESS
                    $('.successORfail').html(data);
                     setTimeout(function(){
                      $(".successORfail").fadeOut("slow", function () {
                        $(".successORfail").remove();
                      });
                    }, 4500);

                }).error(function() {
                    alert("Fatal Error: mail.php not found!");
                });
                e.preventDefault();
            });

I was wondering if someone ran into a similar problem or knows how to solve this? I would like to be able to submit the form more than once, making changes to the form input values after each submit, if needed.

Many thanks in advance

Answer 1

Are you sure the AJAX request is not happening? It looks like you are removing the .successORfail element from the page, and thus the there is nothing to append the content to on subsequent calls.

Check your console and you will probably notice an ajax call happening each time.

Try changing your setTimeout to this:

var msgEl = $(".successORfail");
setTimeout(function() {
    msgEl.fadeOut("slow", function () {
        msgEl.empty().show();
    });
}, 4500);

Answer 2

Your success event handler:

$('.successORfail').html(data);
setTimeout(function () {
  $(".successORfail").fadeOut("slow", function () {
    $(".successORfail").remove();
  });
}, 4500);

is setting content in an element ( .successORfail ), then removing that element. The next time you submit the form, get a successful response, and that function is executed the element is no longer there to set the content into so you wouldn't see anything change.

Answer 3

Instead of removing the element, just .hide() it so that the next time it can be populated. You'll need to .show() it each time too.

       $(document).on('submit', '#myForm', function(e) {
            $.post('mail.php', $(this).serialize(), function (data) {
                //SUCCESS
                $('.successORfail').html(data).show(); //<-- show

                 setTimeout(function(){
                  $(".successORfail").fadeOut("slow", function () {
                    $(this).hide(); //<-- hide
                  });
                }, 4500);

            }).error(function() {
                alert("Fatal Error: mail.php not found!");
            });
            e.preventDefault();
        });

Also in the fadeOut() function, you can access the element with $(this) instead of re-selecting it based on the class name.

Answer 4

Can you add some HTML-snippet? Its hard to help without knowledge about your html-structure, because if you are replacing the form via $('.successORfail').html(data); the listener isn't re-bound to the form. You should also return FALSE because the form-data is sent via javascript.

Answer 5

Well, it seems that you append your result to $('.successORfail').html(data); and the remove it. Take out the following and it should work multiple times...

$('.successORfail').remove();

Without that element, the change can't be made.