Check radio button according to link in url

Question

I have created E-commerce website custom with PHP OOP. There is a question form, In the first question there are 3 checkboxes:

 1. Daily
 2. Weekly
 3. Monthly

And in my homepage, there are 3 <a> link buttons:

 1. Order Daily
 2. Order Weekly
 3. Order Monthly

I want that when I click on Order Daily then it is directing me to question form page but It should select by default Daily radio button, same with 2 other buttons and 2 other radio buttons. I don't know how can i do this. Here are screenshots:
See Screenshot 1
See Screenshot 2
Now, See in the 2nd screenshot, that I have put links in those 3 buttons to select by default accoring to button link defaultSelect="monthly", defaultSelect="weekly" & defaultSelect="daily"but I don't know how to make it work in jQuery.
Here is homepage html code:

<div>
    <a class="btn btn-sm btn-danger" href="customize-package.php?questions=<?php echo $result['pro_id']; ?>&defaultSelect=monthly">Order Monthly</a>
</div>
<div>
    <a class="btn btn-sm btn-danger" href="customize-package.php?questions=<?php echo $result['pro_id']; ?>&defaultSelect=weekly">Order Weekly</a>
</div>
<div>
    <a class="btn btn-sm btn-danger" href="customize-package.php?questions=<?php echo $result['pro_id']; ?>&defaultSelect=daily">Order Daily</a>
</div>

Here is questions form html code:

<div class="select_package_validity">
    <h5 class="h5-responsive font-weight-bold q1_text"></h5>
    <div class="package_validity_child">
        <div class="custom-control custom-radio custom-control-inline ml-4 plan_name_daily">
            <input type="radio" class="custom-control-input plan_name" id="daily" name="plan_name_selector" value="Daily">
            <label class="custom-control-label" for="daily">Daily</label>
        </div>
        <div class="custom-control custom-radio custom-control-inline ml-4 plan_name_weekly">
            <input type="radio" class="custom-control-input plan_name" id="weekly" name="plan_name_selector" value="Weekly">
            <label class="custom-control-label" for="weekly">Weekly</label>
        </div>
        <div class="custom-control custom-radio custom-control-inline plan_name_monthly">
            <input type="radio" class="custom-control-input plan_name" id="monthly" name="plan_name_selector" value="Monthly">
            <label class="custom-control-label" for="monthly">Monthly</label>
        </div>
    </div>
    <input type="hidden" name="plan_name" class="form-control selected_plan_name" />
</div>

Here is jQuery code:

$('input[name="plan_name_selector"]:first').attr("checked", true);

How can i make it to select radio button according to link? Please help me

Answer 1

I have google then I found that how to get URL parameter with jQuery in perfect way. Then I put if else condition and see, It worked for me super perfect.

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
};

var defaultRadioPlan = getUrlParameter('defaultPlanSelect');
if(defaultRadioPlan === 'oneday'){
    $('.plan_name_oneday input').attr("checked", true);
} else if(defaultRadioPlan === 'weekly'){
    $('.plan_name_weekly input').attr("checked", true);
} else if(defaultRadioPlan === 'monthly'){
    $('.plan_name_monthly input').attr("checked", true);
}

Answer 2

This jQuery code will be helpful which get defaultSelect value from url and check radio button.

$(document).ready(function(){
  // Get Options in URL seprated by '?'
  var url = window.location.search;

  // Remove First Character '?' from URL string
  url = url.substr(1);

  // Split URL options and create array by '&' character
  var urlArr = url.split('&');

  //Loop through each Element of Array
  $.each(urlArr, function(){   
    // Create Variables dynamically and assign values using '=' sign
    window[this.split('=')[0]] = this.split('=')[1].toLowerCase();
  });

  // Loop throught each Input Radio
  $('.select_package_validity').find('input.custom-control-input').each(function(){

    // Get Radio button value
    var radioVal = $(this).attr('value').toLowerCase();

    // Match radio value and dynamically created 'defaultSelect' value
    if(radioVal == defaultSelect){
      // If values are same, check radio button
      $(this).attr('checked', true);
    }
  });
});

Answer 3

Please send defaultSelectRadio value from controller

var selectRadiovalue ='' $("input[name=plan_name_selector][value=" + selectRadiovalue + "]").prop('checked', true);

Answer 4

Within your customize-package.php, you should get the current value of dailySelector from URL

if( isset( $_GET['dailySelector'] ) ) {
    $dailySelector = $_GET['dailySelector'] 
} else {
    $dailySelector = 'daily';
}

Then within the JS you can use following code to set the value on doucment load

<script>

$(document).ready(function() {
    var dailySelector = '<?php echo $dailySelector; ?>';
    $('#' + dailySelector).prop('checked', true);
});
</script>