Redirect URL on CheckBox Click event without page reload

Question

Here is My Checkbox code. Checkbox value get: http://mydomainsss.com/men.html?band_colour=131

<span class="check-box">
    <input type="checkbox" name="vehicle" class="filtercheckbox" value="<?php echo $this->urlEscape($_item->getUrl())?>" />
</span>

Here is my Jquery Code:

<script type="text/javascript">
jQuery('input[type=checkbox').click(function(){

      window.location.hash = jQuery(this).val();
    });
</script>

This code simple change URL like http://mydomainsss.com/men.html#http://mydomainsss.com.com/men.html?band_colour=131

but I want to redirect to http://mydomainsss.com/men.html?band_colour=131 without page reload. so can anyone help me?

use window.history.pushState like @vinhphon answer https://stackoverflow.com/a/47827300/2076049 — HoangHieu, Dec 15 '17 at 07:20

Rohit Sharma · Answer 1 · 2020-06-17T12:40:24.637

0

Just use hash in the value of the input, not whole URL.

jQuery('input[type=checkbox').change(function(){
  window.location.hash = jQuery(this).val();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="check-box">
  <input type="checkbox" name="vehicle" class="filtercheckbox" value="#something" />
</span>

edited Jun 17 '20 at 12:40

answered Dec 15 '17 at 06:48

Rohit Sharma

3,304
2
19
34

but in the checkbox value i only get values like "131" thats why i need to use whole URL. – Harshil Parekh Dec 15 '17 at 06:54

vinhphon · Answer 2 · 2017-12-15T07:15:14.073

Just use ways below instead of use .hash

window.location.replace(jQuery(this).val());

or
window.location.href = jQuery(this).val();

or Jquery
$(location).attr('href', jQuery(this).val())

This way will redirect to new link.

UPDATE: I used to think you want to REDIRECT this page.

If you just want to change the url, please research html5 function

history.pushState

If you want to redirect without pageload, you have to research Angular, React, Backbone...

Or use ajax page load libarry such as: pjax, smoothState.js to load some content without page reload.

Thanks for unvote :(

score -1 · Answer 3 · edited Jun 17 '20 at 12:41

-1

Change window.location.hash to window.location.href:

<script type="text/javascript">
  jQuery('input[type=checkbox').click(function(){
    window.location.href = jQuery(this).val();
  });
</script>

edited Jun 17 '20 at 12:41

Rohit Sharma

3,304
2
19
34

answered Dec 15 '17 at 06:47

Linards Kalvans

479
2
8

i want to change without page reload – Harshil Parekh Dec 15 '17 at 06:56
How are you supposed to redirect w/o reload. You can only set some hash w/o reload ;) – Linards Kalvans Dec 15 '17 at 07:30

Redirect URL on CheckBox Click event without page reload

3 Answers3

This way will redirect to new link.