Prevent page reload after setting value of input field

Question

I have a form where a username and password will result in an authorization key. Users fill in the username and password, the key is set in a hidden input field after the user clicks a button.

I use javascript on the click event of the button. It sets the value of the hidden input field, but directly after that, the page is reloaded and the value is gone.

I have tried triggering from the button itself (onclick="generateAPI()"), I have tried setting the value (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>

I expect the input field "um_apikey" to be set to the value and the page not reloaded, so the user can continue filling in the form and when done saves it.

Answer 1

Set the button type to "button".

<button type="button" id="versionapi">Generate API key</button>

Otherwise, by not specifying its type, it acts as a <button type="submit">. See this answer for a more detailed explanation.

Alternatively, you can capture the click by JS and prevent the default action using preventDefault().

Answer 2

jQuery:

$("#versioapi").click(function(event) {
  event.preventDefault();
});

Vanilla JavaScript

document.getElementById("versioapi").addEventListener("click", function(event){
  event.preventDefault()
});