设置输入框值后如何避免页面重载？表单API密钥生成问题

嘿，我一眼就看出问题所在啦！你遇到的页面自动重载、API密钥刚设置就消失的情况，是因为按钮的默认行为在搞事情——如果这个按钮是放在<form>标签里面的，它默认的type属性是submit，点击后会触发表单提交，直接刷新页面，自然刚设置的值就没了。

下面给你两个简单有效的解决办法，顺便修正你代码里的小细节：

方法一：修改按钮的type属性 #

直接给按钮加上type="button"，明确告诉浏览器这只是个普通按钮，不是提交按钮：

<button id="versioapi" type="button">Generate API Key</button>

方法二：在点击事件中阻止默认行为 #

如果不想改按钮属性，也可以在你的点击事件里阻止默认提交行为：

document.getElementById("versioapi").onclick = function(event) {
  // 阻止按钮的默认提交行为
  event.preventDefault();
  generateAPI();
};

function generateAPI() {
  // 用let/const声明变量，避免全局污染
  const user = document.getElementById("um_user").value;
  const pass = document.getElementById("um_pass").value;
  // 直接设置value属性比setAttribute更可靠
  document.getElementById("um_apikey").value = 'My default value';
}

另外还要修正你代码里的两个小问题：

• JavaScript里的方法名是getElementById（注意E和I是大写的），你之前写的getelementByID会报错；
• 你的generateAPI函数没闭合大括号，这也会导致代码运行异常。

最后给你贴一份完整的修正后代码：

<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" type="button">Generate API Key</button> 

<script>
document.getElementById("versioapi").onclick = function() {
  generateAPI();
};

function generateAPI() {
  const user = document.getElementById("um_user").value;
  const pass = document.getElementById("um_pass").value;
  // 直接设置value属性更直观可靠
  document.getElementById("um_apikey").value = 'My default value';
}
</script>

这样修改后，点击按钮生成API密钥时页面就不会重载了，用户可以继续填写表单并最终提交保存~

内容的提问来源于stack exchange，提问作者IJsbrand Schipperus