追加された要素の値を取得する方法

Question

質問を入力するフォームがあります。このフォームには最初に2つのinputスロットがありますが、ボタンをクリックすると別のinputが追加され、別の選択肢が追加されます。問題は、これらの追加要素に値を渡すことができないことです。どのように私はそれを行うことができます任意のアイデア？ここに私のコードは次のとおりです。

モデル

class Question(models.Model): 
    has_answered = models.ManyToManyField(User, through="Vote") 
    question_text = models.CharField(max_length=80) 
    date = models.DateTimeField(auto_now=True) 
    total_votes = models.IntegerField(default=0) 

    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=100) 
    votes = models.IntegerField(default=0) 
    percent = models.IntegerField(default=0) 

    def __str__(self): 
     return self.choice_text 

ビュー

def questions(request): 
    question_form = QuestionForm(request.POST or None) 
    choice_form = ChoiceForm(request.POST or None) 
    if request.user.is_authenticated(): 
     if question_form.is_valid(): 
      question = question_form.save(commit=False) 
      question.save() 

      choices = request.POST.getlist('choice_text') 
      for choice in choices: 
       Choice.objects.create(choice_text=choice, question=question) 
     else: 
      print(question_form.errors) 

    return render(request, 'questions.html', {'question_form': question_form, 'choice_form': choice_form}) 

テンプレート

<form method="post" action="">{% csrf_token %} 
     {{ question_form.question_text|placeholder:"Question" }} 
    <br><br> 
    <!--{{ choice_form.choice_text|placeholder:"Choice" }}--> 
    <input class="choice" name="choice_text" placeholder="Choice" type="text" /> 
    <input class="choice" name="choice_text" placeholder="Choice" type="text" /> 

    <img src="{% static 'images/plus.png' %}" class="add_choice" /> 

     <button class="submit" type="submit">Submit question</button> 
</form> 

JS（選択フィールドのための別の入力が追加されます）

$(document).on('click', '.add_choice', function(){ 
    $(this).after('<input type="text" class="choice" placeholder="Choice" name="choice_text" /><img src="/static/images/plus.png"' + " class='add_choice' />"); 
}); 

Answer 1

'choice'という名前のクラスが複数あるので、送信中に値を抽出するために単純に反復処理を行うことができます。

$.each($('.choice'), function() { 
    var data_value = $(this).val(); 
    alert(data_value); 
});