Форма PHP/HTML и окно подтверждения Javascript

Я создал опрос с помощью инструмента LimeSurvey. Для некоторой настройки я должен реализовать следующую задачу.

Снимок экрана:

Здесь, когда пользователь нажимает Далее и если на какой-либо из вопросов нет ответа, я хочу сообщить пользователю, что он пропустил ответ.

Поэтому, когда они нажимают Далее, я хотел бы видеть окно подтверждения (Javascript), в котором отображается сообщение о том, что вы пропустили. Там будет кнопка «Все в порядке, перейдите на следующую страницу» и кнопка «Я останусь здесь и отвечу».

Кнопка «Все в порядке, перейти к следующей странице» должна выполнять те же функции, что и кнопка «Далее».

Кнопка «Я останусь здесь и отвечу» позволит пользователям оставаться на той же странице.

Я знаю, что это возможно с помощью Javascript, я не уверен, как реализовать эту конкретную задачу.

Я просто знаю, что идентификатор кнопки "Далее" - "movenextbtn".

Но как я могу проверить, не был ли дан ответ на вопрос при нажатии кнопки «Далее», а также с помощью окна подтверждения, как я перейду на следующую страницу или останусь на той же странице.

Любая помощь будет очень признательна.

Заранее спасибо.


person Anakata Andrese    schedule 08.08.2014    source источник
comment
что-то похожее на это stackoverflow.com/questions/14957604/ .. Но это совсем не помогло   -  person Anakata Andrese    schedule 08.08.2014
comment
Вы должны дать дополнительную информацию. Минимум, классы/идентификаторы переключателей   -  person Abhilash    schedule 08.08.2014
comment
Просто сделайте вопрос обязательным и добавьте в опрос вариант «нет ответа», не нужно его усложнять.   -  person Pwner    schedule 08.08.2014
comment
Из Firebug я мог видеть, что answertext - это класс таблицы, в которой есть вопросы с переключателем. answer_cell_001 ответ-элемент радио-элемент - это класс переключателя   -  person Anakata Andrese    schedule 08.08.2014
comment
@Pwner Нет, мы проводим исследовательский опрос и не можем обязать людей отвечать, в то же время мы не готовы сообщить им, если они что-то пропустили по ошибке.   -  person Anakata Andrese    schedule 08.08.2014


Ответы (2)


Поместите этот скрипт в источник вопроса о массиве:

<script type="text/javascript" charset="utf-8"> 
$(document).ready(function() { 

    // Identify this question
    var thisQuestion = $('#question'+{QID}+'');

    // Listener on the "Next" button
    $('#movenextbtn').click(function(event){
        // Compare number of clicked radios to number of array rows
        if($('input.radio:checked', thisQuestion ).length != $('tr.answers-list',thisQuestion ).length) {
            // Pop up a confirm message
            if(confirm('You have not answered all rows.\n\nAre you sure you want to continue?')) { 
                return true;
            }
            else { 
                return false;
            }
        }
    });
});
</script>
person tpartner    schedule 09.08.2014
comment
Истинный спаситель здесь и на форуме LimeSurvey. Муха с уважением. - person Anakata Andrese; 10.08.2014

Этот фрагмент кода предполагает, что вас интересуют только переключатели в форме, которая имеет кнопку с идентификатором movenextbtn. Вам нужно будет вставить его где-нибудь на вашей странице.

<script>                                                                        
  // wait for everything to load                                                
  window.addEventListener('load', function() {                                  
    // let's check radio buttons when the next button is clicked   
    var nextButton = document.getElementById('movenextbtn');                    
    var form = nextButton.form;                                                 

    nextButton.addEventListener('click', function(e) {                          
      var radioElements = form.querySelectorAll('input[type="radio"]');         
      var currentRadioName;                                                     
      var seenRadioName;                                                        
      var index;                                                                
      var confirmation;                                                         

      for(index = 0; index < radioElements.length; index += 1) {                
        currentRadioName = radioElements[index].name;                           

        // check if we've already seen this named radio button set              
        if(seenRadioName != currentRadioName) {                                 
          // check that there's a checked radio button for this set of named radio buttons
          if(!form.querySelectorAll('input[type="radio"][name="' + currentRadioName + '"]:checked').length) {
            // didn't answer a question, ask if that's ok                       
            confirmation = confirm("You have missed answering a question.\n\nOK to Continue?\nCancel form submission and answer?");

            if(confirmation) {                                                  
              // the user clicked ok, let's submit the form                     
              return true;                                                      
            }                                                                   
            else {                                                              
              // the user clicked cancel, let's stop the form submission        
              e.preventDefault();                                               
              e.stopPropagation();                                              
              return false;                                                     
            }                                                                   
          }                                                                     

          // remember that we already checked this set of radio buttons         
          seenRadioName = currentRadioName;                                     
        }                                                                       
      }                                                                         
    }, false);                                                                  
  }, false);                                                                    
</script>                                                                       

Вы можете поиграть с ним еще здесь: http://jsbin.com/howuzapi/1/edit

person Alfredo Delgado    schedule 08.08.2014
comment
AlfredoDelgado ... В определенной степени это работает нормально, но после подтверждения кнопка «Далее» не работает, есть идеи, как это можно исправить? - person Anakata Andrese; 08.08.2014
comment
Не могли бы вы быть более конкретным? Следующая кнопка отлично работает для меня, ответил ли я на все вопросы или выбрал подтверждение после того, как не ответил. Доступна ли ваша работа по общедоступному URL-адресу, по которому я могу получить доступ? Вы видели, как это работает на jsbin.com/howuzapi/1/edit? - person Alfredo Delgado; 08.08.2014