Исчезает данные из console.log
Создаю ивент на кнопке, что по нажатию она будет считывать данные из инпутов и выносить их в консоль. Но на деле данные появляются в консоле и тут же пропадают. Заметил что адрес ссылки меняет (перезагружается страница с новым адресом). Как можно такое пофиксить?
let btnRegister = document.querySelector('.submit-button');
const sendDataHandler = () => {
let elemsInputEmail = document.querySelector('input[type=email]').value;
let elemsInputName = document.querySelector('input[type=text]').value;
let elemsInputPass = document.querySelector('input[type=password]').value;
let res = [elemsInputEmail, elemsInputName, elemsInputPass];
console.log(res);
};
btnRegister.addEventListener('click', sendDataHandler);
<body>
<main class="page">
<form class="login-form">
<h1 class="form-title">Create user</h1>
<div class="form-control">
<label class="form-label" for="email">Email</label>
<input
class="form-input"
type="email"
id="email"
name="email"
placeholder="[email protected]"
required
/>
</div>
<div class="form-control">
<label class="form-label" for="email">User name</label>
<input class="form-input" type="text" name="name" required />
</div>
<div class="form-control">
<label class="form-label" for="password">Password</label>
<input class="form-input" type="password" name="password" required />
</div>
<button class="submit-button" type="submit">Register</button>
</form>
</main>
<script src="index.js"></script>
</body>
Ответы (1 шт):
Автор решения: Алексей Шиманский
→ Ссылка
Проблема тут:
<button class="submit-button" type="submit">Register</button>
Вы либо поставьте кнопке тип button, либо в методе делайте e.preventDefault().
А в целом, раз вы всё равно на js все значения из полей собираете, то зачем вам вообще form и кнопка submit?