CODEWITHSUNDEEP
jqueryhtmlurlcheckboxradio-button
Mitya Ustinov
Mitya Ustinov

Reputation: 903

jQuery. Get parameter value from URL and check radiobutton

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!

Upvotes: 0

Views: 5952

Answers (2)

Mitya Ustinov
Mitya Ustinov

Reputation: 903

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!

Upvotes: 1

Greg
Greg

Reputation: 479

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.

Upvotes: 1

Related Questions