How to complete a url using HTML form

Question

I have spent my entire day at this point trying to figure out how to make a field complete a url in an html format. Essentially I want to use the same url https://xxx/xxx/xxx/ then some form data they fill in with .htm at the end.

I have tried several different button set ups and even tried a java script and have had no luck. I can make it go to the generic URL but I cannot get it to use the form data to complete the url.

    <!DOCTYPE html>
    <html>
       <head>
          <title>Title of the document</title>
   Flow<input type="text" name="flowname"><br>
  <style>
     .button {
     background-color: #ff9900;
     border: none;
     color: white;
     padding: 15px 25px;
     text-align: center;
     text-decoration: none;
 display: inline-block;
     font-size: 20px;
     margin: 4px 2px;
     cursor: pointer;
     }
  </style>
   </head>
   <body>
     <a href="https://pretendsite.com/pretendfolder/" + 
    document.getElementById("flowname").htm; class="button">Go</a>
    </body>
   </html>

I am expecting it to pull the exact html file but instead it just pulls the storage location, ignoring any form data entered.

Example of a completed url - http;//xxx.com/xxx/xxxEnteredtext.htm — david kennedy
– david kennedy, Commented Sep 11, 2019 at 17:38
You should use a form handler backend, with either <form action="formhandler.php"> or <input type="submit" formaction="formhandler.php">. — tim
– tim, Commented Sep 11, 2019 at 17:46
First you should get the basics of markup language. Do a web search and take a look at some useful sites like w3c school and so on. Your example shows invalid markup code. You should‘nt put an input into head and JavaScript as an attribute in a html anchor will not work. — Maximilian Fixl
– Maximilian Fixl, Commented Sep 11, 2019 at 17:49
I am new to coding, probably obvious. I spent probably 4 hours today on w3c but none of their examples for this actually worked. Everything I tried to test using their try it yourself tool added special characters over the slashes and : I am certainly not good enough at this to make heads or tails of why. — david kennedy
– david kennedy, Commented Sep 11, 2019 at 18:06
stackoverflow.com/questions/27195868/… and stackoverflow.com/questions/133925/… — tim
– tim, Commented Sep 11, 2019 at 18:08

Anis R. · Accepted Answer · 2019-09-13 19:24:49Z

1

A few issues here:

1- Your <input> element cannot be in the document's head, it needs to be in the body.

2- You are calling getElementById("flowname") while the input does not have an id provided.

3- To get what you want, you do need some Javascript. In particular you need to use some sort of event on your input element, i.e. a function that runs whenever something changes in your text box. Here, I am using an oninput event, which fires whenever the user types something in the input element.

<!DOCTYPE html>
    <html>
       <head>
          <title>Title of the document</title>
      </head>
      <body>
          Flow <input type="text" name="flowname" id="flowname"><br>
        <a href="https://pretendsite.com/pretendfolder/" id="link">Go</a>
      </body>
      
      <!-- This is how to include the Javascript code directly to your HTML -->
      <script>
          var input = document.getElementById("flowname");

          //this function gets called whenever the text in the text box changes
          input.oninput = function() {
            var link = document.getElementById("link");
            //here, this.value is the value of the input "flowname"
            link.href = "https://pretendsite.com/pretendfolder/" + this.value;
          }
      </script>
   </html>

Edit: Code snippet edited to show how you can insert Javascript code directly in your HTML file. The more common/better practice is to have a separate file, but this is the simplest approach.

edited Sep 13, 2019 at 19:24

answered Sep 11, 2019 at 18:09

Anis R.

7,0022 gold badges17 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

david kennedy Over a year ago

Thanks for the advice. I have tried this a few different ways thus far with no luck. Starting to think maybe I just cant do this. In my hours of looking, I have yet to even find an example on someone else's site that works. We have a feature in our Pega app that does this but that requires one to be logged into Pega to use it.

Anis R. Over a year ago

@davidkennedy This snippet works fine on my browser. If you believe something is missing from this post, please clarify.

david kennedy Over a year ago

When I try to use this the top section just displays as text on the page. Could it possibly be that my browser is not compatible?

Anis R. Over a year ago

@davidkennedy The top section of the snippet is Javascript code. You should include it either in a JS file, or (more simply) inside the HTML document itself inside a script tag (<script>[the code here]</script>)

david kennedy Over a year ago

Thank you for your repeated help on this. Tried adding this to the html code and before it. Both ways it still does not append the entered text to the Url. I am not understanding how to combine java and html at all. I think I am just too dumb to make this work. :(

|

Collectives™ on Stack Overflow

How to complete a url using HTML form

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related