Не работает обработчик события .submit() у формы
пишу сюда в надежде получить помощь. В HTML есть форма регистрации. После заполнения формы и нажатия на кнопку, она должна передаваться в функцию jQuery и там обрабатываться по средством ajax запроса к серверу. Но вместо этого страница просто перезагружается и данные формы переходят в url.
Форма регистрации сделана в виде модального окна.
EDIT: обработчиков больше нет. Кэш браузера чистил, а также пытался запустить в другом браузере. Проблема та же, страница перезагружается
Machine translation of the problem into English:
Hello, I am writing here in the hope of getting help. There is a registration form in HTML. After filling out the form and clicking on the button, it should be passed to the jQuery function and processed there using an Ajax request to the server. But instead the page simply reloads and the form data goes to the url.
The registration form is made in the form of a modal window.
EDIT: There are no more handlers. I cleared the browser cache and also tried to launch it in another browser. Same problem, page reloads
HTML:
<form id="form-register">
<div class="modal-body">
<div class="input-group mb-2">
<span class="input-group-text" id="f-name"><i class="fa-solid fa-pen-to-square"></i></span>
<input type="text" class="form-control" id="first-name" name="f-name" placeholder="Имя"
aria-describedby="f-name" required>
</div>
<div class="input-group mb-2">
<span class="input-group-text" id="s-name"><i class="fa-solid fa-pen-to-square"></i></span>
<input type="text" class="form-control" id="second-name" name="s-name" placeholder="Фамилия"
aria-describedby="s-name" required>
</div>
<div class="input-group mb-2">
<span class="input-group-text" id="E-mail-reg"><i class="fa-solid fa-envelope"></i></span>
<input type="email" class="form-control" id="email-reg" name="email-register" placeholder="E-mail" aria-describedby="E-mail-reg" required>
</div>
<div class="input-group mb-2">
<span class="input-group-text" id="pass-reg"><i class="fa-solid fa-key"></i></span>
<input type="password" class="form-control" id="password-reg" name="password-register"
placeholder="Пароль" aria-describedby="pass-reg" required>
</div>
<div class="input-group mb-2">
<span class="input-group-text" id="pass-r"><i class="fa-solid fa-lock-open"></i></span>
<input type="password" class="form-control" id="password-repiat" name="password-repeat"
placeholder="Повторите пароль" aria-describedby="pass-r" required>
</div>
<div class="alert alert-success" id="alert-success" role="alert">
Вы успешно зарегистрированы!
</div>
<div class="alert alert-danger" id="alert-danger" role="alert">
Такой email уже существует!
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-outline-warning" value="Зарегистрироваться">
</div>
</form>
jQuery:
$("#form-register").on("submit", function (event) {
event.preventDefault();
// $.ajax({
// url: '../server/register.php',
// method: 'post',
// dataType: 'html',
// data: $(this).serialize(),
// success: function (data) {
// if (data == 'error') {
// $('#alert-danger').css({ 'display': 'block' });
// } else if (data == 'success') {
// $('#alert-success').css({ 'display': 'block' });
// setTimeout(function () {
// window.location.href = '../pages/profile.html';
// }, 5 * 1000);
// } else {
// console.log('error');
// }
// }
// });
console.log('message');
});
Что загружается в url\What is loaded in the url:
Как выглядит модальное окно с формой\What a modal window with a form looks like:
Думал, что что-то не так с ajax, поэтому решил для проверки просто вывести текст в консоль, но даже в этом случае станица просто перезагружается. Код функции jQuery скопировал с официальной документации библиотеки. Данный проект разрабатывается для учебной практики. Я сейчас нахожусь на 3 курсе колледжа, поэтому не очень хорошо разбираюсь в jQuery.
Machine translation of the problem into English:
I thought that something was wrong with ajax, so I decided to simply print the text to the console to check, but even in this case, the page simply reloaded. The jQuery function code was copied from the official documentation of the library. This project is being developed for educational practice. I'm currently in my 3rd year of college, so I'm not very familiar with jQuery.
Ответы (1 шт):
Спасибо всем кто пытался помочь, в итоге я просто сделал CTRL+X CTRL+V и оно чудесным образом заработало!