Добавить динамических полей в формах (Django)

Question

я форма определяется как:

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; 
} 

Но это не делает то, что я хочу. У кого-нибудь есть идеи?

Answer 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> 

Если бы я столкнуться с такой же вопрос, я бы с этим, но это ваше решение, конечно, ,