javascript redirect chrome issue

Question

I been googling this question for sometime and I've found so many answers however I am STILL unable to get my code to function properly.

Here is my issue...

I have several radio buttons (see code below)

<form class="prov" id="province">
        <label>
            <input type="radio" id="on" name="prov" value="on" />
            <img src="on.png" width="164px" height="51px">
        </label>
        <label>
            <input type="radio" id="nl" name="prov" value="nl" />
            <img src="nl.png" width="297px" height="47px">
        </label>
        <label>
            <input type="radio" id="ns" name="prov" value="ns" />
            <img src="ns.png" width="253px" height="46px">
        </label>
        <label>
            <input type="radio" id="mb" name="prov" value="mb" />
            <img src="mb.png" width="197px" height="44px">
        </label>
        <label>
            <input type="radio" id="sk" name="prov" value="sk" />
            <img src="sk.png" width="311px" height="44px">
        </label>
        <label>
            <input type="radio" id="ab" name="prov" value="ab" />
            <img src="ab.png" width="165px" height="48px">
        </label>
        <label>
            <input type="radio" id="bc" name="prov" value="bc" />
            <img src="bc.png" width="351px" height="42px">
        </label>
            <button id="select" onclick="provSelect()">Submit</button>
        </form>

What I need this to do is once one of the "buttons" are selected and they click on the #select button on the bottom, I want them to be redirected to a specific page. Each radio button would have them directed to a different page.

Here is my Javascript.

function provSelect() {

var provMain = document.getElementById('province').prov;
var provinceMain;

for(var i = 0; i < provMain.length; i++) { 

    if(provMain[i].checked == 'on') {

        window.location = "test.html";


        }

    }
}

I will be honest, I had this working for IE however it refused to work in chrome no matter what I did. I played around with it alot and now the code doesnt work at all..

I mainly need this to work in IE and Chrome however if chrome is the only option I'd rather that.

Any help would be greatly appreciated.

Thank you!

see this post to read radio buttons http://stackoverflow.com/questions/1423777/javascript-how-can-i-check-whether-a-radio-button-is-selected — Dr. Aaron Dishno, Jan 14 '16 at 14:53
Could you create a fiddle, so I can try to reproduce the problem — wouter140, Jan 14 '16 at 15:02
Everyone I wanted to thank you!!! The contributions in combination somehow made it work!!! I thank you all:) — john b, Jan 14 '16 at 15:06

score 0 · Accepted Answer · answered Jan 14 '16 at 14:54

0

Try with this:

function provSelect() {

var provMain = document.getElementById('province').prov;
var provinceMain;

for(var i = 0; i < provMain.length; i++) { 

    if(provMain[i].checked) {

        window.location = "test.html";


        }

    }
}

the checked property has a boolean vaue. See: checked property

answered Jan 14 '16 at 14:54

pinturic

2,253
1
17
34

Hi Pinturic!Thank you for the quick response. This seems to work in IE but not chrome :( I can't figure out why... – john b Jan 14 '16 at 14:56
check id of each radio button for checked. – Dr. Aaron Dishno Jan 14 '16 at 14:59
I have tested this in chrome right now and it works. My suspect is that your problem is not here. – pinturic Jan 14 '16 at 15:04

score 0 · Answer 2 · answered Jan 14 '16 at 14:58

0

Your HTML is a bit off - you don't nest your input tags inside of your label tags. Instead, the for attribute of your label points to the id for the input:

Also, add type="button" to your button - this will prevent any accidental form submission.

Lastly, in your javascript function, change:

if(provMain[i].checked == 'on') {

to

if(provMain[i].checked) {

The checked property will be true if that radio button is selected. Since what you really want is to do something depending on which button is checked, you need to get the value of the checked radio button:

provMain[i].value

would return that for you to make decisions on.

Good luck!

answered Jan 14 '16 at 14:58

TwinFeats

422
1
6
11

Hi Twinfeats! Thank you for the info. The reason I have the label around the input is because the radio buttons have been changed to an image as opposed to the actual look o the radio button..strange i know but I thought it looked better. I changed the javascript as you said and it gives me the value which is great! however window.location is still not working in google chrome and IE...any suggestions? – john b Jan 14 '16 at 15:03
Try window.location.href = – TwinFeats Jan 14 '16 at 16:03

javascript redirect chrome issue

2 Answers2