在表单中添加动态字段(Django）

Add dynamic fields in forms (Django)

本文关键字：Django 字段 动态 表单 添加      更新时间：2023-09-26

我有一个定义为：

class testForm(forms.Form):
    book = forms.CharField(label='Book:', widget=forms.TextInput())

我正在尝试在表单中添加动态字段。 这意味着文本框旁边有一个按钮，如果单击该按钮，则在原始文本框下会出现一个新文本框，而此表单只是一个表单。

在我的模板中：

<table>
   {{form.as_table}}
   <table class = 'request'>
         {{form.as_table}}
   {#  <input type="button" onclick="addTextBox()"/>#}
   {#   <span id="response"></span>#}
   </table>
    <br>
    <input type="submit" value="Submit">
 </table>

我不想更改我的模板，所以我正在尝试使用 js 来完成它。

var countBox = 1;
var boxName = 0;
function addTextBox(){
   boxName = "textBox"+countBox;
   document.getElementById('response').innerHTML+='<br/><input type="text" 
   id="'+boxName+'" value="'+boxName+'" "  /><br/>';
   countBox += 1;
 }

但它没有做我想做的事，有人有一些想法吗？

我不知道

这对你来说是否合适，但你可以尝试使用一个带有一个表单的页面，该页面可以添加所有新书并显示其他表单。基本上，当您通过表单添加新书籍时，它将使用 ajax 刷新页面，表单不会去任何地方，您的书将在数据库中，因此将显示在同一页面中。

这是基本代码：views.py：

def all(request):
    obj = Books.objects.all()
    ...

模板：

<div id='books'>
{% for o in objs %}
    {{ o }}
{% endfor %}
    <form method='POST' action='#' enctype='multipart/form-data'>
        {% csrf_token %}
        // your form
        <table>
            {{form.as_table}}
        <table class = 'request'>
            {{form.as_table}}
        {#  <input type="button" onclick="addTextBox()"/>#}
        {#   <span id="response"></span>#}
        </table>
        <br>
        // end of your form
        <input type="submit" value="Submit">
        </table>
        <input class="ui button" type='submit' value='Add Skill' /> 
    </form>
</div>
<script type="text/javascript">
        $("#addform").submit(function(e) {
          var url = $(this).attr('action');
          var formData = new FormData(this);
            $.ajax({
                   type: "POST",
                   url: url,
                   data: formData,
                   async: false,
                   cache: false,
                   contentType: false,
                   processData: false,
                   success: function(data)
                   {
                   $("#books").load("# #books");
                   }
                 });
                e.preventDefault();
            });    
</script>

如果我遇到同样的问题，我会接受，但这当然是你的决定。

相关文章：