Когда пользователь вводит какой-то текст в мою форму и нажимает кнопку, я хочу скрыть форму и показать пользователю сообщение "спасибо", чтобы сообщить, что я получил свой текст.
Byкстати, это для встраивания во всплывающее окно расширения Chrome.
Вот что у меня есть:
<!doctype html>
<html>
<head>
<title>Extension</title>
<style>
body {
min-width:200px;
min-height:75px;
overflow-x:hidden;
}
img {
margin:5px;
border:2px solid black;
vertical-align:middle;
width:75px;
height:75px;
}
.visible{
display:block;
}
.invisible{
display: none;
}
</style>
<script>
var PopupController = function () {
this.button_ = document.getElementById('button');
this.form_ = document.getElementById('userIdForm');
this.userId_ = document.getElementsByName('userID')[0];
this.submitThanks_ = document.getElementById('submitThanks');
this.addListeners_();
};
PopupController.prototype = {
button_: null,
form_: null,
userId_: null,
submitThanks_: null,
addListeners_: function () {
this.button_.addEventListener('click', this.handleClick_.bind(this));
},
handleClick_: function () {
console.log("Submit button clicked");
var userId = this.userId_.value;
// Hide the form
this.form_.classList.add('invisible');
this.submitThanks_.classList.remove('invisible');
}
};
</script>
</head>
<body onload="window.controller = new PopupController()">
<h2 class="invisible" id="submitThanks">Thanks!</h2>
<div id="userIdForm">
<form>
<input type="text" name="userID" placeholder="User ID" required/>
<button id="button" type="submit">Submit</button>
</form>
</div>
</body>
</html>
Проблема в том, что форма появляется после нажатия кнопки.Я заметил, что функциональность немного меняется, когда я вставляю обязательный атрибут в поле ввода.
Я использую последнюю версию Chrome для Mac.