0

В кнопке "отправить" поменять текст на "отправлено" и деактивировать кнопку. Это не проблема сделать через .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>

1 ответ 1

2

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

$("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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.