1

Вот скрипт, при отправке формы перезагружается страница. Почему?

        <script>
    (function ($) {
    $(document).ready(function(){
        $('#btn_submit').click(function(){
            var name     = $('#name').val();
            var tel      = $('#tel').val();
            $.ajax({
                url: "send.php",
                type: "post",
                dataType: "json",
                data: {
                    "name":     name,
                    "tel":  tel
                },
                success: function(data){
                    $('.messages').html(data.result);
                }
            });
        });
    });
    }(jQuery));
</script>

2 ответа 2

2

Нужно отменить стандартное поведение браузера по нажатию кнопки с type="submit":

$('#btn_submit').click(function(e) {
  console.log("test click");
  e.preventDefault();
  var name     = $('#name').val();
  var tel      = $('#tel').val();
  $.ajax({
    url: "send.php",
    type: "post",
    dataType: "json",
    data: {
      "name":     name,
      "tel":  tel
    },
    success: function(data){
      console.log("test success");
      console.log("data = ", data);
      $('.messages').html(data.result);
    },
    error: function(xhr, status, error) {
      console.log("test error");
      console.log(xhr, status, error);
    }
  });
});

console.log(jQuery.fn.jquery);
$("#btn").click(function(e){
  e.preventDefault();
  console.log("test");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<form>
<input/>
<button type="submit" id="btn">Click</button>
</form>

11
  • 1
    Кроме того .click() - неточное событие. Оно подразумевает только клик мышью, но если выделить кнопку табом и нажать enter, то ваша функция не сработает. Используйте .submit(). 10 дек 2018 в 14:22
  • @BeastWinterwolf попробуйте
    – user176262
    10 дек 2018 в 14:25
  • Хм, видмо что-то поменялось в браузерах или jquery с тех пор как я последний раз увлекался js. Точно помню что раньше click срабатывал только по клику. 10 дек 2018 в 14:30
  • Игорь, спасибо за Ваш ответ, но не работает... Заметил что у меня файл jquery-1.12.4.min.js есть... Если я ставлю вместо него Вашу ссылку (ну получается версию по новее), то у меня не работают некоторые элементы сайта. Как мне сделать форму под данную версию jquery?
    –  nickdex
    10 дек 2018 в 14:37
  • @nickdex event.preventDefault() доступен в jquery начиная с версии 1.0 10 дек 2018 в 14:44
0

(function ($) {
    $(document).ready(function(){
        $('#___form_id___').submit(function(e){
            e.preventDefault();
            var name = $('#name').val();
            var tel = $('#tel').val();
            $.ajax({
                url: "send.php",
                type: "post",
                dataType: "json",
                data: {
                    "name": name,
                    "tel": tel
                },
                success: function(data){
                    $('.messages').html(data.result);
                }
            });
        });
    });
}(jQuery));

3
  • Не работает, все равно перезагружает страницу
    –  nickdex
    10 дек 2018 в 17:17
  • $('#___form_id___') - в этом месте прописан id кнопки или формы? Нужно прописать id формы.
    – Ruslan
    10 дек 2018 в 17:19
  • Да, конечно, сразу изменил и ниче не изменилось
    –  nickdex
    10 дек 2018 в 18:06

Ваш ответ

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

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