Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsA page change loads a new document, so the next page does not automatically inherit the first page’s input elements or ordinary JavaScript variables. To carry a value forward, send it through a form to a server, put a non-sensitive value in the destination URL, or store it in the browser. For a simple store-locator search, a query parameter is usually the most direct client-side handoff.
Why the input value does not appear on the next page
An input belongs to the document in which it was entered. After navigation, the browser loads a different document with a different DOM; matching an element ID on that page does not transfer the old element’s value. The two parts of the handoff must be connected: the form field needs a name for submission, and the destination must receive and use the submitted value. A similar store-locator question shows a form submitting a named address field to ehound.php, while separate locator code looks for an element with ID address. Those names alone do not connect the two pages. (Stack Overflow example, asked July 15, 2011.)
Choose how the destination should receive the value
| Approach | Use it when | Important trade-off |
|---|---|---|
| URL query parameter | The value is small, non-sensitive, and useful to have in a bookmarkable or shareable link. | It appears in the address bar and can be exposed through browser history or copied links. |
| Form submission to a server | Your application already has a server endpoint, or the server should process the submitted value and render the next page. | The destination must be implemented to receive the request and make the value available in its response. |
sessionStorage |
You want client-side state available across page loads in the same tab session without putting it in the URL. | It is browser-side storage, scoped to its storage context and session; it is not a server-side session. |
localStorage |
You intentionally want browser-side data to persist beyond a tab session. | Persistence is longer-lived, so the application needs to decide when to update or remove the stored value. |
For more than one page of form fields, preserve earlier values deliberately rather than replacing the URL state or passing a chain of hidden fields without a plan. A related multi-page form discussion considers browser storage as an alternative. (Stack Overflow discussion, asked January 30, 2020.)
Pass a non-sensitive value in the URL
Use URLSearchParams to encode the field and construct the destination URL. On the destination page, read the parameter with the same name. The browser API handles encoding and decoding, including spaces and other characters that make manual query-string construction error-prone. See MDN’s URLSearchParams reference.
#1 Best Overall
First page: build the destination URL
<label for="address">Address or ZIP code</label>
<input id="address" type="text">
<button id="search" type="button">Find locations</button>
<script>
document.querySelector("#search").addEventListener("click", () => {
const address = document.querySelector("#address").value.trim();
const destination = new URL("map.html", window.location.href);
destination.searchParams.set("address", address);
window.location.href = destination;
});
</script>Replace map.html with the actual destination path. If the input is blank, this example still navigates with an empty address parameter; validate or show an error before navigating if an address is required.
Destination page: read and use the value
<script>
const params = new URLSearchParams(window.location.search);
const address = params.get("address");
if (address) {
// Pass the value to the locator's search function.
searchLocations(address);
}
</script>searchLocations represents the locator function your page provides; replace it with the actual function name and expected input. If the locator instead reads from an input element, assign the retrieved value to that element explicitly. The destination’s element ID does not receive the value automatically.
Rank #2
A URL parameter is appropriate for public search terms, not secrets or sensitive personal information. Query values may remain visible in the address bar, browser history, and links people copy. For sensitive values, use an appropriately designed POST flow or server-side session instead of placing the value in the URL.
Submit a named field to a server
If the application already uses a server endpoint such as ehound.php, let the form submit the field and have server-side code make it available when rendering or initializing the locator page. A field’s name is the key submitted in the request; its id is useful for labels and client-side selection, but does not itself transmit the value.
Recommended Free Tools
<form action="ehound.php" method="post">
<label for="address">Address or ZIP code</label>
<input id="address" name="address" type="text">
<button type="submit">Find locations</button>
</form>The server must read the submitted address field and then either render the locator page with that value available to its script or otherwise pass it into the locator’s search logic. Merely posting to an endpoint is not enough if that endpoint does not forward or use the value. The exact server code depends on the server-side language and application; the form alone cannot make a separate static page inherit the field.
Keep the value in browser storage instead
For a client-side handoff that should not appear in the URL, save the value before navigation and retrieve it on the next page. sessionStorage is suitable when the data should be available across page loads in the same tab session. Its storage behavior and scope are described in MDN’s sessionStorage reference.
Rank #4
// Before navigating from the first page:
sessionStorage.setItem("address", document.querySelector("#address").value.trim());
window.location.href = "map.html";// On map.html:
const address = sessionStorage.getItem("address");
if (address) {
searchLocations(address);
}Use localStorage instead only when the value is meant to persist longer than a tab session. Choose based on the required lifetime and storage scope; neither option sends the value to your server automatically.
Quick Recap
Common handoff mistakes
- Expecting a JavaScript variable to survive navigation: ordinary page variables belong to the page that created them. Explicitly transmit or store the value before loading the destination.
- Using an ID where a submitted name is needed: a form field needs a
nameto be included as a submitted field. Keep anidas needed for labels and JavaScript, but do not confuse its role with transmission. - Reading the wrong key on the destination: if the source submits or stores
address, the destination must readaddresstoo. - Assuming the form endpoint forwards the value: server code must read the submission and supply it to the next page or locator.
- Appending query text by string concatenation: use
URLSearchParamsso characters in a value are encoded correctly, and so the parameter is added without hand-building delimiters.
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.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →
