使用 Javascript 将表单动态添加到 Django 表单集

Question

我想使用 Javascript 自动将新表单添加到 Django 表单集，这样当用户单击“添加”按钮时，它会运行 JavaScript 将新表单添加到页面。

Answer 1

查看我使用的代码，

<script type="text/javascript">
$(document).ready(function(e){
$(".add-more a").click(function(e){
e.preventDefault();
var id_groupmembers_set = $('#id_groupmembers_set-TOTAL_FORMS').val();
$(".personal-info-grp ul.user-name").append($('#empty_form').html().replace(/__prefix__/g, id_groupmembers_set));
 $('#id_groupmembers_set-TOTAL_FORMS').val(parseInt(id_groupmembers_set) + 1);
});

$(".signin-form a.cross-btn").live("click", function(e){
e.preventDefault();
$(this).parent().parent().remove();
});
});
</script>

您可以在脚本中使用您的表单 ID 和所有内容。

示例表单是这样的

<div id="empty_form" style="display:none">
<li>
<div class="signin-form clearfix">
<div class="clearfix">
    <label><span>{% trans 'Name' %}<b>*</b></span>:</label>
    {{ members_form.empty_form.first_name }}{{ members_form.empty_form.name.errors.as_text }}
</div>
<div class="clearfix">
    <label><span>{% trans 'Age' %}<b>*</b></span>:</label>
    {{members_form.empty_form.age}}{{members_form.empty_form.age.errors.as_text}}
</div>
<div class="clearfix">
    <label><span>{% trans 'Gender' %}<b>*</b></span>:</label>
    {{members_form.empty_form.gender}}{{members_form.empty_form.gender.errors.as_text}}
</div>
<a href="#" class="cross-btn"><img src="/static/assets/images/cross-btn.png" alt="" />      </a>
</div>
</li>
</div>

利用它；）