CODEWITHSUNDEEP
phpjqueryhtml
Ahmed Elasame
Ahmed Elasame

Reputation: 1

Append parameter in url to make search filter

hi I want to rewrite url parameters values on checkbox click, similar to amazon search. filter enter image description here i try this code 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript1.2">
$(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 ='http://localhost/sss.php?'+seasoning;
console.log('http://localhost/sss.php?'+seasoning);

  });

});

</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>

but it run just in console i can't fixed it to run in url i want Append parameter to url

Upvotes: 0

Views: 950

Answers (1)

Avanthika
Avanthika

Reputation: 4182

  1. If you are okay with your window refreshing, you have to do

Using document.location.search += seasoning makes the page refresh.

  1. If you don't want window to refresh, you can use window.location pushState or replaceState.
window.history.replaceState(null, null, 'http://localhost/sss.php?'+seasoning);

or

window.history.replaceState(null, null, 'http://localhost/sss.php?'+seasoning);


$(document).ready(function () {
 $('input[type=checkbox]').click(function (e) {
  var seasoning = '', tempArray = [];
  $('input[name="vegetables[]"]:checked').each(function(){
      tempArray.push($(this).val());
  })
  console.log(tempArray);
  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();
  }
  console.log('http://localhost/sss.php?'+seasoning);
 });
});
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>

Upvotes: 1

Related Questions