Load URL on radio button select using javascript

Question

I am currently using this HTML and Javascript snippet to reload a page when somebody changes the dropdown...

  <select id="dropdown">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>

   var orderby = jQuery('#dropdown');
        var str;
        orderby.change(function(){
        str = jQuery(this).val();
        window.location.href = "http://www.example.com?variable="+str;
    });

Now I am trying to change this so that it works for a radio button instead, my HTML looks like...

<input type="radio" id="1" value="1"> 1
<input type="radio" id="2" value="2"> 2
<input type="radio" id="3" value="3"> 3

These are three seperate items so I haven't been able to work out how to modify my js snippet to be compatible, can anyone help?

PeterKA · Accepted Answer · 2015-03-04T17:44:12.400

HTML:

<input type="radio" name="myradio" id="1" class="myradio" value="1"> 1
<input type="radio" name="myradio" id="2" class="myradio" value="2"> 2
<input type="radio" name="myradio" id="3" class="myradio" value="3"> 3

jQuery:

$(function() {
    $('.myradio:not(:checked)').on('change', function() {
        window.location.href = "http://www.example.com?variable=" + this.value;
    });
});

Concept Verification

    $(function() {
        $('.myradio:not(:checked)').on('change', function() {
            alert( this.value );
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="myradio" id="1" class="myradio" value="1"> 1
    <input type="radio" name="myradio" id="2" class="myradio" value="2"> 2
    <input type="radio" name="myradio" id="3" class="myradio" value="3"> 3

score 0 · Answer 2 · answered Mar 04 '15 at 17:52

Try this:

$(function() { 
    $("#r1, #r2, #r3").change(function () { 
        str = $(this).val();
        window.location = "http://www.example.com?variable=" + str;
    })
});`

<input type="radio" id="r1" value="1"> 1</input>
<input type="radio" id="r2" value="2"> 2</input>
<input type="radio" id="r3" value="3"> 3</input>

score -1 · Answer 3 · edited May 23 '17 at 10:28

First of all, your radios are missing the name attribute, to know the radio button group's name. After you put the name try something like this

jQuery("input:radio[name=GroupName]").click(function() {
    var value = jQuery(this).val();
    window.location.href = "http://www.example.com?variable="+value;
});

If you want cross-browser compatibility (But uses more DOM):

jQuery("input:radio[name=GroupName]").click(function() {
    var value = jQuery('input:radio[name=theme]:checked').val();
    window.location.href = "http://www.example.com?variable="+value;
});

Check this question for more: In jQuery, how do I select an element by its name attribute?

Also, before posting a question, you should really research first, because most questions are already answered, all you need is to adapt.

Load URL on radio button select using javascript

3 Answers3