Good afternoon, there is a universal feedback form that works with this script:

$("form").submit(function() { //Change var th = $(this); $.ajax({ type: "POST", url: "mail.php", //Change data: th.serialize() }).done(function() { location="http://mysite.com/thankyou.html"; }); return false; });`

After submitting the form, it is redirected to the thank you page. Sometimes sending a form takes up to 5 seconds, sometimes it is sent immediately. And when the form "slows down", I want to click on the "more" button. Help make preloader. That is, so that after clicking on the "send" button, a preloader with animation appears in the style of this button. Then the user will understand that something is happening and there will be no repeated clicks.

    1 answer 1

    Make it easier - use the attribute disabled , so that the user can see the gray button and not only understand that there is no need to press anywhere, but he could not press even with a very big desire.

    Actually, you can change this attribute not only for the form submission button, but also for the entire form. Then it will be enough for you to register css-rules for form elements that will change the form, and everything will be clear to all. However, most likely, and without any special rules, you are completely satisfied with the type of form elements that have this attribute set.

    You can break all the input elements on the form like this:

     f.find(':input').attr("disabled", true);

    Where f is a pointer to your form if you are using jQuery (and you are using it).

    Separately, the button, of course, like this:

     b.attr("disabled", true);

    You can, of course, make a preloader, but there are much more problems with it - you will need to make its design separately, then make it separately for mobile versions, then it turns out that somewhere it looks completely wrong and does not close the necessary elements , and just in case, you will still be able to disable them, in general, solid problems.

    If you also have a question about where to place the code mentioned above, in the current versions of the library, the $.ajax() entry is as follows (I give my version of the preloader when we simply disable all input elements):

     $.ajax({ url: u, type: 'POST', data: d, success: function () { // }, beforeSend: function () { // запускаем прелоадер f.find(':input').attr("disabled", true); }, complete: function () { // останавливаем прелоадер f.find(':input').attr("disabled", false); }, error: function () { // } });

    As it is easy to guess, one code will be executed in any case before launch, the second one in any case - at the end, regardless of the success of the ajax-request (well, unless your code in error or success does not issue an execution error faster).

    • 2
      Only disabled and not disable, as far as I remember. disabled = "disabled". - jekaby
    • @jekaby yes, the head is no longer cooking, and wrote it in the code. Thank! - Stanislav Belichenko February
    • I read that you need somewhere to add beforeSend, just in javascript is not strong, I do not understand what problems may be, initially add a hidden GIF preloader to the class of the button, and after pressing it to be displayed - Max
    • @Max, well, if there was another question, see the update of my answer. And yes, you can make such a preloader, I just can’t definitely decide for you whether it will be a gif or something else, but in general, yes, you can do it this way - use my code, and in the css register with the modifier button disabled to true showing your gif and vice versa - Stanislav Belichenko