Append parameter in url on multiple checkbox group click

Question

I want to rewrite url parameters values on checkbox click, similar to LinkedIn Advance search.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
  <script type='text/javascript'>
  
  $(document).ready(function () {
$('input[type=checkbox]').click(function (e) {
var seasoning = jQuery.map($(':checkbox[id=seasoning\\[\\]]:checked'), function (n, i) {return n.value;}).join(',');

window.location ='example.com?seasoning='+seasoning;
 
});

});
</script>

<h3>Filter recepies:</h3>

<div>
<p>Select vegetables</p>
<label><input type="checkbox" id="vegetables[]" value="potato"> Potato</label><br>
<label><input type="checkbox" id="vegetables[]" value="onion"> Onion</label><br>
<label><input type="checkbox" id="vegetables[]" value="tomato"> Tomato</label><br>
</div>

<div>
<p>Select seasoning</p>
<label><input type="checkbox" id="seasoning[]" value="salt"> Salt</label><br>
<label><input type="checkbox" id="seasoning[]" value="pepper"> Pepper</label><br>
<label><input type="checkbox" id="seasoning[]" value="chilli"> Chilli Flakes</label><br>
</div>

My Desired Result

Click1: when I click Potato from vegitable my URL should look like
example.com?vegitables=potato

Click2: when I click Onion from vegitable my URL should look like
example.com?vegitables=potato,onion

Click3: when I click salt from seasoning my URL should look like
example.com?vegitables=potato,onion&seasoning=salt

Click4: when I click pepper from seasoning my URL should look like
example.com?vegitables=potato,onion&seasoning=salt,pepper

Check the answer i have posted, exactly what you need.

Ankit Agarwal
– Ankit Agarwal

2017-07-08 12:07:45 +00:00
Commented Jul 8, 2017 at 12:07 — Ankit Agarwal
– Ankit Agarwal, Commented Jul 8, 2017 at 12:07

Ankit Agarwal · Accepted Answer · 2017-07-08 12:03:57Z

1

Here is what you can do

$(document).ready(function () {
  $('input[type=checkbox]').click(function (e) {
  var seasoning = '', tempArray = [];
  $('input[name="vegetables[]"]:checked').each(function(){
      tempArray.push($(this).val());
  })
  if(tempArray.length !== 0){
     seasoning+='vegetables='+tempArray.toString();
     tempArray = [];
  }
  
  $('input[name="seasoning[]"]:checked').each(function(){
      tempArray.push($(this).val());
  })
  if(tempArray.length !== 0){
     seasoning+='&seasoning='+tempArray.toString();
  }
 
 // window.location ='example.com?seasoning='+seasoning;
 console.log('example.com?'+seasoning);

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>Select vegetables</p>
<label><input type="checkbox" name="vegetables[]" value="potato"> Potato</label><br>
<label><input type="checkbox" name="vegetables[]" value="onion"> Onion</label><br>
<label><input type="checkbox" name="vegetables[]" value="tomato"> Tomato</label><br>
</div>

<div>
<p>Select seasoning</p>
<label><input type="checkbox" name="seasoning[]" value="salt"> Salt</label><br>
<label><input type="checkbox" name="seasoning[]" value="pepper"> Pepper</label><br>
<label><input type="checkbox" name="seasoning[]" value="chilli"> Chilli Flakes</label><br>
</div>

For simplicity and further edit here is the link to working JSFIDDLE

answered Jul 8, 2017 at 12:03

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rizwan Over a year ago

this is working like a charm for the 2 parameter (vegetables,seasoning)! i am getting wrong value if i add 3rd parameter (vegetables,seasoning,param3) js code for param3 $('input[name="param3[]"]:checked').each(function(){ tempArray.push($(this).val()); }) if(tempArray.length !== 0){ seasoning+='&param3='+tempArray.toString(); }

Collectives™ on Stack Overflow

Append parameter in url on multiple checkbox group click

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related