django 同时提交多个重复表单formset_factory

formset_factory

官方文档:https://docs.djangoproject.com/en/3.0/topics/forms/formsets/

 

Step1 写个自定义表单

Step2 forms.formset_factory(ReceiptForm, extra=1)注册

class ReceiptForm(forms.Form):
    invoice_number = forms.CharField(
        widget=forms.TextInput(attrs={
            'placeholder': 'Enter Receipt No.',
            'required': True,
        })
    )
    limit_day = (datetime.now()-timedelta(13)).strftime('%Y-%m-%d')
    invoice_issue_date = forms.CharField(
        widget=forms.TextInput(attrs={
            'type': 'text',
            'autocomplete': 'off',
            'readonly': 'readonly',
            'placeholder': 'Enter Receipt Issue Date',
            'required': True,
        })
    )
    invoice_amount = forms.CharField(
        widget=forms.TextInput(attrs={
            'type':'number',
            'placeholder': 'Enter Receipt Amount (in HK$)',
            'required': True,
        })
    )
    record_type = forms.ChoiceField(choices=RECORD_TYPE_CHOICES, required=True)
ReceiptFormset = forms.formset_factory(ReceiptForm, extra=1)

Step3 显示模板

def tttttt(request):
    get_transaction_results = None

    formset = ReceiptFormset(None)

    if request.method == 'POST':
        formset = ReceiptFormset(request.POST, request.FILES)
        if formset.is_valid():
            for form in formset:
                invoice_amount = form.cleaned_data.get('invoice_amount')
    return render(request, 'ttttt.html', {
        'formset': formset,
    })

Step4 html

{% csrf_token %}
Claim Records
{{ formset.management_form }} 主要 {% for form in formset %}主要
{{ form.invoice_issue_date }}
{{ form.record_type }}
{{ form.invoice_amount }}
{% endfor %}

Step5 JS

$('form').on('submit', function() {
                var formData = new FormData(this);
                var token = '{{csrf_token}}';
                if(validateForm()){
                    $.ajax({
                        headers: { "X-CSRFToken": token },
                        type: 'POST',
                        url: '/concierge/submission_form/',
                        data: formData,
                        enctype: 'multipart/form-data',
                        processData: false,
                        contentType: false,
                        cache: false,
                        timeout: 600000,
                        success: function(results){
                            console.log(results);
                            console.log("Submit Complete");
                            if (results.status == 'success'){
                                alert(results.message);
                                $('form').trigger("reset");
                                resetForm();
                            }
                            else{
                                alert('Fail to submit the form\n' + results.message);
                            }
                        },
                        error: function (e) {
                            alert(e.responseText);
                            console.log("ERROR : ", e);
                        }
                    });
                }
            });


            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:not([type=button]):not([type=submit]):not([type=reset])').each(function() {
                    var name = $(this).attr('name').replace('-' + (total-1) + '-', '-' + total + '-');
                    var id = 'id_' + name;
                    $(this).attr({'name': name, 'id': id}).val('').removeAttr('checked');
                });
                newElement.find('label').each(function() {
                    var forValue = $(this).attr('for');
                    if (forValue) {
                    forValue = forValue.replace('-' + (total-1) + '-', '-' + total + '-');
                    $(this).attr({'for': forValue});
                    }
                });
                total++;
                $('#id_' + prefix + '-TOTAL_FORMS').val(total);
                $(selector).after(newElement);
                return false;
            }
            function deleteForm(prefix, btn) {
                var total = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
                if (total > 1){
                    $('.form-item:last').remove();
                    var forms = $('.form-item');
                    $('#id_' + prefix + '-TOTAL_FORMS').val(forms.length);
                    for (var i=0, formCount=forms.length; i

示例图

django 同时提交多个重复表单formset_factory_第1张图片

 

你可能感兴趣的:(Django)