How to edit the form in html using edit button with javascript

Question

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(); it didn't work.

html file Index.html - the form

<!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

 <!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.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(); }

Answer 1

I think the type="submit" in tag input is the problem. You should remove it and try again.

How to edit the form in html using edit button with javascript

Question

1 answers

solution1
0 2022-07-19 03:31:22

How to edit the form in html using edit button with javascript

Question

1 answers

solution1 0 2022-07-19 03:31:22

solution1
0 2022-07-19 03:31:22