如何用HTML按钮调用JavaScript生成随机Token并在表单中展示

问题描述 #

开发包含邀请邮件发送功能的HTML表单，需要实现：点击按钮生成随机Token，将Token展示在“发送邀请”按钮上方的文本框中，最终随邀请邮件发送。现有代码点击生成按钮后无法在页面展示Token。

问题分析 #

1. 原JavaScript的token()函数仅在控制台打印5个Token，未将生成的Token传递给页面元素
2. 尝试的展示代码document.getElementById("result").innerHTML = "String.fromCharCode"是硬编码固定字符串，未关联实际生成的Token
3. 生成Token的按钮未设置type="button"，点击时会触发表单默认提交行为，导致页面刷新

解决方案 #

修改后的HTML代码 #

<div class="form-group">
  <form id="invitationForm" action="https://getform.io/f/d59e4f74-57a0-412a-a77f-c100c59142d3" method="POST">
    <label class="col-md-4 control-label" for="textinput">Name</label>  
    <div class="col-md-4">
      <input id="textinput" name="textinput" type="text" placeholder="Full Name" class="form-control input-md" required>
    </div>
  </div>

  <div class="form-group">
    <label class="col-md-4 control-label" for="email">Email</label>  
    <div class="col-md-4">
      <input id="email" name="email" type="email" placeholder="" class="form-control input-md" required>  
    </div>
    <!-- 添加type="button"阻止表单提交，替换原div为文本框用于展示Token -->
    <button type="button" onclick="generateToken()">Generate Token</button>
    <input id="tokenDisplay" type="text" class="form-control input-md" readonly placeholder="Generated Token here">
    <p></p>   
    <input type="submit" value="Send Invitation">
  </div>
</form>

修改后的JavaScript代码 #

function generateToken() {
  // 定义生成指定长度随机Token的函数
  const generateRandomToken = size => {
    return btoa(
      String.fromCharCode(...crypto.getRandomValues(new Uint8Array(size)))
    ).replaceAll('+', 'x').replaceAll('/', 'I').slice(0, size);
  };
  
  // 生成16位长度的Token
  const newToken = generateRandomToken(16);
  // 将Token赋值到文本框中展示
  document.getElementById("tokenDisplay").value = newToken;
}

关键修改说明 #

• HTML调整：
  • 给生成Token的按钮添加type="button"，避免点击时触发表单提交导致页面刷新
  • 将原div#result替换为input#tokenDisplay文本框，设置readonly属性防止用户编辑；若需Token随表单提交，可给input添加name="token"属性
• JavaScript调整：
  • 重命名函数为generateToken()，语义更明确
  • 优化Token生成逻辑，生成单个16位Token（原循环生成5个为测试逻辑，实际场景通常只需一个）
  • 使用element.value而非innerHTML给文本框赋值，正确展示生成的Token

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