Отправка формы с помощью Jquery в Django

Я хочу отправить форму с помощью jquery append. Но это не работает. Я добавляю поля, но когда я нажимаю кнопку отправки, отправляются только оригинальные поля. Дублирующие поля не отправляются. Как я могу это исправить. И еще, когда я удаляю поля, удаляется только одно поле вместо трех.

Первое изображение - оригинальные поля. enter image description here

Секонда изображение - клонирование полей с помощью jquery enter image description here

Третье - данные, которые отправляются с формой enter image description here

Вот мои коды...

models.py

from django.db import models

# Create your models here.

class Contact(models.Model):
    full_name=models.CharField(max_length=100)
    email=models.CharField(max_length=200)
    mesaj=models.CharField(max_length=200)

    def __str__(self):
        return self.full_name

views.py

from django.shortcuts import render
from .models import Contact
#from django.contrib import messages
# Create your views here.

def contact(request):
    if request.method=='POST':
        full_name=request.POST['full_name']
        email=request.POST['email']
        mesaj=request.POST['mesaj']
        contact=Contact.objects.create(full_name=full_name,email=email,mesaj=mesaj)
       # messages.success(request,'Data has been submitted')
    return render(request,'contact.html')

contact.html

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    
</head>
<body>
<div class="input_fields_wrap">
<form method="post" action="">   
   
    {% csrf_token %}
<input type="text" name="full_name" class="field-long" />
<input type="text" name="email" class="field-long" />
<input type="text" name="mesaj" class="field-long" />



<button type="button" class="add_field_button">Add Field</button>
<button type="button" class="remove_field_button">Remove Field</button>
</div><input type="submit" value="Submit" /></form>
</body>

<script>

var max_fields      = 10;
var wrapper         = $(".input_fields_wrap"); 
var add_button      = $(".add_field_button");
var remove_button   = $(".remove_field_button");

$(add_button).click(function(e){
    e.preventDefault();
    var total_fields = wrapper[0].childNodes.length;
    if(total_fields < max_fields){
        $(wrapper).append('<input type="text" name="full_name" class="field-long" />');
        $(wrapper).append('<input type="text" name="email" class="field-long" />');
        $(wrapper).append('<input type="text" name="mesaj" class="field-long" />');
    }
});
$(remove_button).click(function(e){
    e.preventDefault();
    var total_fields = wrapper[0].childNodes.length;
    if(total_fields>1){
        wrapper[0].childNodes[total_fields-1].remove();
    }
});

</script>

Ваша проблема здесь:

    $(wrapper).append('<input type="text" name="full_name" class="field-long" />');
    $(wrapper).append('<input type="text" name="email" class="field-long" />');
    $(wrapper).append('<input type="text" name="mesaj" class="field-long" />');

Каждый раз, когда вы создаете новое поле, оно имеет одно и то же значение name=. Когда форма отправляется с несколькими именами, используется только первое. Чтобы сделать поля динамическими, вы можете сделать что-то вроде:

    $(wrapper).append('<input type="text" name="full_name' + (total_fields + 1) + '" class="field-long" />');
    $(wrapper).append('<input type="text" name="email' + (total_fields + 2) + '" class="field-long" />');
    $(wrapper).append('<input type="text" name="mesaj' + (total_fields + 3) + '" class="field-long" />');

Вам придется также обрабатывать потенциальные дополнительные поля в представлении.

Однако в Django есть встроенный способ работы с несколькими формами одного типа. Взгляните на FormSets в документации django

Вернуться на верх