Django - 同じフィールドに複数の入力があるフォームを投稿する

Question

Forewarning：私はDjango（およびWeb開発一般）の新機能です。

私はDjangoを使用してWebベースのUIをホストしています。このUIは短いアンケートからユーザの意見を取り入れ、Pythonで開発したいくつかの分析をフィードに入れて、 UI。

私のアンケートは、特定のトピックにどのくらい一致するかをユーザーに尋ねる10の質問で構成されています。調査のためのUIの

例：

Example of UI input screen

models.pyのために、私は2つのフィールドがあります質問&選択

class Question(models.Model): 
    question_text = models.CharField(max_length=200) 

    def __str__(self): 
     return self.question_text 

class Choice(models.Model): 
    question = models.ForeignKey(Question, on_delete=models.CASCADE) 
    choice_text = models.CharField(max_length=200) 
    votes = models.IntegerField(default=0) 

    def __str__(self): 
     return self.choice_text 

私は、ユーザーが選択していたいと思っていますが、その10個すべての質問に回答してからsubmitをクリックしてすべての回答を一度に提出してください。しかし、これはDjangoでどのように処理されるかに問題があります。

私が使用しているhtmlフォームですが、このコードスニペットは各質問の後に「送信」ボタンを配置し、一度に1つの送信のみを許可します。

注：以下のコードは、繰り返しごとに質問固有のフォームを作成しています。

{% for question in latest_question_list %} 
    <form action="{% url 'polls:vote' question.id %}" method="post"> 
    {% csrf_token %} 
     <div class="row"> 
      <div class="col-topic"> 
       <label>{{ question.question_text }}</label> 
      </div> 
      {% for choice in question.choice_set.all %} 
       <div class="col-select"> 
        <input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}" /> 
        <label for="choice{{ forloop.counter }}">{{ choice.choice_text }}</label><br /> 
       </div> 
      {% endfor %} 
     </div> 

    <input type="submit" value="Vote" /> 
    </form> 
{% endfor %} 

私は、単一の提出に複数の入力（すべての質問/選択のための）を取り、views.py

EDITにその裏を返すだろうかに興味がある：ビューの追加。 PY

現在のところ、views.pyスクリプトで1つの質問/選択肢のペアが処理されています。ユーザーが10の質問/選択肢すべてに対してフォームを1回送信できるようにしたら、views.pyに反映する必要があります。これは、問題の第2部である可能性があります。まず、1つの「送信」ボタンを使用して、ユーザーがすべての10の質問にすべての回答を提出できるようにするにはどうすればよいですか？次に、一度に2つ以上の値を受け入れるようにviews.pyを設定するにはどうすればよいですか？

views.py

def vote(request, question_id): 
    question = get_object_or_404(Question, pk=question_id) 
    try: 
     selected_choice = question.choice_set.get(pk=request.POST['choice']) 
    except (KeyError, Choice.DoesNotExist): 
     return render(request, 'polls/survey.html', { 
      'error_message': "You didn't select a choice.", 
     }) 
    else: 
     selected_choice.votes += 1 
     selected_choice.save() 

     return HttpResponseRedirect(reverse('polls:analysis')) 

追加のコンテキストは、それが必要な場合は私に知らせてください。

ありがとうございます！

-C

Answer 1

ちょうど同じform内に複数の質問を持っているために、少し異なるテンプレートを整理する必要があります。Litteraly HTMLには複数のテキスト入力に変換します、その後1は、すべて1つのフォーム内に、以下の入力を提出する：それは今

<form action="{% url 'polls:vote' question.id %}" method="post"> 
    {% for question in latest_question_list %} 
    {% csrf_token %} 
     <div class="row"> 
      <div class="col-topic"> 
       <label>{{ question.question_text }}</label> 
      </div> 
      {% for choice in question.choice_set.all %} 
       <div class="col-select"> 
        <input type="radio" name="choice" id="choice{{ forloop.counter }}" value="{{ choice.id }}" /> 
        <label for="choice{{ forloop.counter }}">{{ choice.choice_text }}</label><br /> 
       </div> 
      {% endfor %} 
     </div> 
    {% endfor %} 
    <input type="submit" value="Vote" /> 
</form> 

を動作していますか？

Answer 2

使用GETLIST（）あなたのviews.pyで

if method=="POST": 
    choices = request.POST.getlist('choice') 

私はあなたがチェックボックスに入力ラジオを変更する必要があります感じています。ラジオは複数の選択を許可しませんが、チェックボックスは有効です。 ここをクリックしてください：https://docs.djangoproject.com/en/dev/ref/request-response/#django.http.QueryDict.getlist

Answer 3

これはDjangoフォームで行うのが理想的です。 Djangoの書式はwidgetsであり、RadioSelectはそのうちの1つです。これを使用してフォームをレンダリングし、各質問に対する回答を一度に得ることができます。 しかし、それは現在あなたが物事をしている方法で多くの変更が必要になります。

あなたができることは、送信ボタンをクリックして、すべての質問/選択肢のペアを収集し、POSTリクエストでそれらを一度に送信することです。

{% for question in latest_question_list %} 
    <form> 
     <div class="row"> 
      <div class="col-topic"> 
       <label>{{ question.question_text }}</label> 
      </div> 
      {% for choice in question.choice_set.all %} 
       <div class="col-select"> 
        <input type="radio" name="choice" value="{{ choice.id }}" /> 
        <label for="choice{{ forloop.counter }}">{{ choice.choice_text }}</label><br /> 
       </div> 
      {% endfor %} 
     </div> 
    </form> 
{% endfor %} 
<input id="submit-btn" type="submit" value="Vote" /> 

<script> 
    $(document).on('click', '#submit-btn', function(event){ 
     var response_data = [] 
     var question_objs = $('.col-topic'); 
     var choice_objs = $('.col-select'); 

     for(i=0;i<question_objs.length;i++){ 
      var question_text = $(question_objs[i]).find('label').text(); 
      var choice_id = $(choice_objs[i]).find('input').val(); 
      var choice_text = $(choice_objs[i]).find('label').text(); 
      var question_choice = { 
       "question_text": question_text, 
       "choice_id": choice_id, 
       "choice_text": choice_text 
      } 
      response_data.push(question_choice); 
     } 
     $.ajax({ 
      type: "POST", 
      url: "url_to_your_view", 
      data: response_data, 
      success: function(response){ 
       alert("Success"); 
      } 
     }); 
    }); 
</script> 

このように表示されます。今

def question_choice_view(request): 
    if request.method == "POST": 
     question_choice_data = request.POST['data'] 
     # further logic 

、question_choice_dataは、辞書のリストです。リスト内の各辞書には、ユーザーの応答のquestion_text、choice_textおよびchoice IDが含まれます。