如何用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
相关产品推荐
相关产品推荐

