我为我的django项目创建了一个动态表单集,用于动态添加和删除表单。为了在重新编号后保留字段的值,我在重新编号前保存字段的值并且在重新编号表单后分配相同的值。它在文本输入中工作得很好,但由于我在javascript方面的经验和知识有限,我无法保留所选选项的价值。
我们非常欢迎任何帮助和建议。
谢谢。
<style type="text/css">
fieldset {
border: none;
}
</style>
<form id="demo" action="{% url 'my_formset' %}" method="POST">
{% csrf_token %}
{{p_form}}
<br>
<hr>
<!-- Keep Track of the Total Form Here -->
<input id="total_forms" name="TOTAL_FORM_COUNT" value="0" type="hidden">
<!-- This is the Form that will be duplicated. We will hide this form. -->
<fieldset disabled class="empty-form" style="display: none">
<fieldset class="fieldset" id="fs_0">
<label>Name</label>
<input type="text" id="id-f-0-name" name="id-f-0-name" value="">
<label>Select:</label>
<select id="id-f-0-item" name="id-f-0-item" placeholder="">
<option disabled selected value={{None}}> Select Item </option>
<option value='1'>Butter</option>
<option value='2'>Milk</option>
<option value='3'>Tofu</option>
<option value='4'>Soyabeans</option>
</select>
<button type="button" id="d-0" class="delete_form" onclick="del_form(this.id);">
DELETE
</button>
</fieldset>
</fieldset>
<!-- This is where we will insert the form -->
<fieldset class="forms">
</fieldset>
<!-- This is the ADD Button to add New Forms -->
<fieldset class="controls">
<button type="button" onclick="addForm();">
Add new form
</button>
</fieldset>
<br>
<br>
<button type="submit">Save</button>
</form>
<br>
<br>
<script type="text/javascript">
var emptyForm = document.querySelector('.empty-form').firstElementChild; // Form to Clone
var formsList = document.querySelector('.forms'); // Div to Add New Form to
var totalForms = document.querySelector("#total_forms"); // To Keep Count of Total Form
var fieldset = document.getElementsByClassName("fieldset"); // To get all individual input form under the formset
var formCount = fieldset.length - 1; // Count for Python starts from 0 and we already have one empty fieldset
var min_form = "{{min_form}}"
const del_btnRegex = /d-(d){1,}/g;
const formRegex = /f-(d){1,}-/g;
function renumber() {
var fieldsets = document.getElementsByClassName("fieldset");
for (i = 0; i < fieldsets.length; i++) {
console.log(i);
fieldsets[i].id = `fs_${i}`;
f = fieldsets[i].getElementsByTagName('input');
for (c = 0; c < f.length; c++){
x = f[c];
const v = x.value;
x.id = x.id.replace(formRegex, `f-${i}-`);
x.name = x.name.replace(formRegex, `f-${i}-`);
x.setAttribute('value',v);
};
//I am having problems here
s = fieldsets[i].getElementsByTagName('select');
for (c = 0; c < s.length; c++){
x = s[c];
const vi = x.selectedIndex;
x.id = x.id.replace(formRegex, `f-${i}-`);
x.name = x.name.replace(formRegex, `f-${i}-`);
x.selectedIndex = vi;
};
}
};
function update_del_btn_id() {
let count = 0;
for (let f of fieldset) {
f.innerHTML = f.innerHTML.replace(del_btnRegex, `d-${count++}`)
}
};
function addForm(){
//Copy Empty Form
var newForm = emptyForm.cloneNode(true);
//Insert the Copied Form
formsList.insertAdjacentElement('beforeend', newForm);
formCount++; //increases the formCount variable
//Increase the Total Form Count to loop in python
totalForms.setAttribute('value', `${formCount}`);
renumber();
update_del_btn_id();
show_hide_del_button();
}
function del_form(id){
//var id = event.srcElement.id.slice(2,);
var id = id.slice(2,);
console.log(id);
document.getElementById(`fs_${id}`).remove();
formCount--;
totalForms.setAttribute('value', `${formCount}`);
renumber();
update_del_btn_id();
show_hide_del_button();
}
function show_hide_del_button() {
var delBtn = document.getElementsByClassName('delete_form');
if (delBtn.length-1 <= min_form) {for (var i = delBtn.length-1; i >= 0; i--){delBtn[i].style.display='none'}}
else{for (var i = delBtn.length-1; i >= 0; i--) {delBtn[i].style.display='inline-block';}};
}
</script>
像这样更新Delete按钮的ID,以避免写入innerHTML。写入innerHTML会导致表单和选择选项重新加载。此外,不需要捕获文本字段或选择选项的值并重新分配值。它将保持原样。
function update_del_btn_id() {
var del_btns = document.getElementsByClassName("delete_form");
for (i = 0; i < del_btns.length; i++) {
del_btns[i].id = `d-${i}`;
}; };
function renumber() {
var fieldsets = document.getElementsByClassName("fieldset");
for (i = 0; i < fieldsets.length; i++) {
console.log(i);
fieldsets[i].id = `fs_${i}`;
f = fieldsets[i].getElementsByTagName('input');
for (c = 0; c < f.length; c++){
x = f[c];
x.id = x.id.replace(formRegex, `f-${i}-`);
x.name = x.name.replace(formRegex, `f-${i}-`);
};
s = fieldsets[i].getElementsByTagName('select');
for (c = 0; c < s.length; c++){
x = s[c];
x.id = x.id.replace(formRegex, `f-${i}-`);
x.name = x.name.replace(formRegex, `f-${i}-`);
};
}};