根据单选按钮有条件地重定向

Question

I would like to know if there is a way in HTML5 to take a user to a particular page based on what the user chooses for a radio button selection using HTML5.

For example if the user chooses the "male" radio button and hits submit, then I want to take him to .../male.html or if female is chosen and then submit is clicked then take her to .../female.html

If its not possible to do this in HTML5, I could figure something out in javascript despite my lack of experience with that language. However, I don't know how I would implement the code to only run when submit is pressed, could you give me a little guidance?

As a sidenote, I don't wish to use any jQuery or other libraries. I want it to be either HTML5 if possible, or plain javascript.

Answer 1

HTML(5):

<form id="form">
    <input type="radio" name="gender" id="gender-male" value="Male" />
    <input type="radio" name="gender" id="gender-female" value="Female" />
</form>

JS(5):

var submit = function (e) {
    if (e.preventDefault) {
        e.preventDefault();
    }

    if (document.getElementById('gender-male').checked) {
        window.location = 'male.html';
    } else if (document.getElementById('gender-female').checked) {
        window.location = 'female.html';
    }

    return false;
};

window.onload = function () {
    var form = document.getElementById('form');

    if (form.attachEvent) {
        form.attachEvent('submit', submit);
    } else {
        form.addEventListener('submit', submit);
    }
}

Answer 2

Have created a jsfiddle to demonstrate how it could be done with HTML and Javascript. There's no way to do it with just HTML.

http://jsfiddle.net/benwong/W4FVC/

HTML

<input id="MaleRadio" type="radio" name="sex" value="male" checked="checked">male</input>
<input id="FemaleRadio" type="radio" name="sex" value="female">female</input>
<input id="SubmitButton" type="submit" value="submit" />

Javascript

var maleRadio = document.getElementById("MaleRadio"),
    femaleRadio = document.getElementById("FemaleRadio"),
    submitButton = document.getElementById("SubmitButton");

submitButton.addEventListener("click", function () {
    if (maleRadio.checked) {
        alert('male');
        window.location = "male.html";
    } else {
        alert('female');
        window.location = "female.html";
    }
}, false);