0

после выполнения метода post, страница автоматически обновляется. Это не удобно когда метод я попадаю в error. Из за чего оно обновляет страницу, и как это можно исправить ??

$("#btn_add").on('click', function() {
                                    $('#new_mess').show();
                                    $('#btn_ok').submit(function(e) {
                                        e.preventDefault();
                                        var subject = $('#subject').val();
                                        var email_to = $('#input_email_to').val();
                                        var email_text = $('#input_message').val();
                                        var future_second = $('#input_future_second').val();

                                        var mess = {
                                            subject: subject,
                                            email_to: email_to,
                                            email_text: email_text,
                                            future_second: future_second,
                                            status: "NOT_SENT"
                                        };
                                        $.ajax({
                                            type: 'POST',
                                            url: '/messages/',
                                            data: mess,
                                            success: function() {
                                            alert("success");
                                            },
                                            error: function(e) {
                                            var json = "<h4>Ajax Response</h4><pre>"
                                                                                            + e.responseText + "</pre>";
                                                                                        $('#feedback').html(json);
                                            }
                                        })
                                    })
                                })

Form :

            <form action= "" id="contact-form" name="f_message">
                <p>
                <div id="feedback"></div>

                    <b>New message :</b>
                    subject
                    <input id="subject" type= "text">
                    email to
                    <input id="input_email_to" type= "text">
                    message
                    <input id="input_message" type= "text">
                    second
                    <input id="input_future_second" type= "number">

                    <input type= "submit" id="btn_ok" value= "ok">
                </p>
            </form>
5
  • ru.stackoverflow.com/a/352226/256824
    – user256824
    Commented 9 июн. 2019 в 11:44
  • Рустам Гимранов, через submit тоже обновляет, и при том не попадает ни в success ни в error Commented 9 июн. 2019 в 12:09
  • btn_add кнопка которая открывает форму с кнопкой btn_ok . Сделал все как в примере, но страница по прежнему обновляется и не заходит error Commented 9 июн. 2019 в 12:19
  • Добавьте html код формы, для того, чтобы можно было воспроизвести ошибку и дать полноценный ответ.
    – user256824
    Commented 9 июн. 2019 в 12:23
  • Обновил в вопросе Commented 9 июн. 2019 в 12:26

1 ответ 1

2

Зачем вы обработку формы на какой-то клик вешаете? Вам нужно было обработать сам submit

$(document).on('submit','form#contact-form', function(e) {
    e.preventDefault();
    var subject = $('#subject').val();
    var email_to = $('#input_email_to').val();
    var email_text = $('#input_message').val();
    var future_second = $('#input_future_second').val();

    var mess = {
        subject: subject,
        email_to: email_to,
        email_text: email_text,
        future_second: future_second,
        status: "NOT_SENT"
    };
    $.ajax({
        type: 'POST',
        url: '/messages/',
        data: mess,
        success: function() {
            alert("success");
        },
        error: function(e) {
            var error = "<h4>Ajax Response error</h4>";
            $('#feedback').html(error);
        }
    })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" id="contact-form" name="f_message">
  <div id="feedback"></div>

  <b>New message :</b>
  subject
  <input id="subject" type="text">
  email to
  <input id="input_email_to" type="text">
  message
  <input id="input_message" type="text">
  second
  <input id="input_future_second" type="number">

  <input type="submit" id="btn_ok" value="ok">
</form>

1
  • Спасибо большое Commented 9 июн. 2019 в 12:59

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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