javascript - How do I append a url typed into a input text field to an anchor then follow it when anchor is clicked? - Stack Ove

admin管理员组

文章数量:1220935

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

Share Improve this question Follow edited Sep 18, 2009 at 18:57 tvanfosson 532k102102 gold badges700700 silver badges799799 bronze badges asked Sep 18, 2009 at 18:46 TylorTylor 1

• 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

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 8

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;
});

});

本文标签：