How can I sore form data and display at on a new page after submitting?-CodePudding

I need to make a form with 2 input fields and then show the displayed data on a new page after submitting.

This is my html code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Film survey</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <form id="form" action="./Success.html">
      <h1>Movie survey</h1>
      <p>Thank you for participating in the film festival!</p>
      <p>Please fill out this short survey so we can record your feedback</p>

      <div>
        <label for="film">What film did you watch?</label>
      </div>
      <div>
        <input type="text" id="film" name="film" required />
      </div>
      <div>
        <label for="rating"
          >How would you rate the film? (1 - very bad, 5 - very good)
        </label>
      </div>
      <input type="text" id="rating" name="rating" required />
      <div><button >Submit</button></div>
    </form>
    <script src="script.js"></script>
  </body>
</html>

This is my js code

const formEl = document.querySelector("#form");

formEl.addEventListener("submit", (event) => {
  const formData = new FormData(formEl);
  console.log(formData.get("film"));
  console.log(formData.get("rating"));

  fetch("https://reqres.in/api/form", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
  });
});

I have a second html page called Success.html which I want to display tha data given in the form. I need to make a mock API so I tried using reqres.

CodePudding user response：

Here is how you can store form data and display it on a new page after submitting.

When the form is submitted, you can use the FormData object to get the values of the input fields.
You can then use the fetch API to send a request to a mock API endpoint (e.g. https://reqres.in/api/form) with the form data as the request body.
When the response is received, you can redirect the user to the Success.html page, where you can display the form data.

Here is an example of how the updated JavaScript code could look like:

const formEl = document.querySelector("#form");

formEl.addEventListener("submit", (event) => {
  // Prevent the form from being submitted
  event.preventDefault();

  // Get the values of the input fields
  const formData = new FormData(formEl);

  // Send a request to the mock API endpoint with the form data as the request body
  fetch("https://reqres.in/api/form", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      film: formData.get("film"),
      rating: formData.get("rating"),
    }),
  })
    .then((response) => {
      // When the response is received, redirect the user to the Success.html page
      window.location.href = "./Success.html";
    })
    .catch((error) => {
      // Handle any errors that occurred
      console.error(error);
    });
});

On the Success.html page, you can display the form data by accessing the data that was sent in the request body.

Here is an example of how the Success.html page could look like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Success</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Thank you for your feedback!</h1>
    <p>You watched: <span id="film"></span></p>
    <p>You rated it: <span id="rating"></span></p>
  </body>
</html>

You can then use JavaScript to access the form data from the request body and display it on the Success.html page.

Here is an example of how the JavaScript code on the Success.html page could look like:

// Get the values of the form data from the request body
const formData = JSON.parse(request.body);

const filmEl = document.querySelector("#film");
const ratingEl = document.querySelector("#rating");

// Set the text content of the span elements
filmEl.textContent = formData.film;
ratingEl.textContent = formData.rating;

CodePudding user response：

you can use cookies

try using this guide: https://www.w3schools.com/js/js_cookies.asp