Doing URl redirects inside a jQuery statement

Question

I have this jQuery code:

jQuery( document ).ready( function( $ ) {
$('#myform').submit( function() {

    if ($('#myform input').is(':checked')) {

    } else {
        //alert('Checkbox is not checked!!');
        window.location.replace("http://example.com/product-comparisons/?product-skus=0");

    }

 });

});

I want to redirect to this URL:

http://example.com/product-comparisons/?product-skus=0

If the user clicks the check box without any checked items.

I tried the above code based on this suggestion: How to redirect to another webpage in JavaScript/jQuery?

But that won't work. I would appreciate for any inputs and suggestions. Thank you!

UPDATE: This is my HTML COde/a form:

<form action="/product-comparison/" id="myform">
<ul>
<li>
<input type="checkbox" name="product-skus[]" value="1" id="mycheckbox">
<a href="http://example.com/product/translator/">Translator</a>100<img width="150" height="150" title="View product" style="" alt="View product" class="attachment-thumbnail" src="http://example.com/wp-content/uploads/2012/12/pic1-150x150.jpg"></li>
<li><input type="checkbox" name="product-skus[]" value="2" id="mycheckbox">
<a href="http://example.com/product/arrows/">Arrows</a>120<img width="150" height="150" title="View product" style="" alt="View product" class="attachment-thumbnail" src="http://example.com/wp-content/uploads/2012/12/pic2.jpg"></li></ul>

<input type="submit" value="Compare">

</form>

However I believe my selector is correct because this diagnostic code (using alerts to make sure jQuery funnels to the right logic) is perfectly working:

jQuery( document ).ready( function( $ ) {
$('#myform').submit( function() {

    if ($('#myform input').is(':checked')) {
        alert('Checkbox is checked, do nothing');
    } else {

        alert('Checkbox is not checked!!, do the redirects');


    }

 });
});

Supply the html code, I think that the selector is not correct. — SaidbakR, Dec 10 '12 at 06:58
Did you try to debug the $('#myform input').is(':checked') ? $('#myform input') will return an array of input elements, then may cause the last function is(':checked') incorrect. — Blue Smith, Dec 10 '12 at 07:02
There is an error in the JS console but I can't catch the exact error after submitting the form. is there a way to pause the code execution? — Emerson Maningo, Dec 10 '12 at 07:21
OK I got the error, this is the error shown on the Firebug console: "Permission denied to shadow native property" — Emerson Maningo, Dec 10 '12 at 07:25
My opinion for your updated code: 1) you used one ID for two elements (mycheckbox), ID should be unique for elements. 2) You can try the condition to ($("#myform input[name='product-skus[]']:checked").length > 0) instead of ($('#myform input').is(':checked')) — Blue Smith, Dec 10 '12 at 08:18

score 0 · Accepted Answer · answered Dec 10 '12 at 08:42

0

if you submit your form, you submit to another document. This means in order to get to another location you can either set it by document.location.replace AND cancel the form submission ( return false; should be enough )

or you manipulate the action (target url) of your form. Positive side-effect would be, that any data typed into your form would actually be submitted in both cases (default and alternate action)

answered Dec 10 '12 at 08:42

Michel Feldheim

17,625
5
60
77

Thanks Michel..Actually at the end, I make the solution a bit more simpler. I simply disable the submit button if a user won't be checking anything on the checkbox. This will prevent the form to be submitted. Anyway I get a lot of insight from your answer that leads me to the correct problem resolution. I marked this one as the answer. – Emerson Maningo Dec 10 '12 at 12:00

KingKongFrog · Answer 2 · 2012-12-10T18:22:27.323

-1

Try the following. Add a return false after the redirect:

jQuery( document ).ready( function( $ ) { $('#myform').submit( function() {

if ($('#myform input').is(':checked')) {

} else {
    //alert('Checkbox is not checked!!');
    window.location.replace("http://example.com/product-comparisons/?product-skus=0");
    return false; //Add this
}

}); });

edited Dec 10 '12 at 18:22

answered Dec 10 '12 at 06:59

KingKongFrog

13,946
21
75
124

It's strange, both window.location.replace and window.location.href does not work. I'm using Ubuntu OS in Firefox, Chromium and Chrome. They all didn't work..Did I miss something? – Emerson Maningo Dec 10 '12 at 07:07
thats because that portion of your code is fine. Something else is screwy, like your jQuery(document).ready or your selector is off. – Alan Dec 10 '12 at 07:09
I have updated my original question with additional information. Thanks for the help. – Emerson Maningo Dec 10 '12 at 07:14

Doing URl redirects inside a jQuery statement

2 Answers2