将表单从选择下拉字段更改为单选按钮并保留功能

Question

I have a form which redirects users depending on their selection of a group of select elements. I'm trying to convert this to use radio buttons instead of select lists, but retain the original functionality.

 <form>
 <p>option1 </p>
   <select id="option1">
   <option value="0" id="Select">Select</option>
    <option value="1" id="coffee">Coffee</option>
    </select>

    <p>option2</p>
    <select id="option2">
    <option value="0" id="Select">Select</option>
    <option value="1" id="White">White</option>
    <option value="2" id="Black">Black</option>
    </select>

        <p>option3</p>
    <select id="option3">
     <option value="0" id="Select">Select</option>
    <option value="1" id="std">STD</option>
    <option value="2" id="300">300</option>
    <option value="3" id="500">500</option>
    </select>

        <p>option4</p>
    <select id="option4">
    <option value="0" id="Select">Select</option>
    <option value="1" id="america">America (NT - ST)</option>
    <option value="2" id="australia">Australia and Oceania</option>
    </select>
<br><br>


    <input  onclick="goToPage();"  type="button" value="Submit" />
        </form>

<script type="text/javascript">

function goToPage()
{
  var option1 = document.getElementById("option1").value;
  var option2 = document.getElementById("option2").value;
  var option3 = document.getElementById("option3").value;
  var option4 = document.getElementById("option4").value;

 if (option1==1 && option2==1 && option3==1 && option4==1) { window.location = "http://www.testint.com/us"; }
else if (option1==1 && option2==2 && option3==3 && option4==2) { window.location = "http://www.testing.com/au"; }
}
</script>

Answer 1

Demo

Basically replace all <option>s with <input type="radio">s
Where each <option> of group <select id="X"> becomes an <input name="X">

What this will do is create a group for each of the old <select>s.
Then, to get the values we must get all the radio buttons of that group ( getElementsByName ) and find out which one is checked ( getValue ).

Now you can do what ever you want with the values!

CODE:

<form id="form">
    <p>option1 </p>
    <input type="radio" name="option1" value="0" id="Select" />Select
    <input type="radio" name="option1" value="1" id="coffee" />Coffee

    <p>option2</p>
    <input type="radio" name="option2" value="0" id="Select" />Select
    <input type="radio" name="option2" value="1" id="White" />White
    <input type="radio" name="option2" value="2" id="Black" />Black

    <p>option3</p>
    <input type="radio" name="option3" value="0" id="Select" />Select
    <input type="radio" name="option3" value="1" id="std" />STD
    <input type="radio" name="option3" value="2" id="300" />300
    <input type="radio" name="option3" value="3" id="500" />500

    <p>option4</p>
    <input type="radio" name="option4" value="0" id="Select" />Select
    <input type="radio" name="option4" value="1" id="america" />America (NT - ST)
    <input type="radio" name="option4" value="2" id="australia" />Australia and Oceania

    <br/><br/>
    <input  onclick="goToPage();"  type="button" value="Submit" />
</form>

function getValue(radios) {
    for (var index = 0; index < radios.length; ++index) {
        if (radios[index].checked)
            return radios[index].value;
    }
    return null;   
}

function goToPage() {
    var option1 = getValue(document.getElementsByName("option1"));
    var option2 = getValue(document.getElementsByName("option2"));
    var option3 = getValue(document.getElementsByName("option3"));
    var option4 = getValue(document.getElementsByName("option4"));

    //demo option1's value
    alert(option1);

    /*your code here
    if (option1==1 && option2==1 && option3==1 && option4==1)
        window.location = "http://www.testint.com/us";
    else if (option1==1 && option2==2 && option3==3 && option4==2)
       window.location = "http://www.testing.com/au";
    */
}

Answer 2

HTML:

<form>
    <p>option3</p>
    <input type="radio" name="option3" id="std" />STD
    <input type="radio" name="option3" id="300" />300
    <input type="radio" name="option3" id="500" />500

     <p>option4</p>
     <input type="radio" name="option4" id="america" />America (NT - ST)
     <input type="radio" name="option4" id="australia" />Australia and Oceania
     <input type="button" onclick="goToPage();" value="Submit" />
</form>

JS:

function goToPage() {
    var option3 = document.getElementsByName("option3");
    var option4 = document.getElementsByName("option4");

    // if "300" and "America (NT - ST) is checked
    if (option4[0].checked && option3[1].checked) {
        // do something
    }
});

Answer 3

Try this (see JSFidle ):

JS

// Taken from http://stackoverflow.com/questions/1682964/in-javascript-how-can-i-get-all-radio-buttons-in-the-page-with-a-given-name
function getCheckedValue(groupName) {
    var radios = document.getElementsByName(groupName);
    for (var i = 0; i < radios.length; i++) {
        if (radios[i].checked) {
            return radios[i].value;
        }
    }
    return null;
}

function goToPage() {
    values = [];
    for (var j = 1; j < 5; j++) {
        values[j] = getCheckedValue("option" + j);
    }
    if (values[1] == 1 && values[2] == 1 && values[3] == 1 && values[4] == 1) {
        window.location = "http://www.testint.com/us";
    } else if (values[1] == 1 && values[2] == 2 && values[3] == 3 && values[4] == 2) {
        window.location = "http://www.testing.com/au";
    }
}

HTML

<form>
    <p>option1</p>
    <input type="radio" name="option1" value="1" />Coffee
    <p>option2</p>
    <input type="radio" name="option2" value="1" />White
    <input type="radio" name="option2" value="2" />Black
    <p>option3</p>
    <input type="radio" name="option3" value="1" />STD
    <input type="radio" name="option3" value="2" />300
    <input type="radio" name="option3" value="3" />500
    <p>option4</p>
    <input type="radio" name="option4" value="1" />America (NT - ST)
    <input type="radio" name="option4" value="2" />Australia and Oceania
    <br />
    <br />
    <input onclick="goToPage();" type="button" value="Submit" />
</form>

This works pretty well because your input names are 1-5 so we can just loop over those numbers to find the results (though naming them 0-4 would be nicer!). If you need to add more groups, then just increase the value at j < 5