Как отправить данные с несколькими динамическими идентификаторами форм с помощью Djano, Ajax и javascript?

Question

Извините, до этого у меня был плохой английский.Поэтому я хочу отправить данные из формы django с помощью ajax и javascript, но проблема в том, что у меня есть кнопка добавления, чтобы добавить больше полей, каждый раз, когда я добавляю поле, увеличивается идентификатор поля

Я уже пробовал с одним идентификатором формы,его успех, но с несколькими динамическими идентификаторами это не удалось

Мой HTML:

    {{ ipform.management_form }}
    {% for form in ipform %}
    <div class="form-group">
    <div class="row form-row spacer">
      <div class="col-2">
        <label>{{form.ipaddr.label}}</label>
      </div>
      <div class="col-4">
        <div class="input-group">
          {{form.ipaddr}}
          <div class="input-group-append">
            <button class="btn btn-success add-form-row">+</button>
          </div>
          <div class="col-2">
            <p id="cekip"></p>
          </div>
        </div>
      </div>
    </div>
    </div>
    {% endfor %}

Javascript:

function updateElementIndex(el, prefix, ndx) {
    var id_regex = new RegExp('(' + prefix + '-\\d+)');
    var replacement = prefix + '-' + ndx;
    if ($(el).attr("for")) $(el).attr("for", 
$(el).attr("for").replace(id_regex, replacement));
    if (el.id) el.id = el.id.replace(id_regex, replacement);
    if (el.name) el.name = el.name.replace(id_regex, replacement);
}

function cloneMore(selector, prefix) {
    var newElement = $(selector).clone(true);
    var total = $('#id_' + prefix + '-TOTAL_FORMS').val();
    newElement.find(':input').each(function() {
        var name = $(this).attr('name')
        if(name) {
            name = name.replace('-' + (total-1) + '-', '-' + total + '-');
            var id = 'id_' + name;
            $(this).attr({'name': name, 'id': id}).val('').removeAttr('checked');
        }
    });
    total++;
    $('#id_' + prefix + '-TOTAL_FORMS').val(total);
    $(selector).after(newElement);
    var conditionRow = $('.form-row:not(:last)');
    conditionRow.find('.btn.add-form-row')
    .removeClass('btn-success').addClass('btn-danger')
    .removeClass('add-form-row').addClass('remove-form-row')
    .html('-');
    return false;
}

function deleteForm(prefix, btn) {
    var total = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
    if (total > 1){
        btn.closest('.form-row').remove();
        var forms = $('.form-row');
        $('#id_' + prefix + '-TOTAL_FORMS').val(forms.length);
        for (var i=0, formCount=forms.length; i<formCount; i++) {
            $(forms.get(i)).find(':input').each(function() {
                updateElementIndex(this, prefix, i);
            });
        }
    }
    return false;
}

$(document).on('click', '.add-form-row', function(e){
    e.preventDefault();
    cloneMore('.form-row:last', 'form');
    return false;
});

$(document).on('click', '.remove-form-row', function(e){
    e.preventDefault();
    deleteForm('form', $(this));
    return false;
});

еще js:

$(document).ready(function() {
    $('input#id_form-0-ipaddr').keypress(function() {
        var _this = $(this); 
        setTimeout(function() {
            //ajax ..
        }, 3000);
    });
});

поле и идентификатор поля вот так

• [поле ввода ipaddress] [+] => идентификатор входа = form-0-ipaddr

• [поле ввода ipaddress] [+] => идентификатор входа = form-1-ipaddr

• [поле ввода ipaddress] [+] => идентификатор входа = form-2-ipaddr

[+] = кнопка добавления, каждый раз при добавлении формы входной идентификатор увеличивается

просто отправьте первое поле

Answer 1

Поскольку у меня нет информации о вашем проекте, я хочу привести вам пример, который вы можете использовать.Создайте файл forms.py, если у вас его нет *

from django.forms import formset_factory
from django import forms

class IPForm(forms.Form):
    ipaddr= forms.CharField( 
        widget=forms.TextInput(attrs={
            'class': 'form-control',

        })
)

IPFormset = formset_factory(IPForm, extra=1)

Доп. Значение может быть равно 100 в зависимости от количества форм, которые вы хотите использовать в браузере (просмотр). Затем в файле views.py импортируйте IPFormset

from .forms import IPFormset
from .models import YourModel

Так что используйте IPFormset вместо вашего обычного класса форм, который вы использовали здесь ранее.и вернуть его как ipform

И в вашем шаблоне (html page)

<form class="form-horizontal" method="POST" action="">
{% csrf_token %}

{% for form in ipform %}
<div class="form-group">
    <div class="row form-row spacer">
      <div class="col-2">
        <label>{{form.ipaddr.label}}</label>
      </div>
      <div class="col-4">
        <div class="input-group">
          {{form.ipaddr}}
          <div class="input-group-append">
            <button class="btn btn-success add-form-row">+</button>
          </div>
          <div class="col-2">
            <p id="cekip"></p>
          </div>
        </div>
      </div>
    </div>
    </div>
{%endfor%}

И вы можете посмотреть в django formset https://docs.djangoproject.com/en/2.1/topics/forms/formsets/ для лучшего объяснения