JavaScript在提交表单之前更改复选框状态 [英] JavaScript changing checkbox status before submitting form

问题描述

EDIT 注意用户体验...

在第一条评论后，我想指出， POST / redirect / GET，并将用户转到新页面。这实际上是一个非常愉快的用户体验：不要得到这个错，当用户到达下一页，他看到他的复选框被选中。然后，如果他点击后退按钮，他看到他的上一页，因为它是在它的复选框之前。用户从来没有注意到他的复选框改变它的状态，因为他立即被带到一个新的页面：我使用的Post / redirect / GET ...

ve得到了一个webapp它工作很好与后退按钮，并尊重后退按钮。但我有一个问题。正如一个有许多代表的用户所说的，显然复选框被重置为最终状态的事实是浏览器的一个功能（不是所有人都这样说）：

还有另一个复选框/返回按钮问题

思考一个解决方法，这个问题是不与上述问题相同。

目前我有非常简单的复选框，所有内容都是这样：

 < input type =checkboxname =collapseFoldsvalue =nachecked onchange =document.getElementById（'someid'）。submit ; 
  

现在我可以怎么在 onchange handler：

• 将另一个元素（例如某个隐藏元素）设置为复选框的值checked或unchecked）




• 将复选框设置为点击之前的值（因此，如果用户未选中，

我的推理是，如果我能做到这一点，我可以平凡地解决我在另一个问题描述的问题，这是什么太奇特：我只需要检查一个隐藏参数的值，

所以会发生以下情况：

• 用户点击复选框，切换其状态


• onchange会拦截此选项，并将复选框的状态设置为隐藏值。


• 将复选框恢复为原始状态


• 提交

理想情况下，它应该在每个浏览器上工作（我甚至不知道是否我的onchange是好的）。

这是我在这些页面上只有的.js，所以我宁愿不使用JQuery，但如果JQuery是方式，那么就是...

PS ：请注意，整个网页是在服务器端生成的，但没有AJAX 。

解决方案

@Cedric ...我的解决方案可能不会工作在IE（8& 9）....除了它的工作正常。对于IE 8和IE 9上的问题，我提出了这如果由于某些原因它在IE 8/9工作，请让我知道：）

 < input type =checkboxname =collapseFoldsvalue =nachecked onchange =document.getElementById（'someid'）submit（）> 
  

您可能想要替换写入内容 onchange 保留 html 和 javascript 以便日后维护。

因此您可以将代码更改为：

HTML ：

 < input type =checkboxname =collapseFoldsvalue =nachecked> 
  

Javascript ：

  function submitThisFormOnCheckBoxClick（event）{
 event.preventDefault（）; //这将确保历史记录将被处理
 var form = document.getElementById（formId）; 
 form.submit（）; 
} 
 
 var collapsefolds = document.getElementsByTagName（collapseFolds）; 
 
 for（var el in collapsefolds）{
 
 if（el.addEventListener）{//对于非IE浏览器
 el.addEventListener（'change' modifyText，false）; 
} else if（el.attachEvent）{//对于基于IE的浏览器
 el.attachEvent（'change'，modifyText）; 
} 
} 
  

如果您有任何问题， p>

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.

解决方案

@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.

这篇关于JavaScript在提交表单之前更改复选框状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！