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

Тема в разделе "JavaScript", создана пользователем silmarion, 17 июн 2015.

Модераторы: ZiX
  1. silmarion

    silmarion

    Регистр.:
    21 июн 2012
    Сообщения:
    194
    Симпатии:
    19
    ВСем привет, подскажите как сделать
    Есть форма
    Код:
    <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);
      }
      }
      });
       
      });
      }); 
    
    Как сделать, чтобы при нажатии на сабмит, кнопка менялась на прелоадер. А при выводе результатов, кнопка возвращалась на место.
     
  2. BaBL

    BaBL Постоялец

    Регистр.:
    13 ноя 2012
    Сообщения:
    147
    Симпатии:
    88
    сделай гифку прелоадера, к примеру, размести ее после кнопки с style="display:none;"

    после e.preventDefault(); добавь
    Код:
    $('#submitbuttonid').hide();
    $('#preloaderimg').show();
    
    а в success функции, в конце наоборот:
    Код:
    $('#preloaderimg').hide();
    $('#submitbuttonid').show();
    
    это самое простое решение.
     
    silmarion нравится это.
  3. silmarion

    silmarion

    Регистр.:
    21 июн 2012
    Сообщения:
    194
    Симпатии:
    19
    Спасибо большое, то, что надо, просто
     
  4. silmarion

    silmarion

    Регистр.:
    21 июн 2012
    Сообщения:
    194
    Симпатии:
    19
    Еще вопрос небольшой, если
    Как мне изменить placeholder инпута?

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

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

    BaBL Постоялец

    Регистр.:
    13 ноя 2012
    Сообщения:
    147
    Симпатии:
    88
    $(this).attr("placeholder","Type your answer here");

    Форм скок угодно. Прелоадерам другие айдишники.
     
    silmarion нравится это.
  6. silmarion

    silmarion

    Регистр.:
    21 июн 2012
    Сообщения:
    194
    Симпатии:
    19
    Т.е. идет несколько форм

    <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
    нажимаешь на сабмит одной, сабмит других не пашет пока первая не получит ответ
     
  7. BaBL

    BaBL Постоялец

    Регистр.:
    13 ноя 2012
    Сообщения:
    147
    Симпатии:
    88
    Айдишники и имена форм сделай униальными. Айдишники повторяься вообще не должны по документу.
     
    silmarion нравится это.
  8. silmarion

    silmarion

    Регистр.:
    21 июн 2012
    Сообщения:
    194
    Симпатии:
    19
    у меня классы идут а не айдишники
    Формы генерируются в цикле
    добавить к каждой сгенерированной форме уникальные ид
    и также в цикле каждой форме свой скрипт генерировать?
     
  9. silmarion

    silmarion

    Регистр.:
    21 июн 2012
    Сообщения:
    194
    Симпатии:
    19
    $(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");
    }
    думаю нужно еще ид инпута добавить? Чтобы именно в этой форме меняло плейсхолдер
     
  10. BaBL

    BaBL Постоялец

    Регистр.:
    13 ноя 2012
    Сообщения:
    147
    Симпатии:
    88
    <form name='proxycheck' class='proxycheck' id='proxycheck'

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