JavaScript changing checkbox status before submitting form

问题

EDIT Note on the user experience...

After the first comment I'd like to point out that every submit leads to a POST/redirect/GET and take the user to a new page. It's actually a very pleasant user experience: don't get this wrong, when the user arrives on the next page he sees his checkbox checked. And then if he clicks on the back button he sees his previous page, as it was before its checkbox was checked. The user never notices that his checkbox changes its state, because he's taken immediately to a new page: I'm using a Post/redirect/GET...

I've got a webapp which works nicely with the back button and which respects the back button. However I've got an issue. As commented by a user with lots of rep here, apparently the fact that the checkboxes are reset to their final state is a feature of the browsers (not all of them that said):

Yet another checkbox/backbutton issue

So I'm thinking about a workaround and this question is not the same as the above question. This question is about how to do specifically the following from JavaScript.

Currently I have very simple checkboxes that do all look like this:

<input type="checkbox" name="collapseFolds" value="na" checked onchange="document.getElementById('someid').submit()>

now can how can I, in the onchange handler:

set another element (for example some hidden element) to the value of the checkbox (at least to 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 it, or nothing if the user just checked it)
submit

My reasoning is that if I can do that, I can trivially workaround the issue I described in the other question and this is nothing too fancy: I'd simply need to check the value of a hidden parameter instead of checking the value of the checkbox.

So what would happen would be the following:

user clicks on a checkbox, toggling its state
onchange intercepts this, sets a hidden value to the state of the checkbox
changes back the checkbox to its original state
submits

This way if the user clicks on the back button, he's taken not to the final state the checkbox was in but to the original state.

Ideally it should work on every browser (I don't even know if my onchange is good enough).

It's the only .js I've got on these pages, so I'd rather not have to use JQuery but if JQuery is the way, then so be it...

P.S.: note that the entire webpage is generated on the server side but there's no AJAX going on. It's really just simply POST / GET and submit when the user clicks a checkbox.

回答1:

@Cedric...my solution may not work on IE ( 8 & 9) ....other than that it works just fine. For the issue on IE 8 and IE 9 I raised this If for some reasons it worked on IE 8/9 please let me know :)

<input type="checkbox" name="collapseFolds" value="na" checked onchange="document.getElementById('someid').submit()">

Instead of writing inline onchange you probably want to keep html and javascript separate for ease of future 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.

来源：https://stackoverflow.com/questions/9742965/javascript-changing-checkbox-status-before-submitting-form

标签

javascript

checkbox

onchange