title: Dynamically adding and removing fields on django template
body: <p>A newbie, I am stuck with a problem and I feel it is more to do with me reading too much about it before trying it. And now since I am trying it is confusing me. Hoping you would be able to take out some time to assist.</p>
  
  <p>Here is what I am trying to do.</p>
  
  <p>I would like to dynamically add model form fields on HTML. So for ex; a user is trying to add steps to a recipe, he/she can add multiple steps and may even remove some of these steps. I want this to happen dynamically on the rendered page it self.</p>
  
  <p>I would like to start with a very very simple example. </p>
  
  <p>I have ready formset and model formset in django docs. Also, have gone through many SO answers. There are many instances where these fields are added without using formsets.</p>
  
  <p>I have tried it my self with a few examples but I think I am mixing up everything that I have read.</p>
  
  <p>Also, my js is not that strong but I used it for the examples I tried they don't seem to be working but they are less of my worries.</p>
  
  <p>Here is the code I tried from one of the answers on SO:</p>
  
  <p><strong>views.py</strong></p>
  
  <pre><code>def myview(request):
  if request.method == 'POST':
      form = MyForm(request.POST, extra=request.POST.get('extra_field_count'))
      if form.is_valid():
          print "valid!"
  else:
      form = MyForm()
  return render(request, "test/test.html", { 'form': form })
  </code></pre>
  
  <p><strong>forms.py</strong></p>
  
  <pre><code>class MyForm(forms.Form):
      original_field = forms.CharField()
      extra_field_count = forms.CharField(widget=forms.HiddenInput())
  
      def __init__(self, *args, **kwargs):
          extra_fields = kwargs.pop('extra', 0)
  
          super(MyForm, self).__init__(*args, **kwargs)
          self.fields['extra_field_count'].initial = extra_fields
  
          for index in range(int(extra_fields)):
              # generate extra fields in the number specified via extra_fields
              self.fields['extra_field_{index}'.format(index=index)] = \
              forms.CharField()
  </code></pre>
  
  <p><strong>template</strong></p>
  
  <pre><code>{% extends 'base.html' %}
  &lt;script&gt;
  {% block jquery %}
      form_count = $("[name=extra_field_count");
      // get extra form count so we know what index to use for the next item.
      $("#add-another").click(function() {
          element = $('&lt;input type="text"/&gt;');
          element.attr('name', 'extra_field_' + form_count);
          $("#forms").append(element);
          // build element and append it to our forms container
  
          form_count ++;
          $("[name=extra_field_count]").val(form_count);
          // increment form count so our view knows to populate 
          // that many fields for validation
      })
  {% endblock %}
  &lt;/script&gt;
  
  {% block content %}
  &lt;form method="POST"&gt;{% csrf_token %}
  &lt;div id="forms"&gt;
      {{ form.as_p }}
  &lt;/div&gt;
  &lt;button id="add-another"&gt;add another&lt;/button&gt;
  &lt;input type="submit" /&gt;
  &lt;/form&gt;
  
  {% endblock %}
  </code></pre>
  
  <p>Well, this wasn't successful. When I click "Add another Field" the page reloads and gives this Value Error "invalid literal for int() with base 10: 'NaN'". Anyway I don't know if this is the right solution for me. little confused I would get this with formset for ModelForm.  </p>