The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →A new page does not automatically receive the previous page’s HTML elements or JavaScript variables. To carry an input value forward, submit it to a server, put a non-sensitive value in the destination URL, or store it in the browser. For a simple store-locator flow, a query parameter is often the shortest path; use a server-handled form or browser storage when the application’s needs call for it.
Why the next page cannot read the previous page’s input
When navigation loads another document, the first page’s DOM and ordinary JavaScript variables are not carried over. An input’s id identifies an element within its own document; repeating that ID on the destination page does not transfer its value. The pages need an explicit handoff.
This distinction matters in the store-locator example: the form submits a field named address to ehound.php, while the locator code looks for an element with ID address. Those are different identifiers serving different purposes. The server or destination-page code must connect the submitted value to the locator’s search function. The original example is discussed in a 2011 Stack Overflow question.
Choose a handoff method
| Method | Best fit | Trade-off |
|---|---|---|
| URL query parameter | A small, non-sensitive value that should be visible or shareable in a link | Appears in the address bar and can remain in browser history or copied links |
| Form submission to a server | The application already has an endpoint that can process the form and render or initialize the next page | Requires server-side handling; a form submission alone does not populate an unrelated static page |
sessionStorage |
Client-side data needed across page loads in the same tab session | Not part of the URL, but scoped to browser storage context and session behavior |
For several steps of a form, preserve earlier values deliberately rather than replacing the existing query state or building a chain of hidden inputs. A related multi-page form discussion considers browser storage and passing values between pages.
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
Pass a non-sensitive value in the URL
Use URLSearchParams to encode the value safely for the query string, and read the same parameter on the destination page. MDN documents the browser API in its URLSearchParams reference.
On the first page
Give the input a useful name or ID, read its value, and construct the destination URL. This example assumes the destination is map.html in the same site:
Rank #2
<label for="address">Address or ZIP code</label>
<input id="address" name="address">
<button type="button" id="find-location">Find locations</button>
<script>
document.getElementById("find-location").addEventListener("click", () => {
const address = document.getElementById("address").value;
const params = new URLSearchParams({ address });
window.location.href = `/map.html?${params.toString()}`;
});
</script>URLSearchParams handles characters such as spaces and punctuation when creating the query string. Avoid concatenating raw input directly into a URL, since characters in the value can alter how the URL is parsed.
On the destination page
Read the parameter from window.location.search, then pass it to the locator’s own search function. The function name below is illustrative; use the actual function provided by the locator:
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →const params = new URLSearchParams(window.location.search);
const address = params.get("address");
if (address) {
searchLocations(address);
}Reading a value is only the handoff. The destination still needs code to put it into the locator or otherwise use it; the query parameter does not automatically populate an input or launch a search.
Submit the form to a server
If the application already uses an endpoint such as ehound.php, keep the handoff in that request flow. The form field must have a name, because the server receives submitted field names and values. For example:
Rank #4
<form action="ehound.php" method="post">
<label for="address">Address or ZIP code</label>
<input id="address" name="address">
<button type="submit">Find locations</button>
</form>The server endpoint must read the submitted address and render the locator page with that value available to its markup or JavaScript. Simply setting the form’s action to an endpoint—or using the same element ID on the next page—does not by itself pass data into a separate static document. A POST-based flow is also preferable to placing sensitive values in a URL, but the application still needs appropriate server-side handling.
Keep a value in browser storage
Use sessionStorage when the value should remain client-side and be available after navigation in the same tab session. The browser API is documented in MDN’s sessionStorage reference.
// Before navigating
sessionStorage.setItem("address", document.getElementById("address").value);
window.location.href = "/map.html";
// On map.html
const address = sessionStorage.getItem("address");
if (address) {
searchLocations(address);
}Choose storage based on how long the value should persist and the context in which it must be available. localStorage is another client-side option for longer-lived persistence; do not use it by default when a value only needs to survive one page transition.
Keep personal or sensitive values out of URLs
Query parameters can be exposed in the address bar, browser history, and links that a user copies or shares. Do not put sensitive personal data in a URL. Use an appropriately designed POST flow or server-side session for values that should not travel as a visible link. Browser storage is also client-side; choose it only when its scope and handling are suitable for the data.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
