如何仅用JavaScript实现提交按钮功能并在新页面展示结果

没问题，我来帮你搞定这个需求——用纯JS处理表单提交，还能把用户填写的内容展示在另一个页面里。下面分步骤给你拆解实现方法：

第一步：修改表单，添加JS提交逻辑 #

先把你的表单补全（假设包含常用的姓名、邮箱字段），然后添加JavaScript来接管表单的提交行为，阻止默认跳转，收集数据后再跳转到结果页：

<!DOCTYPE html>
<html>
<head>
  <title>Sign-up form</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <main>
    <!-- 给表单加id方便JS获取；移除默认的action和method，用JS完全接管提交流程 -->
    <form class="center" id="signupForm">
      <h2>Enter information here</h2>
      <div class="form-item">
        <label class="category" for="firstname">First name</label>
        <input type="text" id="firstname" name="firstname" required>
      </div>
      <div class="form-item">
        <label class="category" for="lastname">Last name</label>
        <input type="text" id="lastname" name="lastname" required>
      </div>
      <div class="form-item">
        <label class="category" for="email">Email</label>
        <input type="email" id="email" name="email" required>
      </div>
      <button type="submit">Submit</button>
    </form>
  </main>

  <script>
    // 获取表单元素
    const signupForm = document.getElementById('signupForm');
    
    // 监听表单提交事件
    signupForm.addEventListener('submit', function(e) {
      // 阻止浏览器默认的表单提交行为（避免直接发POST请求跳转）
      e.preventDefault();
      
      // 用原生API快速收集所有表单数据
      const formData = new FormData(signupForm);
      // 转成普通对象方便后续存储
      const formDataObj = Object.fromEntries(formData);
      
      // 把数据存在localStorage里——同一域名下的页面都能读取到
      localStorage.setItem('submittedFormData', JSON.stringify(formDataObj));
      
      // 跳转到结果页面
      window.location.href = 'submit.htm';
    });
  </script>
</body>
</html>

这里的关键细节：

• 用e.preventDefault()阻止默认提交，让JS完全控制流程
• FormData是浏览器原生工具，能自动收集所有带name属性的表单字段（一定要给输入框加name，不然会漏数据！）
• 用localStorage存储数据，跳转页面后数据不会丢失，是纯前端场景下最方便的方案

第二步：在submit.htm页面展示提交结果 #

接下来写结果页的代码，读取localStorage里的数据，然后渲染成友好的展示格式：

<!DOCTYPE html>
<html>
<head>
  <title>Submission Result</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <main class="center">
    <h2>Your Submitted Information</h2>
    <div id="resultDisplay"></div>
    <button onclick="clearSubmittedData()">Clear Result</button>
  </main>

  <script>
    // 页面加载完成后读取数据
    window.addEventListener('load', function() {
      const savedData = localStorage.getItem('submittedFormData');
      const resultDisplay = document.getElementById('resultDisplay');
      
      if (savedData) {
        // 把JSON字符串转回对象
        const formData = JSON.parse(savedData);
        
        // 生成展示用的HTML
        let resultHtml = '<ul style="list-style: none; padding: 0;">';
        for (const [fieldName, value] of Object.entries(formData)) {
          // 把字段名格式化成更友好的样式（比如firstname → First Name）
          const friendlyLabel = fieldName.charAt(0).toUpperCase() + 
                                fieldName.slice(1).replace(/([A-Z])/g, ' $1');
          resultHtml += `<li style="margin: 8px 0;"><strong>${friendlyLabel}:</strong> ${value}</li>`;
        }
        resultHtml += '</ul>';
        
        resultDisplay.innerHTML = resultHtml;
      } else {
        resultDisplay.innerHTML = '<p>No submission data found. Please go back and submit the form.</p>';
      }
    });
    
    // 可选：添加清除结果的功能
    function clearSubmittedData() {
      localStorage.removeItem('submittedFormData');
      document.getElementById('resultDisplay').innerHTML = '<p>Result cleared.</p>';
    }
  </script>
</body>
</html>

一些注意事项 #

• 这个方案依赖localStorage，所以必须在**同一域名（或本地file://协议）**下运行，跨域的话会读取不到数据
• 如果要传递敏感信息，别用localStorage（它是明文存在浏览器里的），这种情况可以考虑用URL参数传递（但URL长度有限制）
• 所有输入框必须有name属性，FormData是根据name来收集数据的，不是id

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