Question

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.

Answer 1

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.