Прошу прощения за, возможно, простой вопрос. Как зажать кнопку используя обработчик событий onclick(без использования JQuery):
<input type="submit" onclick="ClickFunction()">
<script>
function ClickFunction() {
...
}
</script>
И можно ли по нажатию кнопки подменить класс кнопки? Для примера используем Bootstrap:
<input type="submit" class="btn btn-info btn-lg" onclick="ClickFunction()">
По нажатию кнопки заменяем класс на class="btn btn-info btn-lg active", что делает кнопку активной. Спасибо!
UPD
<script>
function clickFunction(btn) {
btn.classList.add("active");
}
</script>
<input type="submit" class="btn btn-info btn-lg" style="width: 19.5%" name="column" value="Today"
onclick="clickFunction(this)">
<style>
.active {
border-style: inset;
}
</style>
Кнопка не зажимается, и "Selector active is never used"
function ClickFunction(btn) {
btn.classList.add("active");
}
.active {
border-style: inset;
}
<input type="submit" onclick="ClickFunction(this)">
Update
Кнопка не зажимается, ...
Все это (но главное - кнопка с type="submit") находится внутри тега form. По нажатию кнопки вызывается функция ClickFunction, но сразу вслед за этим (и очень быстро) происходит отправка формы и перезагрузка страницы, которая опять приходит с сервера с ненажатой кнопкой. Если Вам это не нужно, используйте:
<input type="button" onclick="ClickFunction(this)" value="Submit">
Update 2
С submit форма улетает, но не зажимается клавиша. С button форма не улетает, но клавиша зажимается.
Добавьте в кнопку атрибут name="Submit" и проверяйте на сервере, что элемент в данных запроса по ключу "Submit" равен "Submit". Если это условие выполняется, выводите в кнопку атрибут class="active".
<input type="submit" name="Submit" value="Submit">
В этом случае onclick="ClickFunction(this)" - не нужен.
Update 3
у каждой кнопки есть name="column" и разное value, которое уже хранится в сессии по ключу column="value". Нужно как-то достучаться до кнопки с value="something" и добавить в нее класс active и проделывать эту проверку после каждого запроса.
Перед закрывающим </body> выведите:
<script>
var btn = document.querySelector("input[name='column'][value='something']");
if (btn)
btn.classList.add("active");
</script>
Вместо something выведите значение которое пришло с запросом по ключу column.
можно сделать это без js, с помощью css псевдокласса active, т.е. даже класс у кнопки не нужно менять.
.class:active{
style
}
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости