jQuery. Get parameter value from URL and check radiobutton

Question

I'm trying to automatically check radio buttons basing on parameters' values in URL. These parameters were added into URL after user selected some values and submitted the form on the previous page. On the next page there is a form with the same and some other inputs. What I want to do, is to check the same values, that user have chosen on the previous page for the radios.

Lets say I have this URL for the page two: domain.com/page.html?checkbox-one=1&checkbox-two=0

In this page I have radio inputs:

    <input type="radio" name="checkbox-one" value="0" id="radio1" />
    <label for="radio1">Radio#1</label>

    <input type="radio" name="checkbox-one" value="1" id="radio2" />
    <label for="radio2">Radio#2</label>

    <input type="radio" name="checkbox-two" value="0" id="radio3" />
    <label for="radio3">Radio#3</label>

    <input type="radio" name="checkbox-two" value="1" id="radio4" />
    <label for="radio4">Radio#4</label>

In this case I want to see name="checkbox-one" value="1" and name="checkbox-two" value="0" checked.

PHP solution is not desirable, so how do I achieve this with jQuery. Is there way to read URL parameter values and check radio buttons basing on them?

Thank you!

score 1 · Accepted Answer · edited May 23 '17 at 12:33

This post shows how to get a parameter value from the URL

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

You can then loop through the checkboxes and see if they should be checked or not.

$("input[type=radio]").each(function() {
      var currInputName = $(this).attr('name');

      if(getParameterByName(currInputName) == '1'){
          $(this).prop("checked", true);
      }
});

You should note that you can only check 1 radio box at a time.

Thanks for your answer, it was helpful and gave me an idea on how to proceed further. Please see my solution, which is using jQuery alternative. — Mitya Ustinov, Jan 17 '14 at 22:30

score 1 · Answer 2 · answered Jan 17 '14 at 22:27

Accepted answer was very helpful, but jQuery usage is preferable in my case, so I used a bit different solution. Here I found a nice snippet, which I have slightly modified for my purposes.

// Getting query string parameters
var vars = [], hash;
var query = document.URL.split('?')[1];
if(query != undefined){
    query = query.split('&');
    for(var i = 0; i < query.length; i++){
        hash = query[i].split('=');
        vars.push(hash[1]);
        populateRadios();
    }
};

// Checking radio buttons
function populateRadios() {
    $("input[type=radio]").each(function() {
        $('input[name="' + hash[0] + '"][value="' + hash[1] + '"]').prop('checked', true);
    });
};

The snippet deconstructs the query string and "puts" parameters and their values into separate hashes. Then radio buttons checking function is called and that's it.

I'll appreciate your comments and improvement suggestions. Thank you!

jQuery. Get parameter value from URL and check radiobutton

2 Answers2