我正在做一個表格，在填寫完這些欄位后會發送一封電子郵件。電子郵件必須包含表單中寫入的所有資訊，但在表單中我做了一個按鈕來添加更多專案，這將出現“選擇組件”和“數量”兩個新欄位。如何從這些欄位中獲取資料，這些欄位將在單擊“添加組件”并放入我的電子郵件后創建？
我的意見.py
def home(request):
if request.method == 'POST':
form = Form(request.POST)
if form.is_valid():
type = form.cleaned_data['type']
serialNumber = form.cleaned_data['serialNumber']
itemNumber = form.cleaned_data['itemNumber']
date = form.cleaned_data['date']
phase = form.cleaned_data['phase']
capacity = form.cleaned_data['capacity']
centerQuantity = form.cleaned_data['centerQuantity']
componentQuantity = form.cleaned_data['componentQuantity']
componentSelection = form.cleaned_data['componentSelection']
commentary = form.cleaned_data['commentary']
html = render_to_string('emails/email.html', {
'type': type,
'serialNumber': serialNumber,
'item': itemNumber,
'date': date,
'phase': phase,
'capacity': capacity,
'centerQuantity': centerQuantity,
'componentQuantity': componentQuantity,
'componentSelection': componentSelection,
'commentary': commentary,
}
)
send_mail('ATEN??O', 'Message', '[email protected]', ['[email protected]'], html_message=html, fail_silently=False)
return redirect('home')
else:
form = Form()
return render(request, 'template.html', {
'form': form
})
我的html檔案：
<body>
<div>
<h2> Engine Information</h2>
<table>
<form action="." method="POST" hx-post=".">
{% csrf_token %}
<tbody>
<tr>
<th>Type</th>
<td>{{form.type}}</td>
</tr>
<tr>
<th>Serial Number</th>
<td>{{form.serialNumber}}</td>
<th>or Material Number</th>
<td>{{form.itemNumber}}</td>
</tr>
<tr>
<th>Manufactoring Date</th>
<td>{{form.date}}</td>
<th>Phase</th>
<td>{{form.phase}}</td>
<th>Capacity</th>
<td>{{form.capacity}}</td>
<th>Center Quantity</th>
<td>{{form.centerQuantity}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="component-form">
<h2>Component</h2>
<div class="parts-form">
<table id="component">
<tbody>
<tr>
<th>Select the component</th>
<td>{{form.componentSelection}}</td>
</tr>
<tr>
<th>Component Quantity</th>
<td>{{form.componentQuantity}}</td>
</tr>
</tbody>
<div id="form-added"></div>
</table>
</div>
<button id="add-more" type="button">Add component</button>
<table>
<tbody>
<tr>
<th>Commentary</th>
<td>{{form.commentary}}</td>
</tr>
</tbody>
</table>
<input type="submit" id="button" value="Submit">
</form>
</div>
<script>
const AddMoreBtn = document.getElementById('add-more')
AddMoreBtn.addEventListener('click', add_new_form)
function add_new_form(event) {
if (event) {
event.preventDefault()
}
//id
const newId = document.getElementsByClassName('parts-form')
const idIncrement = newId.length 1
//
const formAdd = document.getElementById('form-added')
//add new empty form
var componentForm = document.getElementById('component').cloneNode(true)
componentForm.setAttribute('class', 'parts-form')
//id increment
componentForm.setAttribute('id', `form-${idIncrement}`)
formAdd.append(componentForm)
}
</script>
</body>
</html>
我的forms.py：
from django import forms
material_type = (
('material', 'Search with material'),
('serial', 'Search with serial number'),
)
component_type = (
('AIR FILTER', 'AIR FILTER'),
('ALUMINIUM FAN', 'ALUMINIUM FAN'),
('BEARING CAP DE', 'BEARING CAP DE')
)
class Form(forms.Form):
type = forms.ChoiceField(choices=material_type, initial="Select One Option")
serialNumber = forms.CharField(label='Serial Number', required=False)
itemNumber = forms.IntegerField(label='Item Number', required=False)
date = forms.DateField(label='Manufactoring Date',widget=forms.DateInput(attrs={'placeholder':'Ex: 10/05/2022'}))
phase = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Ex: Monophasic'}))
capacity = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Ex: 15cv'}))
centerQuantity = forms.IntegerField(label='Center Quantity')
componentSelection = forms.ChoiceField(choices=component_type, label='Component Selection')
componentQuantity = forms.IntegerField(label='Component Quantity')
componentSelection1 = forms.ChoiceField(choices=component_type, label='Component Selection', required=False)
componentQuantity1 = forms.IntegerField(label='Component Quantity', required=False)
commentary = forms.CharField(widget=forms.Textarea(attrs={"rows":8, "cols":80}))
我的電子郵件.html
<h2 id="title">Submission</h2>
<br>
<p>Type: {{type}}</p>
<p>Serial Number: {{serialNumber}}</p>
<p>Item: {{item}}</p>
<p>Manufactoring Date: {{date}}</p>
<p>Capacity: {{capacity}}</p>
<p>Center Quantity: {{centerQuantity}}</p>
<p>Component Quantity: {{componentQuantity}}</p>
<p>Component Selection: {{componentSelection}}</p>
<p>Commentary: {{commentary}}</p>
<style>
.title{
margin-bottom: 2px;
}
</style>
uj5u.com熱心網友回復：
使用簡單的 django 視圖和表單處理這種情況并不容易。
- 您需要使用 javascript 中的遞增索引和欄位名稱來設定輸入名稱屬性。
- 將增量計數器值添加到表單中的特殊欄位，以便 django 知道使用 javascript 添加了多少欄位。
- 在
__init__()表單的方法中，您必須使用提供的遞增索引動態添加欄位。 - 在您的視圖中，您也可以使用遞增索引來迭代動態欄位。
一些有用的鏈接：
- https://github.com/dabapps/django-forms-dynamic
- https://www.caktusgroup.com/blog/2018/05/07/creating-dynamic-forms-django/
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/524049.html
上一篇：苗條的形式解構系結