При нажатии на кнопку страница обновляется

Question

Не понимаю в чем причина

$('[data-modal=consultation]').on('click', function () {
    $('.overlay, #consultation').fadeIn();
});

$('.modal__close').on('click', function () {
    $('.overlay, #consultation, #thanks, #order').fadeOut();
});

$('.button_mini').each(function (i) {
    $(this).on('click', function () {
        $('#order .modal__descr').text($('.catalog-item__subtitle').eq(i).text());
        $('.overlay, #order').fadeIn();
    });
});

function validateForms(form) {
    $(form).validate({
        rules: {
            name: "require",
            phone: "require",
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            name: "Пожалуйста, введите свое имя",
            phone: "Пожалуйста, введите свой номер телефона",
            email: {
                required: "Пожалуйста, введите свой e-mail",
                email: "Неправильно введен e-mail адрес"
            }
        }
    });
};

validateForms('#consultation-form');
validateForms('#consultation form');
validateForms('#order form');

$('input[name=phone]').mask("+7 (999) 999-99-99");

$('form').submit(function (e) {
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "mailer/smart.php",
        data: $(this).serialize()
    }).done(function () {
        $(this).find("inpute").val("");
        $('#consultation, #order').fadeOut();
        $('.overlay, #thanks').fadeIn();
        
        $('form').trigger('reset');
    });
    return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.mask.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>
<div class="overlay">
    <div class="modal" id="consultation">
        <div class="modal__close">&times;</div>
        <div class="modal__subtitle">Просто заполните форму заявки</div>
        <div class="modal__descr">и мы перезвоним вам в течении 10 минут</div>
        <form class="feed-form feed-form_mt" action="#">
            <input name="name" required placeholder="Ваше имя" type="text">
            <input name="phone" required placeholder="Ваш телефон">
            <input name="email" required placeholder="Ваш E-mail" type="email">
            <button class="button button_submit">заказать кОНСУЛЬТАЦИЮ</button>
        </form>
    </div>
    
    <div class="modal" id="order">
        <div class="modal__close">&times;</div>
        <div class="modal__subtitle">Ваш заказ:</div>
        <div class="modal__descr">Пульсометр Polar FT1</div>
        <form class="feed-form feed-form_mt" action="#">
            <input name="name" required placeholder="Ваше имя" type="text">
            <input name="phone" required placeholder="Ваш телефон">
            <input name="email" required placeholder="Ваш E-mail" type="email">
            <button class="button button_submit">купить</button>
        </form>
    </div>
    
    <div class="modal modal_mini" id="thanks">
        <div class="modal__close">&times;</div>
        <div class="modal__subtitle">Спасибо за вашу заявку!</div>
        <div class="modal__descr">Наш менеджер свяжется с вами
        в ближайшее время!</div>
    </div>
</div>

Answer 1

Тег < button > в < form > принимает type='submit', нужно явно указать тип кнопки:

  <button type="button" class="button button_submit">заказать кОНСУЛЬТАЦИЮ</button>
  <button type="button" class="button button_submit">купить</button>

Ну или прописать

<form class="feed-form feed-form_mt" action="#" onsubmit="return false;">

P.S. и судя по-всему изменить обработчик отправки формы

$('form').submit(function (e) {

На

$('button').click(function(){
var form = $(this).parents('form');
$.ajax({
    type: "POST",
    url: "mailer/smart.php",
    data: $(form).serialize()
}).done(function () {
    $(form).find("inpute").val("");
    $('#consultation, #order').fadeOut();
    $('.overlay, #thanks').fadeIn();

    $('form').trigger('reset');
});
return false;
});

Answer 2

Переписал, протестить нет возможности

const validateForms=(form)=>{
    $(form).validate({
        rules: {
            name: 'require',
            phone: 'require',
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            name: 'Пожалуйста, введите свое имя',
            phone: 'Пожалуйста, введите свой номер телефона',
            email: {
                required: 'Пожалуйста, введите свой e-mail',
                email: 'Неправильно введен e-mail адрес'
            }
        }
    });
};

$('[data-modal=consultation]').click((e)=>{
    e.preventDefault();
    $('.overlay, #consultation').fadeIn();
});

$('.modal__close').click((e)=>{
    e.preventDefault();
    $('.overlay, #consultation, #thanks, #order').fadeOut();
});

$('.button_mini').each((i, e)=>{
    $(e).click((ev)=>{
        ev.preventDefault();
        $('#order .modal__descr').text($(e).text());
        $('.overlay, #order').fadeIn();
    });
});

$('form').submit((e)=>{
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url: 'mailer/smart.php',
        data: $(e.currentTarget).serialize()
    }).done(()=>{
        $(e.currentTarget).find('inpute').val('');
        $('#consultation, #order').fadeOut();
        $('.overlay, #thanks').fadeIn();
        $('form').trigger('reset');
    });
    return false;
});

(()=>{
    validateForms('#consultation-form');
    validateForms('#consultation form');
    validateForms('#order form');

    $('input[name=phone]').mask('+7 (999) 999-99-99');
})();

Про ич почитай от jq, он дает i, e

БЛОГ НА HUSL

При нажатии на кнопку страница обновляется

Ответы (2 шт):