CODEWITHSUNDEEP
javascriptjqueryhtml
dingo_d
dingo_d

Reputation: 11670

Replace href on select change

I have a select element with options with values that are some numbers (some id's).

<select id="select">
    <option value="21">Random<option>
    <option value="23">Random 2<option>
    <option value="25">Random 3<option>
    <option value="27">Random 4<option>
</select>

Next to it is a submit button that will preform some kind of submit.

<a class="button" href="www.random.org">Click me!</a>

I need to add the ?id= to that link, with the id value of the select. I created the code, but the issue is that it just appends the ?id= every time I change the select the option

var id;
$('#select').on('change', function(){
    id = $(this).val();
    var new_href = $('.button').attr('href') + '?id=' + id;
    $('.button').attr('href', new_href);
});

So when I click on first option I get, for the href

www.random.org?id=21

But if I click on second one (or any for that matter) I get

www.random.org?id=21?id=23

It appends the id. How to 'clear' the previous id on change, and replace with the selected one? What am I doing wrong?

Upvotes: 4

Views: 5419

Answers (6)

stanze
stanze

Reputation: 2480

Check this Demo

$('#select').on('change', function() {
    var aLink = $('.button'),
        selVal = $(this).val(),
        staticLink = "www.random.org";
        //alert(selVal)
    $(aLink).attr('href', staticLink + "?id=" + selVal);    
})

Upvotes: 0

Cagatay Ulubay
Cagatay Ulubay

Reputation: 2559

Respecting every other answer, I would prefer a small amount of code:

$('#select').on('change', function(){
    $( '.button' ).attr( 'href', $( '.button' ).attr( 'href' ).split( '?id=' )[0] + '?id=' + $( this ).val() );
});

This code actually splits the href when a ?id= exists and gives you only the part before it. When there is no ?id= than you get the normal href and after this, you just add ?id= and $( this ).val() to the href. (It's already in the code that I wrote)

That's it. No RegEx, Wordarounds or more lines of code than needed.

Upvotes: 1

Oleksandr T.
Oleksandr T.

Reputation: 77482

You can pass to .attr function as second argument, where you can replace url for .button, like so 

$('#select').on('change', function(){
    var id   = $(this).val();

    $('.button').attr('href', function (index, value) {
        // if there is id in url - replace it, else add id to url
        return /\?id=/.test(value) ? value.replace(/id=(\d+)/, 'id=' + id) : (value + '?id=' + id);
    });
});

Example

Upvotes: 1

Den Random stuff
Den Random stuff

Reputation: 179

$target = $(".target");

$button = $(".button");

With jQuery you can $target.attr('href', $button.data('href-url') + '?id=' + id))

Upvotes: 0

Akash Chavda
Akash Chavda

Reputation: 1227

you can try like this change button link 

<a class="button" href="www.random.org" data-link="www.random.org">Click me!</a>

and change javascript like this

var id;
$('#select').on('change', function(){
    id = $(this).val();
    var new_href = $('.button').data('link') + '?id=' + id;
    $('.button').attr('href', new_href);
});

I think it's helpful to you.

Upvotes: 1

Alexey
Alexey

Reputation: 3637

This should work.

var id;
var original_link = "www.random.org";
$('#select').on('change', function(){
    $('.button').attr('href', original_link);
    id = $(this).val();
    var new_href = $('.button').attr('href') + '?id=' + id;
    $('.button').attr('href', new_href);
});

Upvotes: 8

Related Questions