表单提交时拼接输入内容生成链接加载失败问题求助

问题分析 #

• 引号嵌套语法错误：输入框的onclick属性用双引号包裹，内部document.getElementById("keywords")的双引号会提前闭合onclick的属性值，导致JS代码语法断裂，无法执行。
• 逻辑绑定位置错误：你把跳转逻辑绑定在了输入框的onclick事件上，但用户的操作是点击「Join Group」提交按钮，输入框的点击事件不会触发跳转逻辑。
• 未阻止表单默认提交行为：点击提交按钮会触发表单的默认提交行为，导致页面刷新，即使跳转逻辑写对了也会被覆盖。

修正方案 #

方案一：快速调整内联事件 #

修正引号嵌套，将逻辑移到提交按钮并阻止表单默认提交：

<form id="your_form">
  <input type="text" name="FPCAbundanceGroup" id="keywords">
  <p></p>
  <input type="submit" value="Join Group" onclick="event.preventDefault(); location.href='https://meet.jit.si/FPCAbundanceGroup' + document.getElementById('keywords').value;">
</form>

• 用event.preventDefault()阻止表单默认提交，避免页面刷新
• 将内部双引号改为单引号，解决引号嵌套冲突
• 把跳转逻辑绑定到提交按钮的点击事件，匹配用户操作路径

方案二：使用事件监听（更规范推荐） #

分离HTML与JS代码，提升可维护性：

<form id="your_form">
  <input type="text" name="FPCAbundanceGroup" id="keywords">
  <p></p>
  <input type="submit" value="Join Group">
</form>

<script>
document.getElementById('your_form').addEventListener('submit', function(event) {
  // 阻止表单默认提交行为
  event.preventDefault();
  // 获取输入框内容
  const groupSuffix = document.getElementById('keywords').value;
  // 拼接链接并跳转
  location.href = 'https://meet.jit.si/FPCAbundanceGroup' + groupSuffix;
});
</script>

• 通过submit事件监听，兼容点击按钮和回车提交两种操作
• 代码分离更易调试和后续修改
• 明确控制页面跳转逻辑，避免默认行为干扰

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