You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何用JavaScript实现HTML表单编辑按钮:返回原页面并填充数据

问题描述

我制作了一个表单,用户点击「查看」按钮可跳转到另一页面查看表单信息。现在需要添加一个「编辑」按钮,点击后能返回原页面并编辑原有表单详情,但使用window.history.back()方法未能实现该功能。

代码文件

HTML表单页面 Index.html

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="index.js"></script>
</head>

<body>

  <div class="container">

    <form action="result.html" method="GET">
      <h1>有咨询需求?</h1>
      <h3>请填写以下信息</h3>
      <input type="text" id="name" name="name" placeholder="输入姓名" />
      <input type="text" id="email" name="email" placeholder="输入邮箱" />

      <select name="subject" id="subject">咨询主题
        <option value="Destinations">目的地相关</option>
        <option value="Pricing">价格相关</option>
        <option value="Accommodation">住宿相关</option>
        <option value="Other">其他问题</option>
      </select>
      <textarea id="details" name="details" placeholder="输入详细内容"></textarea>

      <input type="submit" class="btn" value="查看" onclick="handleSubmit()" />
    </form>
  </div>
</body>

</html>

表单详情查看页面 result.html

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="result.js"></script>
  <script src="https://smtpjs.com/v3/smtp.js"></script>
</head>

<body>
  <div class="container">
    <div class="box">
      <h1>表单详情</h1>
      <h2>姓名: <span id="result-name" /></h2>
      <h2>邮箱: <span id="result-email" /></h2>
      <h2>咨询主题: <span id="result-subject" /></h2>
      <h2>详细内容: <span id="result-details" /></h2>
      <div class="action-btn">
        <div class="inner">
          <form action="" method="GET">
            <input class="btn" type="submit" value="编辑" onclick="returnBack()" />
        </div>
        </form>
        <div class="inner">
          <form onsubmit="sendEmail(); reset(); return false;">
            <input class="btn-1" type="submit" value="提交" />
          </form>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

JavaScript文件 result.js

// 通过事件监听器调用函数
window.addEventListener('load',() => {    
  // 创建常量变量
  const params = (new URL(document.location)).searchParams;
  const name = params.get('name');
  const email = params.get('email');
  const subject = params.get('subject');
  const details = params.get('details');

  document.getElementById("result-name").innerHTML = name;
  document.getElementById("result-email").innerHTML = email;
  document.getElementById("result-subject").innerHTML = subject;
  document.getElementById("result-details").innerHTML = details;

})

function returnBack(){
  window.history.back();
}

内容的提问来源于stack exchange,提问作者issues23

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.26 04:18:16