www.webdeveloper.com
Results 1 to 2 of 2

Thread: Populate link with text box value and execute

Hybrid View

  1. #1
    Join Date
    Jun 2007
    Posts
    96

    Populate link with text box value and execute

    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!

  2. #2
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    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>
    Last edited by ReFreezed; 01-21-2013 at 08:52 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles