How do I add a string value of an href using jquery?

Question

I have a input button that has an href. I need to add a string after the last / in the href from an input text box. How can this get accomplish using jquery? Here is the code:

//This is the Search Button
$('#switch-fighter-search-button-link').attr("href","/fighters/search/");

//This is the Input box
var sft = $('$switch-fighter-text').val();

Answer 1

$('#switch-fighter-search-button-link').attr("href","/fighters/search/" + $('$switch-fighter-text').val());

Answer 2

Try this:

$('$switch-fighter-text').keyup(function(){

     $('#switch-fighter-search-button-link').get(0).href = 
                                                 "/fighters/search/"+this.value;

});

This will update on the search box change

Answer 3

Grab both values and concatenate them (separated by a?, I'm guessing), like so:

var head = $('#switch-fighter-search-button-link').attr("href"); // get existing href
var tail = $('#switch-fighter-text').val(); // get input value
var nhref = head + '?' + tail  // join them together, separated by a ? character
$('#switch-fighter-search-button-link').attr('href', nhref); // update the button with the new href value

Answer 4

Append the string.

//save the base string somewhere at the beginning of your jquery
var basehref = $('#switch-fighter-search-button-link').attr("href","/fighters/search/");

//add a event handler when the text box is changed to update the button
$('#switch-fighter-text').change(function() {
    var sft = basehref + $(this).val();

    $('#switch-fighter-search-button-link').attr("href", sft);
});