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
    9 июн 2019 в 11:44
  • Рустам Гимранов, через submit тоже обновляет, и при том не попадает ни в success ни в error 9 июн 2019 в 12:09
  • btn_add кнопка которая открывает форму с кнопкой btn_ok . Сделал все как в примере, но страница по прежнему обновляется и не заходит error 9 июн 2019 в 12:19
  • Добавьте html код формы, для того, чтобы можно было воспроизвести ошибку и дать полноценный ответ.
    – user256824
    9 июн 2019 в 12:23
  • Обновил в вопросе 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
  • Спасибо большое 9 июн 2019 в 12:59

Ваш ответ

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

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