Question

我有一个表单，其中用户名和密码将产生授权密钥。用户填写用户名和密码，在用户单击按钮后将密钥设置在隐藏的输入字段中。

我在按钮的click事件上使用了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"设置为该值，并且不会重新加载页面，因此用户可以继续填写表单，并保存完成。

Answer 1

jQuery ：

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

香草JavaScript

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

Answer 2

将按钮类型设置为“按钮”。

否则，通过不指定其类型，它将充当<button type="button" id="versionapi">Generate API key</button>。有关详细说明，请参见this answer。

或者，您可以使用JS捕获点击，并使用<button type="submit">阻止默认操作。

设置输入字段的值后防止页面重新加载

2 个答案: