Отправить форму с jQuery

Question

Я работаю в Django с веб-приложением викторины, которое должно содержать форму, представленную по каждому вопросу. Вопросы отображаются правильно. Проблема возникает при попытке отправить форму с вопросами.

Ответы на вопрос (multichoice, 4 ответа) отображаются в пределах <li> элементов. Я хочу, чтобы щелкнув в ответе (так, щелкнув элемент <li>), ответ отправляется, поэтому следующий вопрос может отображаться. Я не могу заставить его работать, поэтому я не могу получить ответ. Форма HTML выглядит следующим образом:

<form id="game" action="" method="POST">{% csrf_token %} 
    <input type="hidden" name="question_id" value="{{ question.id }}"> 
    <input type="hidden" name="answer"> 
    <ul class="list-group"> 

    {% for answer in form.answers %} 
     <li class="list-group-item" name="answer" value="{{answer}}"> 
    {% endfor %} 
</ul> 

И JQuery это что-то вроде этого:

$(document).ready(function() { 
    $('#game li').click(function() { 
     $('input[name="answer"]').val($(this).value('answer')); 
     $('#game').submit(); 
    }); 
}); 

Это ничего не происходит при нажатии на ответы <li>, а консоль не показывает журнал. Как я могу заставить его работать? Спасибо.

EDIT 1:

Да у меня есть views.py, которые управляют викторины, вот фрагмент кода:

class QuizTake(FormView): 
    form_class = QuestionForm 
    template_name = 'question.html' 

    def dispatch(self, request, *args, **kwargs): 
     self.quiz = get_object_or_404(Quiz, url=self.kwargs['quiz_name']) 
     if self.quiz.draft and not request.user.has_perm('quiz.change_quiz'): 
      raise PermissionDenied 

     self.logged_in_user = self.request.user.is_authenticated() 

     if self.logged_in_user: 
      self.sitting = Sitting.objects.user_sitting(request.user, 
                 self.quiz) 
     else: 
      self.sitting = self.anon_load_sitting() 

     if self.sitting is False: 
      return render(request, 'single_complete.html') 

     return super(QuizTake, self).dispatch(request, *args, **kwargs) 

    def get_form(self, form_class): 
     if self.logged_in_user: 
      self.question = self.sitting.get_first_question() 
      self.progress = self.sitting.progress() 
     else: 
      self.question = self.anon_next_question() 
      self.progress = self.anon_sitting_progress() 

     if self.question.__class__ is Essay_Question: 
      form_class = EssayForm 

     return form_class(**self.get_form_kwargs()) 

    def get_form_kwargs(self): 
     kwargs = super(QuizTake, self).get_form_kwargs() 

     return dict(kwargs, question=self.question) 

    def form_valid(self, form): 
     if self.logged_in_user: 
      self.form_valid_user(form) 
      if self.sitting.get_first_question() is False: 
       return self.final_result_user() 
     else: 
      self.form_valid_anon(form) 
      if not self.request.session[self.quiz.anon_q_list()]: 
       return self.final_result_anon() 

     self.request.POST = {} 

     return super(QuizTake, self).get(self, self.request) 

    def get_context_data(self, **kwargs): 
     context = super(QuizTake, self).get_context_data(**kwargs) 
     context['question'] = self.question 
     context['quiz'] = self.quiz 
     if hasattr(self, 'previous'): 
      context['previous'] = self.previous 
     if hasattr(self, 'progress'): 
      context['progress'] = self.progress 
     return context 

    def form_valid_user(self, form): 
     progress, c = Progress.objects.get_or_create(user=self.request.user) 
     guess = form.cleaned_data['answers'] 
     is_correct = self.question.check_if_correct(guess) 

     if is_correct is True: 
      self.sitting.add_to_score(1) 
      progress.update_score(self.question, 1, 1) 
     else: 
      self.sitting.add_incorrect_question(self.question) 
      progress.update_score(self.question, 0, 1) 

     if self.quiz.answers_at_end is not True: 
      self.previous = {'previous_answer': guess, 
          'previous_outcome': is_correct, 
          'previous_question': self.question, 
          'answers': self.question.get_answers(), 
          'question_type': {self.question 
               .__class__.__name__: True}} 
     else: 
........ 

Кроме того, это получает свою информацию из этого форм. py:

class QuestionForm(forms.Form): 
    def __init__(self, question, *args, **kwargs): 
     super(QuestionForm, self).__init__(*args, **kwargs) 
     choice_list = [x for x in question.get_answers_list()] 
     self.fields["answers"] = forms.ChoiceField(choices=choice_list, 
                widget=forms.RadioSelect) 

У меня есть cha связанный с кодом, который вы мне предоставили, и попробовал разные комбинации, но по-прежнему не работает. Я не могу получить представленную форму, и консоль не показывает ошибок. Это невозможно?

Edit 2:

, когда я изменить HTML-код и попытаться поставить '<li>' тег так:

<li class="list-group-item" name="answer" data-answer="{{answer}}">{{answer}}</li> 

я получаю это как выход (в данном случае 2 возможно ответы, отображаются 2 <li> элементы):

И когда я ушел из «данных-ответ» элемента Li, он получает:

Теперь, когда я поставил мышь на текст, он не получает 'cursor:pointer' в то время как раньше в 'False">' это сделал. Однако, когда я нажимаю на него, ничего не происходит. Может быть, проблема в 'views.py'? Раньше я использовал кнопку «отправить», и она работала хорошо. @JacobWindsor

Я осведомился о проблеме? Я очень смущен благодарю вас за ответы.

Answer 1

Я немного смущен вашим прецедентом. Похоже, вы хотите отправить запрос AJAX на ваш сервер всякий раз, когда нажимается множественный выбор. Затем сервер отвечает следующим вопросом, который отображается в форме. Если это так, то это немного сложнее, чем то, что вы предоставили.Вам нужно будет:

1. Grab выбранного ответа (как есть)
2. Сделать запрос AJAX к серверу, но не с помощью отправки формы функции.
3. Сохраните ответ на сервере.
4. Рендер следующего вопроса

Однако из кода и описания вы предоставили я могу видеть, что селектор является неправильным.

Попробуйте это:

$('#game ul.list-group li').click(function(){...}); 

Однако я бы рекомендовал использовать delegated events, так как накладные расходы намного ниже, если у вас есть много элементов списка.

$('#game ul.list-group').on('click', 'li', function(){...}); 

Это также помогает, если вы хотите, чтобы динамически добавлять или удалять вопросы, так как вам не нужно будет связывать какие-либо новые обработчики событий. Поскольку вы говорите «ответ отправляется, поэтому следующий вопрос может быть отображен», я предполагаю, что вы делаете какое-то динамическое добавление вопросов.

Answer 2

вы havn't закрыл вам li тег

<li class="list-group-item" name="answer" value="{{answer}}">{{answer}}</li>

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

<li class="list-group-item" name="answer" data-answer="{{answer}}">{{answer}}</li> 

$(document).ready(function() { 
    $('#game li').click(function() { 
     $('input[name="answer"]').val($(this).data('answer')); 
     $('#game').submit(); 
    }); 
});