JavaScript checkbox change status before form submit
EDIT User note ...
After the first comment, I would like to point out that each element leads to a POST / redirect / GET and takes the user to a new page. This is actually a very nice user interface: make no mistake, when the user comes to the next page, he sees that his checkbox is checked. And then if he clicks the back button, he sees his previous page as it was before the checkbox was checked. The user never notices that his checkbox is changing its state because he immediately went to a new page: I am using Post / redirect / GET ...
I have a webapp that works well with the back button and that respects the back button. However, I have a problem. As a user with a lot of harassment commented, the obvious fact that the checkboxes are reset to their final state is a feature of browsers (not all of them):
Another problem with checkbox / backpackton
So I am thinking of a workaround and this question is not the same as the above question. This question is about how to do the following from JavaScript:
I currently have very simple checkboxes that look like this:
<input type="checkbox" name="collapseFolds" value="na" checked onchange="document.getElementById('someid').submit()>
now how can i in the handler onchange
:
-
set another item (like some hidden item) to the checkbox value (at least either "checked" or "unchecked")
-
set the checkbox back to the value it was before it was clicked (so either "checked" if the user just unchecked the checkbox or nothing if the user just checked it)
-
imagine
My reasoning is that if I can do this, I can trivially work around the problem I described in another question, and this is nothing too interesting: I just need to check the value of the hidden parameter instead of checking the value of the checkbox.
So what happens is the following:
- the user clicks on the checkbox, toggling its state
- onchange intercepts this, sets the hidden value to the checkbox state
- resets the checkbox to its original state
- introduces
Thus, if the user clicks the Back button, he does not go to the final state in which the checkbox is checked, but to the initial state.
Ideally it should work on every browser (I don't even know if my exchange is good).
This is the only .js I have on these pages, so I would rather not use JQuery, but if JQuery is the way, then so be it ...
PS: Please note that the entire webpage is generated on the server side, but no AJAX. It's just a simple POST / GET and send when the user clicks the checkbox.
source to share
@Cedric ... my solution may not work on IE (8 & 9) ... except that it works just fine. For the question about IE 8 and IE 9 I raised this If for some reason it worked on IE 8/9 please let me know :)
<input type="checkbox" name="collapseFolds" value="na" checked onchange="document.getElementById('someid').submit()">
Rather than writing inline onchange
, you probably want to keep html
it javascript
for easy maintenance.
so you can change your code to:
HTML:
<input type="checkbox" name="collapseFolds" value="na" checked >
JavaScript:
function submitThisFormOnCheckBoxClick(event){
event.preventDefault(); // This will ensure that history will be taken care of
var form = document.getElementById("formId");
form.submit();
}
var collapsefolds = document.getElementsByTagName("collapseFolds");
for (var el in collapsefolds){
if (el.addEventListener) { // for non-IE browsers
el.addEventListener('change', modifyText, false);
} else if (el.attachEvent) { // for IE based browsers
el.attachEvent('change', modifyText);
}
}
Let me know if you have any questions.
source to share