使用 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，这是一个 sn-p：

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 元素的“数据答案”时，它得到：

现在，当我将鼠标放在文本上时，它不会得到'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(){...});

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

Answer 2

你还没有关闭你li标签

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

li 也没有 value 属性，所以你不能像那样捕捉它....试试这个

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