setting location.href does not work from a <a> click

Question

This is code I took over from a colleague who left:

<input type="text" class="value" placeholder="0"></span><br>
<a href="/model/act/id/'.$model->id.'" class="act act-a" url="/model/act/id/'.$model->id.'">Act Now</a>

<script>
    $('.act-a').click(function(){
        if(parseInt($('.value').val())>0){
            //window.location.href = window.location.origin + $(this).attr('url') + '?r=' + parseInt($('.value').val());
            window.location.replace("www.google.com");
            return true;
        }
        return false;
    });
</script>

When I click on the link, I never get redirected to www.google.com. Originally what I want is to execute the commented code, but setting www.google.com to debug, I think to realize that my redirection is being ignored, and instead the original href from the is used!

How can I set window.location.href when a link has been clicked, adding a GET parameter?

return true; tells the browser to do the link's default action. Remove both the return statements, and instead add e.preventDefault(); (make sure to change the .click to $('.act-a').click(function(e){). — gen_Eric
– gen_Eric, Commented Sep 4, 2012 at 16:40
@Rocket What is the reson to use e.preventDefault() instead of return false? — Viktor S.
– Viktor S., Commented Sep 4, 2012 at 16:42
@Rocket me too) It was just interesting - maybe I'm missing something. — Viktor S.
– Viktor S., Commented Sep 4, 2012 at 16:43
FYI: preventDefault just stops the default event action from happening, while return false also stops bubbling (does both preventDefault and stopPropagation) — gonchuki
– gonchuki, Commented Sep 4, 2012 at 16:47

gen_Eric · Accepted Answer · 2012-09-04 16:42:11Z

2

return true; tells the browser to do the link's default action. So, the browser is following the link instead of running window.location.

Remove both the return statements, and instead add e.preventDefault();

$('.act-a').click(function(e){
    e.preventDefault();
    if(parseInt($('.value').val(), 10) > 0){
        window.location.href = window.location.origin + $(this).attr('url') + '?r=' + parseInt($('.value').val(), 10);
    }
});

P.S. You should add ,10 to parseInt to make sure the number is parsed as base 10.

answered Sep 4, 2012 at 16:42

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

unsafe_where_true Over a year ago

That works marvelously, thanks! I am using preventDefault because in both cases I override the link: if the value is not set, it's supposed to do nothing; if the value is set, I need to pass it as a GET param. If I understand correctly, this means that if some other handler down the road is hooked to the event, it would continue executing if I don't use 'return'; as I know there's no other handler I like the preventDefault (thanks gonchuki and +1 for explanation)

gen_Eric Over a year ago

@fablife: I'm pretty sure return false would stop all other handlers, whereas preventDefault just stops the default action.

Salketer · Accepted Answer · 2012-09-04 16:50:01Z

Change reutrn true after window.location to return false;

$('.act-a').click(function(){
    if(parseInt($('.value').val())>0){
        //window.location.href = window.location.origin + $(this).attr('url') + '?r=' + parseInt($('.value').val());
        window.location.replace("www.google.com");
        return false;
    }
    return false;
});

Returning false on events such as click, submit and others prevent the default behavior of such event. Use return true only if you want to run a function and then let the event propagate to the other regular listeners such as following a link's href, continue normal form submission etc... This article is helpful for event bubbling basics: http://www.quirksmode.org/js/events_order.html

Collectives™ on Stack Overflow

setting location.href does not work from a <a> click

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related