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

#javascript #jquery

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



function AjaxFormRequest(result_id, formMain, url) {

  jQuery.ajax({
    url: url,
    type: "POST",
    dataType: "html",
    data: jQuery("#" + formMain).serialize(),
    success: function(response) {
      document.getElementById(result_id).innerHTML = response;
      $('#formmain').val('');
    },
    error: function(response) {
      document.getElementById(result_id).innerHTML = "
Возникла ошибка при отправке
формы. Попробуйте еще раз
";
    }
  });
}

  
 
  
 
  
 
  
 
  
 
  

    Рассчитать

  
  
Мы подготовим индивидуальный расчёт перевозки







$('form input[type="text"], form input[type="password"], form textarea').val('');


вот такой код помогает, но он очищает всегда..даже когда не заполнены все поля..

сейчас если поля не заполнены выводит "заполните все поля" (берётся из php отправщика).

Нужно что бы очищало только тогда когда отправлено успешно
    

Ответы

Ответ 1

Сделайте response возвращаемый с сервера в виде: 

{
  success: true, //  или false
  message: "Успешно отправлено" // или "Заполните все поля"
}


Тогда на клиенте можно сделать:

success: function(response) {
  if (response.success) {
    $('form input[type="text"], form input[type="password"], form textarea').val('');
  }
  document.getElementById(result_id).innerHTML = response.message;
},


Ответ 2

Самым верным способом будет использовать метод reset() на форме. Обратите внимание,
что этот метод является не родным для JQuery, но родным для самого JS. Соответственно,
вы можете найти нужную вам форму в DOM либо средствами JQuery, либо средствами ванильного
JS, но вызывать метод вам нужно только средствами ванильного JS. В коде это будет выглядеть
вот так:

// ванильный JS
document.getElementByClass('form4').reset();
// найдем элемент средствами JQ, но обратиться все равно придется к элементу DOM
$('.form4')[0].reset();
// аналогично предыдущему, но метод вызовем через специальную функцию JQ
$('.form4').trigger( 'reset' );


Разместить этот код вам необходимо в ajax-функции в ее свойстве success, просто добавив
там один из предложенных мной вариантов.

Вот тут я и другие пользователи обсуждали, почему использование reset() является
самым верным вариантом, и все другие будут лишь пытаться имитировать его. Если коротко,
то только в случае использования этого метода вас наиболее верно поймут и браузеры,
и пользователь.


Ответ 3

В success 

$('#formmain')[0].reset();