如何使用 Django、Ajax 和 javascript 发送具有多个动态表单 ID 的数据？

Question

抱歉，我的英语不好。所以我想用ajax和javascript从django表单发送数据，但问题是我有添加按钮来添加更多字段，每次我添加字段时，字段id都会增加

我已经尝试过使用单个表单 id，它成功了，但是使用多个动态 id 失败了

我的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);
    });
});

像这样的字段和字段id

• [ipaddress 输入域][+] => 输入id = form-0-ipaddr

• [ipaddress 输入字段][+] => 输入id = form-1-ipaddr

• [ipaddress 输入域][+] => 输入id = form-2-ipaddr

[+] = 添加按钮，每次添加表单，输入id增加

它只是发送第一个字段

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页面）

<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/ 为了更好的解释