Аякс, заменить кнопку submit на прелоадер после клика

[silmarion]

ВСем привет, подскажите как сделать
Есть форма

<form name='proxycheck' class='proxycheck' id='proxycheck' action='checker/proxychecker.php' method='GET'>
<input style='text-align:center;font-size: 12px;width: 200px;float:left' class='form-control' value='' name='proxy' id='proxy' placeholder='Enter Proxy' type='text'>
     <input type='submit' style='font-size: 12px; float: left; margin-left: 5px; padding: 6px 30px; height: 37px;' class='btn btn-default' name='check_proxy' value='Check'>
     </form>

Есть js

  $(function(){
  $('.proxycheck').on('submit', function(e){
  e.preventDefault();
  var $that = $(this),
  fData = $that.serialize();
   
  $.ajax({
  url: $that.attr('action'),
  type: $that.attr('method'),
  data: {'action': 'get_proxy_check', form_data: fData},
  dataType: 'json',
  success: function (result){
  if (result.its_ok==1){
  $('div.proxy_result').html(result.res);
  }
  }
  });
   
  });
  });

Как сделать, чтобы при нажатии на сабмит, кнопка менялась на прелоадер. А при выводе результатов, кнопка возвращалась на место.

 

[BaBL]

сделай гифку прелоадера, к примеру, размести ее после кнопки с style="display:none;"

после e.preventDefault(); добавь

$('#submitbuttonid').hide();
$('#preloaderimg').show();

а в success функции, в конце наоборот:

$('#preloaderimg').hide();
$('#submitbuttonid').show();

это самое простое решение.

 

[silmarion]

Спасибо большое, то, что надо, просто

 

[silmarion]

Еще вопрос небольшой, если
Как мне изменить placeholder инпута?

if (result.its_ok==1){
$('div.proxy_result').html(result.res);
placeholder инпута пишем новое значение
}

И та форма, что выше идет
Можно ли одновременно запускать несколько форм?

 

[BaBL]

$(this).attr("placeholder","Type your answer here");

Форм скок угодно. Прелоадерам другие айдишники.

 

[silmarion]

Т.е. идет несколько форм

<form name='proxycheck' class='proxycheck' id='proxycheck' action='checker/proxychecker.php' method='GET'>
<input style='text-align:center;font-size: 12px;width: 200px;float:left' class='form-control' value='' name='proxy' id='proxy' placeholder='Enter Proxy' type='text'>
<input type='submit' style='font-size: 12px; float: left; margin-left: 5px; padding: 6px 30px; height: 37px;' class='btn btn-default' name='check_proxy' value='Check'>
</form>


<form name='proxycheck' class='proxycheck' id='proxycheck' action='checker/proxychecker.php' method='GET'>
<input style='text-align:center;font-size: 12px;width: 200px;float:left' class='form-control' value='' name='proxy' id='proxy' placeholder='Enter Proxy' type='text'>
<input type='submit' style='font-size: 12px; float: left; margin-left: 5px; padding: 6px 30px; height: 37px;' class='btn btn-default' name='check_proxy' value='Check'>
</form>


<form name='proxycheck' class='proxycheck' id='proxycheck' action='checker/proxychecker.php' method='GET'>
<input style='text-align:center;font-size: 12px;width: 200px;float:left' class='form-control' value='' name='proxy' id='proxy' placeholder='Enter Proxy' type='text'>
<input type='submit' style='font-size: 12px; float: left; margin-left: 5px; padding: 6px 30px; height: 37px;' class='btn btn-default' name='check_proxy' value='Check'>
</form>

Вместо ид используется class
нажимаешь на сабмит одной, сабмит других не пашет пока первая не получит ответ

 

[BaBL]

Айдишники и имена форм сделай униальными. Айдишники повторяься вообще не должны по документу.

 

[silmarion]

у меня классы идут а не айдишники
Формы генерируются в цикле
добавить к каждой сгенерированной форме уникальные ид
и также в цикле каждой форме свой скрипт генерировать?

 

[silmarion]

$(this).attr("placeholder","Type your answer here");
Чтото не работает

if (result.its_ok==1){
$('div.proxy_result').html(result.res);
$(this).attr("placeholder","Type your answer here");
}
думаю нужно еще ид инпута добавить? Чтобы именно в этой форме меняло плейсхолдер

 

[BaBL]

<form name='proxycheck' class='proxycheck' id='proxycheck'

Я вот вижу 3 одинаковых айди и нейма. Про плейсхолдер - да, конаретный инпут.