Update url without reloading depending on the checkbox(es) selected using jquery/javascript

Question

This is a 2 part question:

I have 2 sections with checkboxes.

I need to update the url depending on the checkbox(es) selected
I need to share the updated url which opens up with the specific checkbox(es) selected when page loads

I have made a jsfiddle with the html code in it: https://jsfiddle.net/yh2ugbj8/5/

<h3>Filter recepies:</h3>

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

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

You'll either need PHP to do this or a different URL for each possibility (9 total). I recommend PHP because you would be able to add many more possible combinations without coding a new HTML page for each. — James McDowell
– James McDowell, Commented Apr 22, 2016 at 14:34
@JamesMcDowell he want to update or add url query parameters i guess — daremachine
– daremachine, Commented Apr 22, 2016 at 14:35
Well, what I would do is have this a php file, have a bit of jQuery ajax that says what the seasoning and vegetable are and a bit of php to read that and echo selected onto one the correct option tag. — James McDowell
– James McDowell, Commented Apr 22, 2016 at 14:38
You can use redirect after selectbox has changed and setup url parameter example like window.location.href = window.location.hostname + '?select1=' + val); — daremachine
– daremachine, Commented Apr 22, 2016 at 14:46
You don't need to do any redirection or to navigate away from the page to do this, and you certainly don't need any server-side code. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Apr 22, 2016 at 14:53

Reinstate Monica Cellio · Accepted Answer · 2016-04-25 10:30:27Z

2

I'd recommend using location.hash so you can add the extra information to the url without navigating away from the page. This info can also be given in a link so you can check the selected elements when you first navigate to the page...

HTML

<h3>Filter recepies:</h3>

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

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

Javascript

$(function() {

    $(".vegetables, .seasoning").on("change", function() {
        var hash = $(".vegetables:checked, .seasoning:checked").map(function() {
            return this.value;
        }).toArray();
        hash = hash.join("|");
        location.hash = hash;
        alert(hash);
    });

    if (location.hash !== "") {
        var hash = location.hash.substr(1).split("|");
        hash.forEach(function(value) {
            $("input[value=" + value + "]").prop("checked", true);
        });
    }
});

Here's an updated fiddle where the page url has the values added to the hash...

https://jsfiddle.net/yh2ugbj8/6/

As you can see I added a line at the top of the script to mimic visiting the page with the hash value appended to it.

I also removed the IDs and added classes to the checkboxes, just for the sake of not making ugly jQuery selectors.

Note: I added the alert to show the location because you won't see the fiddle example changing the url, due to the fact that the 4 panels are all iframes.

edited Apr 25, 2016 at 10:30

answered Apr 22, 2016 at 14:47

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

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

3 Comments

daremachine Over a year ago

i like your solution for that

Aryaveer Sharma Over a year ago

This is fantastic @Archer. I need to use checkboxes where I can have multiple selections. However, the jsfiddle you shared has Select Dropdowns.

Reinstate Monica Cellio Over a year ago

Yeah, I worked from your original fiddle example, and not the code in the question - my bad. I've updated it now to work with checkboxes.

Oguzhan Kahyaoglu · Accepted Answer · 2016-04-22 14:43:14Z

You can use history.js, which enables you to change url without postback in modern browsers, using History api. You can take deeper look at the api, however the most important point you should keep in mind that, pushstate and replacestate behaves differently. Example script can be;

$('[type="checkbox"]').on('change', function(){
  var checkedVals = $(':checked').map(function(){ return $(this).val(); }).get().join();
  alert(checkedVals); //for debugging purposes
  History.pushState(null, null, "?state=" + checkedVals);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Filter recepies:</h3>

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

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

Michael Benin · Accepted Answer · 2016-04-22 14:46:03Z

This can be accomplished in a couple ways, but with the requirement with no page reloading HTML5 history would be your best bet.

1) As suggested in the comments create a router with dynamic segments. Here are a couple good routing libraries:

2) On initial pageload ensure the ui elements are selected correctly corresponding to the dynamic segments in your current route. Or have your server load with the correct ui elements on render. You said using jquery so I'm assuming this is done all client side.

3) Have listeners for the checkboxes, use your routing library to update the url on select and deselect.

Example: https://api.jquery.com/change/

4) Like most things on the web there's no one "right" way of doing things. This could be accomplished using query strings or dynamic segments. It's up to you to implement they way you feel most comfortable shipping this out in the amount of time your given and your teams experience.

Collectives™ on Stack Overflow

Update url without reloading depending on the checkbox(es) selected using jquery/javascript

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related