表单onsubmit提交后不显示文本，参数出现在URL如何修复

• 取值逻辑位置错误：你把获取输入框值的代码写在了showInput函数外部，这部分代码会在页面加载初始阶段就执行，此时用户还没输入内容，拿到的永远是空值；如果JS放的位置在DOM元素之前，还会直接因为找不到元素报错，导致后续函数无法正常执行。
• 表单默认提交未被正确拦截：JS报错后，onsubmit属性里写的return false不会执行，表单会触发默认的GET提交行为，把输入的参数拼接到URL地址中，同时不会执行内容渲染逻辑。
• 存在笔误：slots输入项的输出描述错写为了"number of passes"。

1. 调整JS代码结构，将取值逻辑移到showInput函数内部，确保每次提交时才读取用户输入的最新值，同时修正笔误，修复后JS代码如下：

function showInput() {
  // 提交触发时才读取输入框最新值，value本身就是字符串类型，不需要额外调用toString()
  var passes = document.getElementById("passes").value;
  var slots = document.getElementById("slots").value;
  document.getElementById("display-input").innerHTML =
    "You entered " + passes + " for the number of passes.\n" +
    "You entered " + slots + " for the number of slots.";
  return false;
}

2. 优化表单提交拦截写法，用event.preventDefault()替代单独写return false，避免函数执行异常时拦截失效，修复后表单代码如下：

<div class="form">
  <form name="form" id="form" onsubmit="event.preventDefault(); showInput();">
    <table>
      <tr>
        <td>Passes: </td>
        <td><input type="number" name="passes" id="passes" /></td>
      </tr>
      <tr>
        <td>Slots: </td>
        <td><input type="number" name="slots" id="slots" /></td>
      </tr>
      <tr>
        <td></td>
        <td><input type="submit" value="Submit" /></td>
      </tr>
    </table>
  </form>
</div>
<p><span id="display-input"></span></p>

3. 确保JS脚本标签放在所有DOM元素的后方（即</body>闭合标签之前），避免页面加载初期找不到DOM元素报错。

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