Как сделать чтоб при отправке номера телефона страница не перезагружалась?

Question

[kochurinn]

Я в программировании почти ничего не понимаю, поэтому извините меня за это, прошу прям тыкнуть носом меня и показать что и где тут дописать или изменить. Буду очень благодарен.
На данный момент при вводе номера телефона и нажатии на кнопку, номер телефона приходит на почту, всё гуд, но страница сайта перезагружается.

$(document).ready(function() {
  $('#btn_submit').click(function() {
    // собираем данные с формы
    var feedback_number__phone = $('#feedback_number__phone').val();
    // отправляем данные
    $.ajax({
      url: "formx.php", // куда отправляем
      type: "post", // метод передачи
      dataType: "json", // тип передачи данных
      data: { // что отправляем
        "feedback_number__phone": feedback_number__phone,
      },
      // после получения ответа сервера
      success: function(data) {
        $('.messages').html(data.result); // выводим ответ сервера
      }
    });
  });
});

<div class="feedback-number__input">
   <input id="feedback_number__phone" name="phonenumber" type="tel" class="form-control-number" required="" placeholder="Телефон">	
</div> 
                                                
<button name="mysubmitbutton" id="btn_submit" type="submit" class="feedback-number__button">  
    <img style="position: absolute; right: 25px; top: 12px;" width="20" style="padding-bottom: 2px;" src="img/arrow-right_icon.png" alt="">
</button>

<?php
    $msg_box = ""; // в этой переменной будем хранить сообщения формы
    $errors = array(); // контейнер для ошибок
    // проверяем корректность полей
    if($_POST['feedback_number__phone'] == "")    $errors[] = "Поле 'Ваше имя' не заполнено!";
 
    // если форма без ошибок
    if(empty($errors)){     
        // собираем данные из формы
        $message  = "Номер телефона: " . $_POST['feedback_number__phone'] . "<br/>";
        send_mail($message); // отправим письмо
        // выведем сообщение об успехе
        $msg_box = "<span style='color: green;'>Сообщение успешно отправлено!</span>";
    }else{
        // если были ошибки, то выводим их
        $msg_box = "";
        foreach($errors as $one_error){
            $msg_box .= "<span style='color: red;'>$one_error</span><br/>";
        }
    }
 
    // делаем ответ на клиентскую часть в формате JSON
    echo json_encode(array(
        'result' => $msg_box
    ));
     
     
    // функция отправки письма
    function send_mail($message){
        // почта, на которую придет письмо
        $mail_to = "[e-mail]"; 
        // тема письма
        $subject = "Срочно перезвонить! Заявка с сайта";
         
        // заголовок письма
        $headers= "MIME-Version: 1.0\r\n";
        $headers .= "Content-type: text/html; charset=utf-8\r\n"; // кодировка письма
        $headers .= "From: Оставили номер телефона <[e-mail]>\r\n"; // от кого письмо
         
        // отправляем письмо 
        mail($mail_to, $subject, $message, $headers);
    }
     
?>

Comments

[Павел]

нужен ajax , можешь нагуглить рабочий пример в интернете, их валом

"ajax отправка формы"

[kochurinn]

Павел, дак это вроде как тоже ajax

[Павел]

kochurinn, ой глянул не в ту секцию сори)

Answer 1

[ThunderCat]

$('#btn_submit').click(function(e) {
   e.preventDefault();
    // собираем данные с формы

Comments

[kochurinn]

Да, спасибо!