What is the process for fetching the chosen outcome from a subsequent webpage using HTML?

Question

What is the process for fetching the chosen outcome from a subsequent webpage using HTML?

How can I display selected cities on a different webpage after clicking a button? Currently, I can only get the results on the same page. For example, if a user selects NYC and Delhi, those cities should be displayed on another HTML page.

document.getElementById('btn').onclick = function() {
               var markedCheckbox = document.getElementsByName('pl');
               for (var checkbox of markedCheckbox) {
                    if (checkbox.checked)
                         document.body.append(checkbox.value + ' ');
               }
          }

<h2 style="color:green"> Get all marked checkboxes value </h2>
               <h4> Select the City, you know </h4>
               <tr>
                    <td> Berlin: <input type="checkbox" id="check1" name="pl" value="Berlin"> </td>
                    <td> NYC: <input type="checkbox" id="check2" name="pl" value="NYC"> </td>
               </tr>
               <tr>
                    <td> Delhi: <input type="checkbox" id="check3" name="pl" value="Delhi"> </td>
                    <td> London: <input type="checkbox" id="check4" name="pl" value="London"> </td>
               </tr>
               <tr>
                    <td> Paris: <input type="checkbox" id="check5" name="pl" value="Paris"> </td>
                    <td> Dhaka: <input type="checkbox" id="check6" name="pl" value="Dhaka"> </td> <br> <br>

                    <button id="btn">Submit</button> <br>
                    <h4 style="color:green" id="result"></h4>

                    <script type="text/javascript" src="12.js"></script>

javascript html jquery css

Answer 1

Answer №1

When it comes to displaying your data on a different page, it's essential to have saved your data somewhere. You can make use of PHP sessions or the localStorage feature in JavaScript. If you opt for using localStorage, you'll need to make some modifications to your JavaScript code.

document.getElementById("btn").onclick = function () {
  var markedCheckbox = document.getElementsByName("pl");
  var cities = [];

  for (var checkbox of markedCheckbox) {
    if (checkbox.checked) {
      cities.push(checkbox.value);
    }
  }

  // Save data into storage
  localStorage.setItem("cities", JSON.stringify(cities));

  // Retrieve data from storage on other pages
  var showCities = JSON.parse(localStorage.getItem("cities"));

  showCities.forEach((city) => {
    document.body.append(city + " ");
  });
};

Now that your data is stored in localStorage, you can easily access it from any HTML page.

If you wish to retrieve localStorage data on other HTML pages,

var showCities = JSON.parse(localStorage.getItem("cities"));

showCities.forEach((city) => {
  document.body.append(city + " ");
});

Simply insert this code within the script tag of the respective HTML page.

Answer 2

When it comes to displaying your data on a different page, it's essential to have saved your data somewhere. You can make use of PHP sessions or the localStorage feature in JavaScript. If you opt for using localStorage, you'll need to make some modifications to your JavaScript code.

document.getElementById("btn").onclick = function () {
  var markedCheckbox = document.getElementsByName("pl");
  var cities = [];

  for (var checkbox of markedCheckbox) {
    if (checkbox.checked) {
      cities.push(checkbox.value);
    }
  }

  // Save data into storage
  localStorage.setItem("cities", JSON.stringify(cities));

  // Retrieve data from storage on other pages
  var showCities = JSON.parse(localStorage.getItem("cities"));

  showCities.forEach((city) => {
    document.body.append(city + " ");
  });
};

Now that your data is stored in localStorage, you can easily access it from any HTML page.

If you wish to retrieve localStorage data on other HTML pages,

var showCities = JSON.parse(localStorage.getItem("cities"));

showCities.forEach((city) => {
  document.body.append(city + " ");
});

Simply insert this code within the script tag of the respective HTML page.

What is the process for fetching the chosen outcome from a subsequent webpage using HTML?

Answer №1

Similar questions

I've been attempting to access the Marketo API, but unfortunately, I haven't had any luck

Attempting to incorporate a YouTube video into an HTML webpage

Error message on Android Web Console: ReferenceError - Worker object is not defined

The Dreamweaver code is visible on the design page but does not appear in the live view on the browser

Unbelievable attribute: sup causing peculiar styling in link element

What is the best way to verify the type of an object received from request.body in Typescript

Ways to verify the nodemon version that is currently installed on your local machine

Creating a well-aligned form using Material-UI

The for loop does not cycle through every element

Unable to change background-image as intended

Stop jQuery from resetting the background image when using fadeOut()

Tips for updating values in a nested array within JSON

The jQuery.each function creates copies of items during every iteration

Adjusting padding evenly across an unspecified number of columns

Promises.all fails to reach the catch block after the initial rejection

How can you target a specific data-target button while working with multiple Bootstrap collapse elements?

Retrieving Parts of a URL in AngularJS

Seeking a regular expression to identify special characters appearing at the beginning of a string

Search for "conditions" in a basic HTML DOM parser

Submitting a form with AJAX and additional fields can be accomplished by including the extra fields in