dynamically add field to a form

by

Your form would have to be constructed based on some variables passed to it from your POST (or blindly check for attributes). The form itself is constructed every time the view is reloaded, errors or not, so the HTML needs to contain information about how many fields there are to construct the correct amount of fields for validation.

I’d look at this problem the way FormSets work: there is a hidden field that contains the number of forms active, and each form name is prepended with the form index.

In fact, you could make a one field FormSet

https://docs.djangoproject.com/en/dev/topics/forms/formsets/#formsets

If you don’t want to use a FormSet you can always create this behavior yourself.

Here’s one made from scratch – it should give you some ideas. It also answers your questions about passing arguments to __init__ – you just pass arguments to an objects constructor: MyForm('arg1', 'arg2', kwarg1='keyword arg')

Forms

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()

View

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, "template", { 'form': form })

HTML

<form>
    <div id="forms">
        {{ form.as_p }}
    </div>
    <button id="add-another">add another</button>
    <input type="submit" />
</form>

JS

<script>
let form_count = Number($("[name=extra_field_count]").val());
// get extra form count so we know what index to use for the next item.

$("#add-another").click(function() {
    form_count ++;

    let element = $('<input type="text"/>');
    element.attr('name', 'extra_field_' + form_count);
    $("#forms").append(element);
    // build element and append it to our forms container

    $("[name=extra_field_count]").val(form_count);
    // increment form count so our view knows to populate 
    // that many fields for validation
})
</script>

More Related Contents:

  1. How do I filter ForeignKey choices in a Django ModelForm?
  2. Django set default form values
  3. Creating a dynamic choice field
  4. Django Passing Custom Form Parameters to Formset
  5. Django: multiple models in one template using forms [closed]
  6. Django reverse lookup of foreign keys
  7. Django ModelForm for Many-to-Many fields
  8. Multiple Models in a single django ModelForm?
  9. Django-Registration & Django-Profile, using your own custom form
  10. Define css class in django Forms
  11. Django formsets: make first required?
  12. How does Django Know the Order to Render Form Fields?
  13. How do I add a placeholder on a CharField in Django?
  14. How to create a UserProfile form in Django with first_name, last_name modifications?
  15. Change Django ModelChoiceField to show users’ full names rather than usernames
  16. Django: adding an “Add new” button for a ForeignKey in a ModelForm
  17. Using request.user with Django ModelForm
  18. Overriding the save method in Django ModelForm
  19. What’s the best way to store a phone number in Django models?
  20. How to change the file name of an uploaded file in Django?
  21. Customize/remove Django select box blank option
  22. Pre-populate an inline FormSet?
  23. Django – form.save() is not creating ModelForm
  24. How to set and get session variable in django?
  25. How do I filter values in a Django form using ModelForm?
  26. Change a Django form field to a hidden field
  27. Django form.as_p DateField not showing input type as date
  28. Django – Working with multiple forms
  29. CSRF Token missing or incorrect
  30. Django ModelForm to have a hidden input

Leave a Comment