Can't redirect to a page after radio button selection

Question

I have the following HTML to give two radio button options. If the user selects one option and click submit, it will go to the corresponding page.

<script src="js/jump.js"></script>

<form onsubmit="jump()">
<input type="radio" name="querytype" value="apple">Go to Apple page<br>
<input type="radio" name="querytype" value="orange">Go to Orange page<br>
<input type="submit" value="OK">
</form>

In the JS file jump.js, I have the following function:

function jump() {
    var selected = document.getElementsByName('querytype');

    for(var i=0; i<selected.length; i++) {
    var value = selected[i].value;
    if (selected[i].checked) {
        if (value === 'apple') {
        window.location.href = '/myapp/apple-page';
        } else {
        window.location.href = '/myapp/orange-page';
        }
    } 
    }
}

But this is not working. When I make a choice and submit it, it doesn't go to either "Apple" or "Orange" page, but it shows a blank page. How do I make it happen?

Are you sure the function is running? Are there any errors in the JS console? — Barmar, Sep 14 '13 at 20:05
I debugged using Firebug and I'm sure the function is properly loaded after the HTML page is loaded. The interesting thing is: In the Firebug debug mode, if I put a breakpoint in jump(), I can get the page redirected for a short moment. But in normal mode, it doesn't work. Also, in Chrome browser debugger, even in debug mode, it doesn't redirect to the page. Very weird. — tonga, Sep 14 '13 at 20:08
From your comment in the deleted answer, I suspect the issue is with a rewrite rule on server. — Barmar, Sep 14 '13 at 20:10
I think the webserver is translating `/myapp/apple-page` into `/myapp?querytype=apple`. Rewrite rules are in the .htaccess file. http://www.addedbytes.com/articles/for-beginners/url-rewriting-for-beginners/ — Barmar, Sep 14 '13 at 20:15
So do I need to write some server-side code to respond the "submit" request? In that case, do I need to add something like `action="xxx" method="post"` in `
` element to handle the request? The current code is purely client-side. — tonga, Sep 14 '13 at 20:19
If I'm guessing right, you need to remove the code that's doing this rewrite. — Barmar, Sep 14 '13 at 20:20

score 1 · Accepted Answer · answered Sep 15 '13 at 11:16

1

According to your code, I understand that you only want to redirect to Page X or Y according to user choice. If this is the case then you have to change the "Submit" button type to "Button" like this:

<input type="button" onclick="jump()" value="ok">

and remove the attribute onsubmit="jump()" from the form tag.

answered Sep 15 '13 at 11:16

Scription

646
3
12
21

sweet! This works finally. What's the difference between `type="button"` and `type="submit"` for radio button? And why my original code using `onsbumit` doesn't redirect? – tonga Sep 16 '13 at 15:20
1

@tonga - somebody has already asked this before, please look at http://stackoverflow.com/questions/290215/difference-between-input-type-button-and-input-type-submit – Scription Sep 16 '13 at 18:55
Thanks. I understand that `button` doesn't submit unless it is associated with some JavaScript functions. But I still don't understand why `type="submit"` doesn't work in my case. Any ideas? – tonga Sep 16 '13 at 20:23

score 0 · Answer 2 · answered Sep 14 '13 at 19:57

0

Put return false at the end of jump() to prevent the default form submission action.

answered Sep 14 '13 at 19:57

Barmar

741,623
53
500
612

Can't redirect to a page after radio button selection

2 Answers2