javascript - 使用 jQuery 提交表单

Question

我正在 Django 中使用一个测验网络应用程序，该应用程序需要保留针对每个问题提交的表单。问题显示得恰到好处。尝试提交带有问题的表单时会出现问题。

问题的答案(多选，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> ，并且控制台没有显示任何日志。我怎样才能让它发挥作用？谢谢。

编辑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:
........

这也是从这个 forms.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)

我已经更改了您提供给我的代码并尝试了不同的组合，但仍然不起作用。我无法提交表单，控制台也没有显示任何错误。这不可能吗？

编辑2:

当我更改 HTML 代码并尝试将 ' <li> ' 像这样的标签:

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

我将其作为输出(在本例中，有 2 个可能的答案，显示 2 个 <li> 元素):

当我退出 li 元素的“data-answer”时，它会得到:

现在，当我将鼠标放在文本上时，它不会显示 'cursor:pointer'而之前在'False">'它做了。但是，当我点击它时什么也没有发生。可能是 'views.py' 中的问题？之前我曾经使用“提交”按钮并且效果很好。 @JacobWindsor

我是否对这个问题给出了一些解释？我很困惑，谢谢您的回答。

Answer 1

我对你的用例有点困惑。听起来您想在单击多项选择问题时向您的服务器发送 AJAX 请求。然后，服务器响应呈现到表单中的下一个问题。如果是这种情况，那么情况比您提供的要复杂一些。您将需要:

1. 获取所选答案(如您所知)
2. 向服务器发出 AJAX 请求，但不使用表单提交功能。
3. 将答案存储在服务器上。
4. 呈现下一个问题

但是，从您提供的代码和描述中我可以看到选择器不正确。

试试这个:

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

但是，我建议使用 delegated events因为如果您有很多列表项，开销会低很多。

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

如果您想动态添加或删除问题，这也很有帮助，因为您不需要绑定(bind)任何新的事件处理程序。既然您说“答案已提交，因此可以显示下一个问题”，我假设您正在做某种动态添加问题。