Поменять текст кнопки ajax

149

28 ноября 2018, 02:40

В кнопке "отправить" поменять текст на "отправлено" и деактивировать кнопку. Это не проблема сделать через .html, но у меня несколько таких форм. Как сделать это именно для данной кнопки

Пример формы (таких 5 штук на сайте)

$("form#data").submit(function(e) { 
  e.preventDefault(); 
  var formData = new FormData(this); 
  $.ajax({ 
    url: 'sender.php', 
    type: 'POST', 
    data: formData, 
    success: function success(data) { 
 
    }, 
    error: function error(data) { 
      console.log('error sending'); 
    }, 
    cache: false, 
    contentType: false, 
    processData: false 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<form class="job-form vacancies-form" id="data" enctype="multipart/form-data" action=""> 
  <div class="title"> 
    <p>Запишитесь на собеседование</p> 
  </div> 
  <div class="form-content"> 
    <div class="input-wrap"><span class="input-title">Имя</span> 
      <input class="form-input" type="text" placeholder="" name="name"> 
    </div> 
    <div class="input-wrap"><span class="input-title">Номер телефона</span> 
      <input class="form-input phone" type="text" placeholder="" name="phone"> 
    </div> 
    <label class="file-label"> 
                                <input class="file-upload" type="file" placeholder="Прикрепить резюме" name="file[]" value="1" size="40" multiple="">Прикрепить резюме 
                            </label> 
    <div class="note"> 
      <p class="text">Отправляя это сообщение, вы соглашаетесь с </p><a class="link" href="https://klinikajemchujnaya.ru/politika-obrabotki-personalnykh-dannykh" target="_blank">политикой конфиденциальности</a> 
    </div> 
    <button class="btn-md btn btn--accent" type="submit"><span class="btn__text">Отправить</span></button> 
  </div> 
</form>

Answer 1

Если отправка успешна то кнопка блокируется навсегда, если отправка не удалась, текст меняется на "Отправить", и кнопка разблокируется.

$("form#data").submit(function(e) { 
  e.preventDefault(); 
  var formData = new FormData(this); 
  var btn = $(this).find('.btn--accent'); 
  btn.attr('disabled', 'disabled').text('Отправлено'); 
  $.ajax({ 
    url: 'sender.php', 
    type: 'POST', 
    data: formData, 
    success: function success(data) { 
 
    }, 
    error: function error(data) { 
      console.log('error sending'); 
      btn.removeAttr('disabled').text('Отправить'); 
    }, 
    cache: false, 
    contentType: false, 
    processData: false 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<form class="job-form vacancies-form" id="data" enctype="multipart/form-data" action=""> 
  <div class="title"> 
    <p>Запишитесь на собеседование</p> 
  </div> 
  <div class="form-content"> 
    <div class="input-wrap"><span class="input-title">Имя</span> 
      <input class="form-input" type="text" placeholder="" name="name"> 
    </div> 
    <div class="input-wrap"><span class="input-title">Номер телефона</span> 
      <input class="form-input phone" type="text" placeholder="" name="phone"> 
    </div> 
    <label class="file-label"> 
                                <input class="file-upload" type="file" placeholder="Прикрепить резюме" name="file[]" value="1" size="40" multiple="">Прикрепить резюме 
                            </label> 
    <div class="note"> 
      <p class="text">Отправляя это сообщение, вы соглашаетесь с </p><a class="link" href="https://klinikajemchujnaya.ru/politika-obrabotki-personalnykh-dannykh" target="_blank">политикой конфиденциальности</a> 
    </div> 
    <button class="btn-md btn btn--accent" type="submit"><span class="btn__text">Отправить</span></button> 
  </div> 
</form>