CODEWITHSUNDEEP
javascriptjqueryformsradio-button
user2265915
user2265915

Reputation: 569

Changing URL on radio button selection

I'm trying to change the URL when I select radio button.

I have found an answer that works for 'select' form elements, but if I apply it to my radio buttons it lists out all the options instead of the one that is selected

My JS

$('.unitfiltercontrol').change(function(){
    var params =[];
    $('.unitfiltercontrol').each(function(){
        $this=$(this);
        if(!$this.val()=='') params.push($this.data('param')+'='+encodeURIComponent( $this.val() ));
    });
    $('#urlDisplay').text(window.location.href+('?'+params.join('&'))); //print to div for testing
});

My HTML:

<form>
  <input id="radio1" type="radio" value="1" name="foo" data-param="foo" class="unitfiltercontrol">
  <input id="radio2" type="radio" value="2" name="foo" data-param="foo" class="unitfiltercontrol">

  <input id="radio3" type="radio" value="1" name="bar" data-param="bar" class="unitfiltercontrol">
  <input id="radio4" type="radio" value="2" name="bar" data-param="bar" class="unitfiltercontrol">
</form>
<div id="urlDisplay"></div>

So if I select radio1, instead of the URL being displayed as:

/?foo=1

I get:

/?foo=1&foo=2&bar=1&bar=2

How would I modify this to work with radio buttons?

Upvotes: 0

Views: 1217

Answers (2)

Bourbia Brahim
Bourbia Brahim

Reputation: 14712

Radio button in your case make single selection , so no need to loop each radio , just get in the change the value and data for current clicked , then create object using data-param as key , after that loop thorough keys and create and array of key + values as below ; snippet :

let values = {};

$('.unitfiltercontrol').change(function(e){
  let data = $(this).data('param');
  let value = this.value;
  values[data] = value;
  let params = [];
  
  let keys = Object.keys(values);
  
  for(inc = 0; inc < keys.length ; inc ++) {
    let key = keys[inc];
    params.push(key+'='+encodeURIComponent(values[key]))
  }
  
    $('#urlDisplay').text(window.location.href+('?'+params.join('&'))); 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
My HTML:

<form>
  <input id="radio1" type="radio" value="1" name="foo" data-param="foo" class="unitfiltercontrol">
  <input id="radio2" type="radio" value="2" name="foo" data-param="foo" class="unitfiltercontrol">

  <input id="radio3" type="radio" value="1" name="bar" data-param="bar" class="unitfiltercontrol">
  <input id="radio4" type="radio" value="2" name="bar" data-param="bar" class="unitfiltercontrol">
</form>

<div id="urlDisplay"></div>
<div id="urlDisplay">

</div>

Upvotes: 0

Abdul Hakeem
Abdul Hakeem

Reputation: 405

Hi friend you can use if condition when pushing parameters to like below

$('.unitfiltercontrol').change(function(){
var params =[];
$('.unitfiltercontrol').each(function(){
    $this=$(this);
    if ($(this).prop("checked")) { //get the values of only checked radio buttons
       if(!$this.val()=='') params.push($this.data('param')+'='+encodeURIComponent( $this.val() ));
    }
    
});
$('#urlDisplay').text(window.location.href+('?'+params.join('&'))); //print to div for testing

});

Upvotes: 1

Related Questions