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

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

0 голосов
/ 16 марта 2012

РЕДАКТИРОВАТЬ Примечание по опыту пользователя ...

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

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

Еще одна проблема с флажками / кнопками

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

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

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

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

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

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

  • отправить

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

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

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

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

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

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

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

1 Ответ

0 голосов
/ 03 марта 2014

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

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

Вместо записи inline 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);
   }
}

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

...