Change form from select dropdown field to radio button and keep functionality

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>

Hashbrown · Answer 1 · 2013-07-24T07:56:45.850

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";
    */
}

score 0 · Answer 2 · answered Jul 24 '13 at 07:43

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
    }
});

Ian Clark · Answer 3 · 2013-07-24T08:20:51.287

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

Change form from select dropdown field to radio button and keep functionality

3 Answers3