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
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示例图
