Форма удаляется сама после нажатия на кнопку

146

27 октября 2019, 20:00

Не могу понять в чем проблема. Есть сайт, внизу есть форма. Нажимаю на кнопку "отправить", все содержимое в теге form удаляется со страницы.

    $(document).ready(function () { 
      $("form").submit(function (e) { 
        sendForm(this); // !!! передавайте элемент формы в функцию sendForm 
        return false; 
      }); 
    }); 
     
    function sendForm(form) { 
      var formNm = $(form); 
      $.ajax({ 
        type: "POST", 
        url: 'mail.php', 
        data: formNm.serialize(), 
        success: function (data) { 
          formNm.html(data); 
        }, 
        error: function (jqXHR, text, error) { 
          formNm.html(error); 
        } 
      }); 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<form class="form-block-content-object"> 
                <div class="form-block-content-object-title">Оставить заявку</div> 
                <div class="form-block-content-object-input-lb">Ваше имя</div> 
                <input style="padding=left:10px" name="user_name" type="text" class="form-block-content-object-input"> 
                <div class="form-block-content-object-input-lb">Ваш телефон</div> 
                <input  style="padding=left:10px" name="user_phone" type="number" class="form-block-content-object-input"> 
                <button   type="submit" class="form-block-content-object-button">Отправить</button> 
            </form>

Answer 1

У вас при ответе или ошибки в тег form выводился ответ сервера:

success: function (data) {
   formNm.html(data);
},
error: function (jqXHR, text, error) {
   formNm.html(error);
}

$(document).ready(function () { 
    $("form").submit(function (e) { 
            sendForm(this); // !!! передавайте элемент формы в функцию sendForm 
            return false; 
          }); 
        }); 
         
function sendForm(form) { 
    let formNm = $(form) 
    $.ajax({ 
      type: "POST", 
      url: 'mail.php', 
      data: formNm.serialize(), 
      success: function (data) { 
          $(formNm).after(data); 
      }, 
      error: function (jqXHR, text, error) { 
          $(formNm).after(error); 
      } 
  }); 
}

Я вставил метод after, теперь ответ будет выводиться после тега form.

Answer 2

return false перенесите в ajax запрос.