gif spinner не появляется при отправке формы с помощью ajax

Я пытаюсь добавить gif для загрузки в свою форму, когда пользователь нажимает кнопку отправки с помощью ajax, и я хочу также отключить кнопку отправки. Я пробовал это так, но он не работает. Моя кнопка имеет идентификатор «Отправить»gif spinner не появляется при отправке формы с помощью ajax

<script type="text/javascript">         
// we will add our javascript code here 
jQuery(document).ready(function($) { 

    $("#ajax-contact-form").submit(function() { 
     var str = $(this).serialize(); 

     $.ajax({ 
      type: "POST", 
      url: "contactfinal.php", 
      data: str, 
      success: function(response) { 
$('submit').html('<img src="img/ajax-loader.gif" /> &nbsp; sending...').attr('disabled', 'disabled'); 
       $('#error').html(response); 

      } 
     }); 
     return false; 
    }); 
}); 
</script>

источник

2016-06-25 Jonathan

Я думаю, что вы хотите отключить свою кнопку снаружи перед вашим вызовом ajax. Сейчас он отключит кнопку (при условии, что код верен) после ответа сервера. Пользователь может делать бесконечное количество сообщений за это время. Если id отправлен, используйте $ ('# submit'), чтобы найти этот элемент с jquery. Не знаете, почему вы меняете его html и пытаетесь отключить что-то тоже, кажется, вам нужно выбрать один из этих параметров. – Noppey

Попробуйте это так

$.ajax({ 
    type: "POST", 
    url: "contactfinal.php", 
    data: str, 
    success: function(response) { 
    // $('#error').html(response); 
    } 
    beforeSend: function() { 
    $('submit').html('<img src="img/ajax-loader.gif" /> &nbsp; sending...').attr('disabled', 'disabled'); 
    }, 
    complete: function() { 
    $('submit').html('').attr('disabled', ''); 
    }, 
});

beforeSend метод будет принимать меры в то время как Ajax ждет ответа от сервера, и complete будет также принимать меры, после определения ajax браузер полностью получит ответ сервера.

Надеюсь, у вас возникнет эта идея.

источник

2016-06-25 13:25:38 Fil

Я пробовал, и это не сработало, но, может быть, я просто не включил его в остальную часть скрипта правильно? Я не знаю, как вставить код в мой ответ. Я попытался, но он говорит, что слишком долго. – Jonathan

Вы можете попробовать jsfiddle, чтобы представить, что вы сделали, и вставьте сюда снова ссылку. – Fil

Хорошо, я этого не делал раньше, надеюсь, это правильно. https://jsfiddle.net/9x8rh9w8/#&togetherjs=PKGwrGgF9P – Jonathan

jQuery(document).ready(function($) { 
$("#ajax-contact-form").submit(function() { 

     var str = $(this).serialize(); 

     $.ajax({ 
      type: "POST", 
      url: "contactfinal.php", 
      data: str, 
      beforeSend: function() { 
       $("#submit").hide(); 
       $("#loading").show(); 
        }, 
      success: function(response) { 
       $('#error').html(response); 
       $("#submit").show(); 
       $("#loading").hide(); 

      } 
     }); 
     return false; 
    }); 
});

источник

2016-06-25 18:13:12 Jonathan

gif spinner не появляется при отправке формы с помощью ajax

ответ

Смежные вопросы