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
  • 312 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by rproffitt
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.