0

Здравствуйте, на хабре

нашел статью как сделать отправку данных с формы на почту, у меня все работает, но после отправки происходит обновление страницы, подскажите, пожалуйста, как это убрать?(

Вот код Html

<div class="modal-order-form">
  <button class="modal-content-close" type="button" title="Закрыть"><span class="visibility-hidden">Закрыть</span></button>
  <div class="frame-form">
    <form id="modal-order-form" class="modal-form" method="post">
      <p>
        <label class="visibility-hidden" for="name-field-two">Ваше имя</label>
        <input type="text" name="name" id="name-field-two" placeholder="Имя" required>
      </p>
      <p>
        <label class="visibility-hidden">Ваш телефон</label>
        <input type="tel" name="number" id="number-field-two" placeholder="+7-xxx-xxx-xx-xx" required pattern="\+7\-[0-9]{3}\-[0-9]{3}\-[0-9]{2}\-[0-9]{2}">
      </p>
      <p>
        <label class="visibility-hidden">Ваш email</label>
        <input type="email" name="email" id="email-field-two" placeholder="Email">
      </p>
      <p class="modal-checkbox">
        <input type="checkbox" name="agreement" id="agreement-field" required checked>
        <label for="agreement-field"></label>
        даю согласие на обработку персональных данных
      </p>
      <p>
        <button  class="order-button modal-btn" type="submit">Отправить</button>
      </p>
    </form>
  </div>
</div>

Вот js

<script type="text/javascript">
    $(document).ready(function() {
      $("#order-form").submit(function() {
        var form_data = $(this).serialize();
        $.ajax({
          type: "POST",
          url: "send.php",
          data: form_data,
          success: function() {
            modalForm.classList.remove('modal-content-show');
            modalThx.classList.add('modal-content-show');
          }
        })
      })
    })
    </script>

И вот php

<?
if((isset($_POST['name'])&&$_POST['name']!="")&&(isset($_POST['number'])&&$_POST['number']!="")){ //Проверка отправилось ли наше поля name и не пустые ли они
        $to = 'example@mail.ru'; //Почта получателя, через запятую можно указать сколько угодно адресов
        $subject = 'Заказ с сайта'; //Загаловок сообщения
        $message = '
                <html>
                    <head>
                        <title>'.$subject.'</title>
                    </head>
                    <body>
                        <p>Имя: '.$_POST['name'].'</p>
                        <p>Телефон: '.$_POST['number'].'</p>
                        <p>Email: '.$_POST['email'].'</p>
                    </body>
                </html>'; //Текст нащего сообщения можно использовать HTML теги
        $headers  = "Content-type: text/html; charset=utf-8 \r\n"; //Кодировка письма
        // $headers .= "From: Отправитель <@example.com>\r\n"; //Наименование и почта отправителя
        mail($to, $subject, $message, $headers); //Отправка письма с помощью функции mail
}
?>
1
  • 1
    $("#order-form").submit(function(e) { e.preventDefault(); ...
    – user242433
    20 июл 2017 в 19:27

1 ответ 1

2
$("#order-form").submit(function() {

   //mnogo koda

   return false;
}

Или, например так:

<form id="modal-order-form" class="modal-form">

    //inputs,inputs,inputs

    <input type="button" value="Отправить" />
</form>

$(".order-button").click(function(){
    var form_data = $("#modal-order-form").serialize();
    $.ajax({ ...
       ...
})

Ещё так:

<form id="modal-order-form" class="modal-form" onsubmit="func_submin(this);return false;">
    ...
<button  class="order-button modal-btn" type="submit">Отправить</button>
</form>

function func_submin(frm){
    var form_data = frm.serialize()
    $.ajax({ ...
       ...;
}

Ваш ответ

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

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