Persist checkbox after reload using query string

Question

As the user changes filters values on my page I am updating the pages URL using the following:

function filterChanged() {
    window.history.pushState("", document.title, '?' + $("#FiltersForm").serialize())
}

This appears to work as the URL becomes:

http://localhost/?CreatedDate=2016-11-07&StatusFilter=Complete&StatusFilter=Failed

(note this is an MVC project)

If I then refresh the page using F5 or Enter in the address bar it reloads and the text/date inputs and selects keep their value. The check boxes don't.

Am I missing something or is this one of those things that has to be done manually by parsing the query string?

Check box HTML:

  <input type="checkbox" class="StatusFilterCheckBox" data-status-filter="Pending" name="StatusFilter" value="Pending" onchange="filterChanged()">
  <input type="checkbox" class="StatusFilterCheckBox" data-status-filter="Failed" name="StatusFilter" value="Failed" onchange="filterChanged()">
  <input type="checkbox" class="StatusFilterCheckBox" data-status-filter="Complete" name="StatusFilter" value="Complete" onchange="filterChanged()">

Most likely its because checkboxes have a value whether they are clicked or not. You are persisting their values, but not their checked state. — Scott Marcus, Nov 07 '16 at 16:29
When they are unchecked then the value is not appended to the query string. I have found how to parse the query string as above and set the check boxed checked, but it seams like if this should work for text inputs and selects it should work for a text box — apc, Nov 07 '16 at 16:32
@apc Whether it's appended to the querysring or not isn't the issue. What you are not doing is persisting the checked state of the checkboxes are. Checkboxes always have a value, even when they are not checked. In other words, when the second page is loaded, what in your querystring tells the checkboxes to be checked or not? Nothing. — Scott Marcus, Nov 07 '16 at 16:34
@ScottMarcus good point, I understand that, so the issue is the checked state can't be peristed through the query string (without additioanal appending and parsing) — apc, Nov 07 '16 at 16:36
@apc Right. You'd need to parse the querystring and look for which (if any) checkbox values that are present and then dynamically turn on the checked state of the corresponding checkboxes. — Scott Marcus, Nov 07 '16 at 16:39
Did you not find solution to present Question at linked Question and Answers? — guest271314, Nov 07 '16 at 16:40
For reference the answer here: http://stackoverflow.com/a/11454800/1856451 by Engineer is the simplist solution to parsing I've found as can be placed in the $(document).ready and works with the above — apc, Nov 07 '16 at 16:42

score 0 · Answer 1 · answered Nov 07 '16 at 16:29

0

i think you are missing the serialization of the "checkstate" of your checkboxes

see here : http://www.w3schools.com/TAgs/att_input_checked.asp

answered Nov 07 '16 at 16:29

crazyghandi

49
1
10

score 0 · Answer 2 · edited May 23 '17 at 12:01

As per Scott Marcus' comments.

The jquery .serialize() method only serialises values and not the checked state of the check box, though it will only serialise the values of checked check boxes. As such when the page reloads the check state is not peristed.

It is therefore necessary to parse the query string when the document loads and set the checkboxes checked state.

A good example of this can be found here: https://stackoverflow.com/a/11454800/1856451

Persist checkbox after reload using query string

2 Answers2