Populate link with text box value and execute

**dntel** · 01-21-2013 04:06 AM

Hi Guys,

I'm trying to build a very simple script that takes the value from a text box and places it within a link (as a parameter) then execute the link afterwards.

So the link would basically look like this

Code:

http://request.com/action.jsp?parameter={{insert}}

And the value from the text will be placed where {{insert}} is.

And a value from a text box :

Code:

<input type="text" name="tube" id="linkText">

So far I have got this:

Code:

<html>

<head>

<script>

var link = document.getElementById('linkid'),
  textBox = document.getElementById('textInputId');
function setLinkParam() {
  link.href = 'http://request.com/action.jsp?parameter=' + textBox.value;
}
textBox.addEventListener('change', setLinkParam);

</script>

</head>

<body>

<input type="text" id="textInputId"></input>
<a href="http://event.com/action.jsp?param=" id=""linkid">Link</a>
 <input type="submit" value="Submit" action"setLinkParam()">

</body>

</html>

But I'm not sure what bit I have wrong, can someone point me in the right direction and tell me why it doesn't (this is a learning exercise).

Cheers!

**ReFreezed** · 01-21-2013 07:46 AM

I see are several problems with the code:

· The linkid and textInputId elements does not exist by the time you're calling getElementById. Moving those calls inside the setLinkParam function would solve that problem. The addEventListener call won't work either for the same reason.
· Input tags are self-closing, so <input></input> should be <input />.
· There is an extra quotation mark where you specify the ID for the <a> tag.
· The equal sign after the input's action attribute is missing.
· Input elements does not have an action attribute - only form elements do!

Now, to clarify, do you want to actually follow the link or do you want to submit a form? Here's an example how you can go to a new page without using a link:

Code:

<!DOCTYPE html>
<html>
  <head>
    <script>

    function goToUrl() {
      var textBox = document.getElementById('paramInput');
      var value = encodeURIComponent(textBox.value); //encode special characters
      location.href = 'http://request.com/action.jsp?parameter='+value; //goto URL
    }

    </script>
  </head>
  <body>
    <div>
      <input type="text" id="paramInput" />
      <input type="button" value="Go to page" onclick="goToUrl();" />
    </div>
  </body>
</html>

Thread: Populate link with text box value and execute

Thread Tools

Display

Populate link with text box value and execute

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions