如何使用带有 javascript 的编辑按钮在 html 中编辑表单
[英]How to edit the form in html using edit button with javascript
问题描述
I create a form which allows to view the form information in a different page for the user to view using "view" button and I want a "edit" button to edit the same details of the form by redirecting to the previous page.
我创建了一个表单，它允许在不同的页面中查看表单信息供用户使用“查看”按钮查看，我想要一个“编辑”按钮通过重定向到上一页来编辑表单的相同详细信息。 I tried using window.history.back();我尝试使用 window.history.back(); it didn't work.它没有用。html file
Index.html- the formhtml 文件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>Send us an Enquiry?</h1> <h3>Fill in the Details Below</h3> <input type="text" id="name" name="name" placeholder="Enter Name" /> <input type="text" id="email" name="email" placeholder="Enter Email" /> <select name="subject" id="subject" value="Subject">Subject <option value="Destinations">Destinations</option> <option value="Pricing">Pricing</option> <option value="Accommodation">Accommodation</option> <option value="Other">Other</option> </select> <textarea id="details" name="details" placeholder="Enter Details"></textarea> <input type="submit" class="btn" value="View" onclick="handleSubmit()" /> </form> </div> </body> </html>The page view the form details
result.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> Form Details </h1> <h2> Name: <span id="result-name" /> </h2> <h2>Email: <span id="result-email" /> </h2> <h2> Subject: <span id="result-subject" /> </h2> <h2>Details: <span id="result-details" /> </h2> <div class="action-btn"> <div class="inner"> <form action="" method="GET"> <input class="btn" type="submit" value="Edit" onclick="returnBack()" /> </div> </form> <div class="inner"> <form onsubmit="sendEmail(); reset(); return false;"> <input class="btn-1" type="submit" value="Submit" /> </form> </div> </div> </div> </div> </body> </html>The javascript file
result.jsjavascript 文件result.js//call function using event listener window.addEventListener('load',() => { //create a const variable 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(); }
1 个解决方案
解决方案1
0 2022-07-19 03:31:22
I think the type="submit" in tag input is the problem.我认为标签input中的type="submit"是问题所在。 You should remove it and try again.您应该删除它并重试。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.