Как сделать очистку формы после успешной отправки ajax?

Question

Есть форма с отправкой данных с помощью ajax. Как сделать ресет формы после нажатия на кнопку "отправить"? (При успешной отправке success)

Появляется окошко что форма отправлена успешно, при повторном открытии форма не очищается, на кнопке висит загрузка отправки до перезагрузки страницы.

Перепробовал все возможные варианты:

document.getElementById().reset();
$('').get(0).reset();

и т.д. в разные места кода

Вот код изначальный вариант без ресета:

function sendForm(fromSend, btn){
  var btn_old = btn.html();
  $.ajax({
    url:'thankyou.php',
    type:'post',
    data:fromSend,
    beforeSend:function (){
      btn.html('<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>');
    },
    success:function (data){
      if ($('.form-panel.formsAnim').length > 0) {
        $('.form-panel').removeClass('formsAnim');
        setTimeout(function (){
          $('.form').removeClass('showForm');
          $('.form-panel').addClass('formsAnim');
          $('.thanks').addClass('showForm');
        },300);
      }else{
        $('.forms__bg').fadeIn(300).css('display', 'flex');
        $('.thanks').addClass('showForm');
        $('.form-panel').addClass('formsAnim');
      }
      if (fromSend['title'] == 'Заказ звонка'){
        ym(70264090,'reachGoal','call');
        gtag('event', 'call', {
          'event_category': 'lead',
        });
      }else if (fromSend['title'] == 'Заявка на получение прайс-листа'){
        ym(70264090,'reachGoal','price');
        gtag('event', 'price', {
          'event_category': 'lead',
        });
        window.open('/upload/price.pdf');
      }else if (fromSend['title'] == 'Заявка на покупку товара'){
        ym(70264090,'reachGoal','order');
        gtag('event', 'order', {
          'event_category': 'lead',
        });
      }else if (fromSend['title'] == 'Заявка на получение промокода'){
        ym(70264090,'reachGoal','discount');
        gtag('event', 'discount', {
          'event_category': 'lead',
        });
      }else if (fromSend['title'] == 'Заявка с блока Остались вопросы?'){
        ym(70264090,'reachGoal','question');
        gtag('event', 'question', {
          'event_category': 'lead',
        });
      }else if (fromSend['title'] == 'Заказ на получение консультации'){
        ym(70264090,'reachGoal','consult');
        gtag('event', 'consult', {
          'event_category': 'lead',
        });
      }else if (fromSend['title'] == 'Заказ звонка'){
        ym(70264090,'reachGoal','form-phone');
        gtag('event', 'form-phone', {
          'event_category': 'lead',
        });
      }
      btn.html(btn_old);
    },
    error: function (request, status, error){
      console.log(request.responseText);
    }
  });
}

<div class="forms">
    <div class="forms__bg">
        <div class="form-panel">
            <div class="forms__close"></div>
            <form class="form form-phone" >
                <div class="form__title">Оставьте свои контактные данные</div>
                <div class="form__group">
                    <div class="form__inp-label">Ваше имя</div>
                    <input class="form__input" name="name" type="text" required>
                    <div class="form__inp-label">Номер телефона</div>
                    <input class="form__input" name="phone" placeholder="+7 (___) ___-__-__" type="text" required>
                </div>
                <div class="btn" data-form="thanks" data-check="true" type="submit">Отправить</div>
                <div class="form__rules">Нажимая на кнопку, вы даете согласие <br>на <a target="_blank"
                    href="privacy.html">обработку
                персональных данных</a></div>

            </form>
            <div class="form thanks">
                <div class="thanks__img"></div>
                <div class="thanks__title">Спасибо за заявку!</div>
                <div class="thanks__desc smDesc">Наш менеджер перезвонит Вам в самое ближайшее время</div>
                <div class="btn" data-form="close">Вернуться на сайт</div>
            </div>
        </div>
    </div>
</div>

Подскажите, как реализовать сброс формы после успешной отправки данных.

БЛОГ НА HUSL

Как сделать очистку формы после успешной отправки ajax?

Ответы (0 шт):