Я работаю с html-формами и добавляю функциональность кнопкам с помощью JS. Я создал для захвата имени пользователя, как только оно будет введено в текстовое поле. Проблема в том, что когда я пытаюсь отобразить ввод пользователя на консоли, он появляется на очень короткое мгновение, а затем исчезает. `
Ниже приведен мой HTML-код:
<form action = "">
<div>
<label for = "myName">Name</label>
</div>
<div>
<input type = "text" name = "myName" id = "myName" class = "name">
</div>
<button class = "thisOne">Collect Info</button>
</form>`
Следующий мой JS
` let input_name = document.querySelector('.name');
let btn = document.querySelector('button');
btn.addEventListener('click', ()=>{
console.info(input_name.value);
});`
Установите тип кнопки «кнопка». Я знаю, что это звучит избыточно, но дает вам кнопку без каких-либо действий (например, отправить).
Phaelax z, вы имеете в виду добавление <input type='button'> Я не знал, что <button> ведет себя таким запутанным образом. Ну, я большой, поэтому не совсем понимаю, как все работает.
Используйте событие и preventDefault, чтобы предотвратить отправку формы.
const input_name = document.querySelector('.name');
const btn = document.querySelector('.thisOne');
btn.addEventListener('click', (e)=>{
e.preventDefault();
console.info(input_name.value);
});
<form action = "">
<div>
<label for = "myName">Name</label>
</div>
<div>
<input type = "text" name = "myName" id = "myName" class = "name">
</div>
<button class = "thisOne">Collect Info</button>
</form>
Ух ты!!! exphoenee, спасибо большое!!!!
<button>
имеют тип по умолчанию «отправить», см. здесь. По этой причине они отправят форму и перенаправят вас на URL-адрес, указанный в его атрибуте действия.