I want to have a text field where people can type in a value. Then I want to have a href open a url with the text field appended to the end.

So if the text field says "elephant" then when they click the link, a page will open with at example/elephant.

I think javascript would be the easiest way to accomplish this but I just don't know how.

I want to have a text field where people can type in a value. Then I want to have a href open a url with the text field appended to the end.

So if the text field says "elephant" then when they click the link, a page will open with at example.com/elephant.

I think javascript would be the easiest way to accomplish this but I just don't know how.

• javascript
• jquery
• html
• forms

• Apparently I don't have enough reputation to edit a question yet so I am just going to suggest a change here. I believe that jquery should be removed from the list of tags. His question is completely library agnostic and yet having the jquery tag on the question has already skewed several of the answers towards using JQuery. If the question was written as "How can I do this in JQuery?", then I think the tag would be appropriate. Since it isn't, then I believe it should be removed. – Eric Ryan Harrison Commented Sep 18, 2009 at 20:18

5 Answers 5

I'm assuming that you have some HTML like the following and want to append the contents of the appendUrl input field to the url in the anchor tag when the anchor tag is clicked.

<a href="/base/url" id="baseUrl">Link Text</a>
<input type="text" id="appendUrl" />

Then, using jQuery, it would look something like:

$(function() {
    $('#baseUrl').click( function() {
        window.location = $(this).attr('href') + '/' + $('#appendUrl').val();
        return false;
    });
});

The basic idea is to extract the value of the input and append it to the url in the href. Use the value so constructed to set the location of the current window. I return false in the click handler to prevent the default action (the base url alone) from being taken.

<input type="text" id="suffix" />
<a href="http://example.com/" onclick="document.location.href = $(this).attr('href')+$('#suffix').val(); return false;">click me</a>

Here is a library agnostic version of what you want:

Your HTML:

<input type="text" name="url_param" id="url_param" />
<input type="button" onclick="prepare_link();" value="Do it!" />

<a href="http://whatever.com" id="target_link">Click Your New Link!</a>

Your Javascript:

<script type="text/javascript">
     function prepare_link() {
          var url_param = document.getElementById('url_param');
          var target_link = document.getElementById('target_link');

          if ( ! url_param.value ) {
               return false;  
          }

          target_link.href = target_link.href + '/' + escape(url_param.value);
     }
</script>

This is not the cleanest way to write the code and not how I would do it, but I tried to make it as simple as possible in the most generic way so that you'd be able to understand the code.

You want to ensure that you don't break the URL because someone decided to put in special characters.

So make sure to wrap #appendURL with a URLEncode/Decode plugin such as this one URLEncode

HTML

<a href="/base/url" id="stndrUrl">Sample text</a><input type="text" id="appendUrl" name=""/>

JQUERY

 $(document).ready(function(){
   $('#stndrUrl').click( function() {
    window.location = $(this).attr('href') + '/' + $('#appendUrl').val();
    return false;
});

});