Member Avatar for Rodney_6

I have a form

<form action="frame.html" method="GET"> <input type="text" name="SOMEID" /> <input type="submit" value="Submit" /> </form>

I'd like to pass SOMEID to the frame.html page in a few places as html links:

link/embed/$SOMEID

link/analytics/$SOMEID

link/blah/$SOMEID

where $SOMEID was the form input on the previous page.

If someone types 1234, i'd like to place 1234 anywhere I want on frame.html without writing to the html file and if possible, without using a web server. That way someone using a laptop can just launch the html file from the desktop and run it.

I am an AV and server person. Someone assumes I should know how to do this. I don't.

  • 3 Contributors
  • 3 Replies
  • 335 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by rproffitt

Dani AI

Generated

Short summary: wants to take the text entered on a local HTML form and place it into links on a second static page without using a server. That is exactly what and pointed toward (pass the value in the URL and read it on the next page). Below is a compact, reliable pattern that works when files are opened locally (file://), plus a few cautions.

Use the URL (hash or query) and replace a simple token inside link hrefs on frame.html. The hash (#) is slightly more predictable for local files, so one easy approach is to redirect the form to frame.html#<encoded-id> and have frame.html read location.hash (fall back to location.search for normal GET). Always encode the input and sanitize before inserting into attributes.

Example (page that redirects to frame.html using the hash):

<form onsubmit="location.href='frame.html#'+encodeURIComponent(this.SOMEID.value); return false;">
  <input name="SOMEID" />
  <input type="submit" value="Go" />
</form>

Example (frame.html snippet that reads the value, sanitizes it, and replaces a token in link hrefs):

<script>
(function(){
  // get id from hash first, then from search
  const raw = location.hash ? location.hash.slice(1) : new URLSearchParams(location.search).get('SOMEID') || '';
  const id = decodeURIComponent(raw);
  const safe = id.replace(/[^A-Za-z0-9_-]/g, ''); // whitelist characters
  document.querySelectorAll('a[href*="{{SOMEID}}"]').forEach(a => {
    a.href = a.href.replace('{{SOMEID}}', safe);
  });
})();
</script>

Notes and troubleshooting:

  • This follows 's URL idea and 's window.location parsing but uses URLSearchParams and a hash fallback for clarity and robustness.
  • Sanitize before inserting into href to avoid malformed URLs or injection; never set innerHTML with raw input.
  • localStorage/sessionStorage and postMessage are alternatives, but their behavior across local files varies by browser—do not rely on them for cross-file data when using file://.
  • Test in the target browser(s) if the pages must work from the desktop without a server.

Recommended Answers

All 3 Replies

Member Avatar for rproffitt

https://www.google.com/search?q=submit+html+without+server looks to find the priors but let's go with no server.

Rather than submit, why not tackle this with passing the value in the URL?

https://www.w3schools.com/nodejs/nodejs_url.asp shows how to parse that URL and get what you passed along.

commented: The request from them was just to open 3 iframes - all of which would use that ID from the form. There are several hundred IDs so static pages = bad +0
Member Avatar for pankaj_patel

You can use window.location object to make this possible.

page1.html

<form action="frame.html" method="GET">
  <input type="text" name="SOMEID" />
  <input type="submit" value="Submit" />
</form>

frame.html

<html>
<body>
  <nav>
    <ul>
      <li><a data-linkplaceholder="/link/some/$placeholder$">Link1</a></li>
      <li><a data-linkplaceholder="/link/another/$placeholder$">Link2</a></li>
      <li><a data-linkplaceholder="/link/special/$placeholder$">Link3</a></li>
    </ul>
  </nav>
  <script>
    (function(loc){
      var val = loc.search
        .replace("?", "")
        .split("&")
        .reduce(function(acc, item) {
            var i = item.split("=");
            return Object.assign(acc, { [i[0]]: i[1] });
        }, {});
      var links = document.querySelectorAll('[data-linkplaceholder]');
      links.forEach(function(link) {
        var href = link.getAttribute('data-linkplaceholder');
        link.setAttribute('href', href.replace('$placeholder$', val['SOMEID']))
      });
    })(window.location)
    </script>
</body>
</html>

This will work in your case

Member Avatar for rproffitt

@rodney, your choice for no server so there will be consequences. As to the page being static I disagree. You pass along what you want via the URL (a common thing to do), parse that and generate or respond to that. Not at all static. Just coding to fit your requirements.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.