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

Question

[Dmitriy]

<form class="form">
                    <input type="hidden" name="project_name" value="ESPD Company">
                    <input type="hidden" name="admin_email" value="[e-mail]">
                    <input type="hidden" name="form_subject" value="ESPD-новый проект">

                    <input name="Имя" type="text" class="modal-block__input input" placeholder="Имя" id="name">
                    <input name="Телефон" type="text" class="modal-block__input input inputX" placeholder="Телефон*"
                        id="phone" onkeyup="check()">
                    <input name="E-mail" type="text" class="modal-block__input input" placeholder="E-mail*" id="email"
                        onkeyup="check()">
                    <textarea name="Сообщение" class="modal-block__textarea input" placeholder="Доп.информация" id="message"></textarea>
                    <div class="modal-block__footer">
                        <button class="modal-block__btn btn btn--orange" id="button" disabled  onClick="formCheck()">Получить проект</button>
                        <p class="modal-block__footer-link">
                            Нажимая на кнопку, вы даете согласие на обработку своих персональных данных и соглашаетесь с
                            <a href="#">Пользовательским соглашением</a>
                        </p>
                    </div>
                </form>

let email = document.querySelector('#email');
let phone = document.querySelector('#phone');

var validEmail;
var validPhone;

function ValidMail() {
    var re = /^[\w-\.]+@[\w-]+\.[a-z]{2,4}$/i;
    var myMail = document.getElementById('email').value;
    var valid = re.test(myMail);
    if (valid) {
        validEmail = true
        $('#email').removeClass('wrong')
    }
    else {
        validEmail = false
        $('#email').addClass('wrong')
    };
    return validEmail;
}

function ValidPhone() {
    var re = /^\d[\d\(\)\ -]{4,14}\d$/;
    var myPhone = document.getElementById('phone').value;
    var valid = re.test(myPhone);
    if (valid) {
        validPhone = true
        $('#phone').removeClass('wrong')
    }
    else {
        validPhone = false
        $('#phone').addClass('wrong')
    };
    return validPhone;
}

function check() {
    if ($('#email').val() != '' && $('#phone').val() != '') {
        $('#button').removeAttr('disabled');
    }
    else {
        $('#button').attr('disabled', 'disable');
    }
}

$('.modal-block__btn').click(function () {
    if (ValidPhone() && ValidMail()) {
        $(".form").submit(function () { //Change
            var th = $(this);
            $.ajax({
                type: "POST",
                url: "mail.php", //Change
                data: th.serialize()
            }).done(function () {
                $('.modal-block').removeClass('active');
                $('.modal-block--finished').removeClass('disabled');
                $('.modal-block--finished').addClass('active');
                setTimeout(function () {
                    // Done Functions
                    th.trigger("reset");
                }, 1000);
            });
            return false;
        });
    }
    else {
        ValidMail()
        ValidPhone()
    }
})

Comments

[ParaBellum577]

event.preventDefault();

[Dmitriy]

ParaBellum577, но тогда, он не отправляет на почту

[Dmitriy]

он как будто игнорирует условие, и всё равно его делает

[Dmitriy]

Я даже специально, поставил if(false) но он всё равно его выполняет

Answer 1

[Чипекве]

Кнопка по умолчанию имеет type="submit".

При нажатии на такую кнопку внутри формы срабатывает submit формы и страница перезагружается.

Для решения нужно установить type кнопки как type ="button".