JavaScript изменения статуса флажка перед отправкой формы

Question

EDIT Примечания на пользователях ...

После первого комментария я хотел бы отметить, что каждая подать приводит к POST/перенаправлению/GET и принять пользователя на новую страницу. На самом деле это очень приятный пользовательский интерфейс: не ошибетесь, когда пользователь приходит на следующую страницу, он видит, что его флажок установлен. И затем, если он нажимает кнопку «Назад», он видит свою предыдущую страницу, как это было до того, как был установлен флажок. Пользователь никогда не замечает, что его флажок меняет свое состояние, потому что он сразу же перешел на новую страницу: я использую Post/redirect/GET ...

У меня есть webapp, который прекрасно работает с кнопкой «Назад» и который уважает кнопку «Назад». Однако у меня проблема. Как прокомментировал пользователь с большим количеством повторении здесь, по-видимому, тот факт, что флажки сбрасываются в их конечное состояние является особенностью браузеров (не все из них, что сказал):

Yet another checkbox/backbutton issue

Так что я м думать об обходном пути, и этот вопрос не так же, как и выше. Этот вопрос касается того, как сделать из JavaScript, в частности, следующее.

В настоящее время у меня есть очень простые флажков, которые делают все выглядеть следующим образом:

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

может теперь, как я могу, в onchange обработчика:

• установить другой элемент (например, некоторые скрытые элемент) до значения флажка (по крайней мере, либо «отмечен», либо «не отмечен»)

• установите флажок обратно в значение, которое было bef руда была нажата (так как «проверено», если пользователь просто не остановить его, или ничего, если пользователь просто проверил)

• представить

Мои рассуждения в том, что если я могу сделать это, я может тривиально обойти проблему, которую я описал в другом вопросе, и это ничто не слишком интересно: мне просто нужно проверить значение скрытого параметра, а не проверять значение этого флажка.

Так что произойдет, были бы следующие:

• пользователь нажимает на флажок, переключая свое состояние
• OnChange перехватывает, устанавливает скрытое значение состояния флажка
• изменения обратно флажок в первоначальное состояние
• представляет

Таким образом, если пользователь нажмет на спине, но тон, он не попал в конечное состояние, когда флажок находился, но в исходное состояние.

В идеале это должно работать на каждом браузере (я даже не знаю, хорошо ли мой обмен).

Это единственное.js У меня на этих страницах, поэтому я бы предпочел не использовать JQuery, но если JQuery - это способ, то пусть будет так ...

P.S.: обратите внимание, что вся веб-страница создается на стороне сервера, но AJAX не работает. Это просто просто POST/GET и отправить, когда пользователь нажмет флажок.

Answer 1

@Cedric ... Мое решение может не работать на IE (8 & 9) .... кроме того, что он работает просто отлично. Для выдачи на IE 8 и IE 9 Я поднял this Если по каким-то причинам он работал на IE 8/9, пожалуйста, дайте мне знать :)

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

Вместо того чтобы писать инлайн onchange вы, вероятно, хотите сохранить html и javascript отдельный для удобства будущего обслуживания.

так что вы можете изменить свой код:

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); 
    } 
} 

Позвольте мне знать, если у вас есть какие-либо вопросы.