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, Sep 11 '19 at 17:38
You should use a form handler backend, with either `
` or ``. — tim, Sep 11 '19 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, Sep 11 '19 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, Sep 11 '19 at 18:06
https://stackoverflow.com/questions/27195868/using-form-input-in-button-link and https://stackoverflow.com/questions/133925/javascript-post-request-like-a-form-submit — tim, Sep 11 '19 at 18:08
@tim I had a great deal of issues using the formaction function which is what led me to using this style of button. I read probably a dozen or more articles on how to use that function but I am not connecting the dots. Most of the different things I tried caused the page to just refresh rather than taking me to the url. — david kennedy, Sep 11 '19 at 18:10

Anis R. · Answer 1 · 2019-09-13T19:24:49.670

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 '19 at 19:24

answered Sep 11 '19 at 18:09

Anis R.

5,631
2
8
31

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. – david kennedy Sep 11 '19 at 18:27
@davidkennedy This snippet works fine on my browser. If you believe something is missing from this post, please clarify. – Anis R. Sep 11 '19 at 20:01
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? – david kennedy Sep 12 '19 at 18:30
@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 (``) – Anis R. Sep 12 '19 at 19:43
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. :( – david kennedy Sep 13 '19 at 13:49
@davidkennedy Check updated answer. This is how you can include Javascript code directly to your HTML. – Anis R. Sep 13 '19 at 19:25
that makes way more sense now. I even managed to learn how to change the font size and colors, etc. Now I am trying to make the field default to a certain value, trying to get it to append the default value. Will let you know if I figure it out. Thanks again. – david kennedy Sep 17 '19 at 12:32

How to complete a url using HTML form

1 Answers1