Предотвратить перезагрузку страницы после установки значения поля ввода
У меня есть форма, в которой имя пользователя и пароль приведут к ключу авторизации. Пользователи заполняют имя пользователя и пароль, ключ устанавливается в скрытом поле ввода после того, как пользователь нажимает кнопку.
Я использую javascript для события нажатия кнопки. Он устанавливает значение скрытого поля ввода, но сразу после этого страница перезагружается, и значение исчезает.
Я пробовал запускать с самой кнопки (onclick = "generateAPI()"), пробовал устанавливать значение (document.getelementByID().value = "")
<label>Username:</label><input id = "um_user" type = "text" "name = "um_username"></br>
<label>Password:</label><input id = "um_pass" type = "password" name = "um_password"></br>
<input type = "text" id = "um_apikey" name = "um_versio_setting_apikey" value = "<?php echo isset( $setting ) ? esc_attr( $setting ) : ''; ?>">
<button id = "versioapi">Generate API Key</button>
<script>
document.getElementById("versioapi").onclick = function() {generateAPI()};
function generateAPI() {
user = document.getElementById("um_user").value;
pass = document.getElementById("um_pass").value;
document.getElementById("um_apikey").setAttribute('value','My default value');
</script>
Я ожидаю, что в поле ввода "um_apikey" будет установлено значение, а страница не будет перезагружена, поэтому пользователь может продолжить заполнение формы и, когда закончит, сохранит ее.
Ваши входные данные завернуты в форму? Я не понимаю, почему страница будет перезагружаться, глядя на данный код.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Установите тип кнопки «кнопка».
<button type = "button" id = "versionapi">Generate API key</button>
В противном случае, не указывая его тип, он действует как <button type = "submit">. См. этот ответ для более подробного объяснения.
Кроме того, вы можете зафиксировать клик с помощью JS и предотвратить действие по умолчанию с помощью preventDefault().
Большое спасибо! Именно то, что мне нужно
jQuery:
$("#versioapi").click(function(event) {
event.preventDefault();
});
Ванильный JavaScript
document.getElementById("versioapi").addEventListener("click", function(event){
event.preventDefault()
});
используйте
preventDefault()при нажатии кнопки.