change link href attribute with html() function

Question

If i have a link in my page.I want to change its href attribute after some event is triggered how i can do that

Button

<a id="btn-start" href="/dashboard/save/{{ pk }}" class="btn btn-primary btn-embossed">Save Reward</a>

Javascript

$( "#sortable1 div" ).sortable({
        connectWith: "div",
        stop: function( event, ui ) {

            if($('#sortable2').find('img').length==6) {
                $('#btn-start').html("<a id='btn-start' href='/dashboard/redeem/{{ pk }}' class='btn btn-danger' >Redeem Coupon</a>");
            }
        }
    });

Answer 1

html() will change the inner HTML of your element. As a result, your code adds another <a> element inside your #btn-start element.

You can use the prop() function to change the actually HTML property (and attribute):

if($('#sortable2').find('img').length == 6) 
{
    $('#btn-start').prop('href', '/dashboard/redeem/{{ pk }}');
}

Answer 2

$('#btn-start').attr ('href', "http://sample");

Answer 3

As per your code you change href,class and innerhtml of "#btn-start".If its below is the working code

 $('#btn-start').attr('href=','/dashboard/redeem/{{ pk }}')
 .attr('class','btn btn-danger').html('Redeem Coupon');