CODEWITHSUNDEEP
pythonajaxformsflaskwtforms
Kiran Jonnalagadda
Kiran Jonnalagadda

Reputation: 2826

Working with WTForms FieldList

I use WTForms with Flask via the Flask.WTF extension. This question isn't Flask-specific, though.

WTForms includes a FieldList field for lists of fields. I'd like to use this to make a form where users can add or remove items. This will require some sort of Ajax framework to dynamically add widgets, but the WTForms documentation makes no mention of it.

Other frameworks like Deform come with Ajax support. Is there a similar framework available for WTForms?

Upvotes: 12

Views: 9378

Answers (2)

Dave
Dave

Reputation: 3261

I used something like this with my FieldList/FormField to allow adding more entries:

$(document).ready(function () {
    $('#add_another_button').click(function () {
        clone_field_list('fieldset:last');
    });
});

function clone_field_list(selector) {
    var new_element = $(selector).clone(true);
    var elem_id = new_element.find(':input')[0].id;
    var elem_num = parseInt(elem_id.replace(/.*-(\d{1,4})-.*/m, '$1')) + 1;
    new_element.find(':input').each(function() {
        var id = $(this).attr('id').replace('-' + (elem_num - 1) + '-', '-' + elem_num + '-');
        $(this).attr({'name': id, 'id': id}).val('').removeAttr('checked');
    });
    new_element.find('label').each(function() {
        var new_for = $(this).attr('for').replace('-' + (elem_num - 1) + '-', '-' + elem_num + '-');
        $(this).attr('for', new_for);
    });
    $(selector).after(new_element);
}

Remove buttons would be much trickier.

(Code mostly borrowed from answer to Dynamically adding a form to a Django formset with Ajax.)

Upvotes: 7

Vinay Sajip
Vinay Sajip

Reputation: 99530

From your description, I can't see why Ajax is particularly needed, though of course you do need JavaScript logic to add/remove rows. I've implemented this functionality using WTForms, but with with no special support from WTForms itself; you just need to ensure that when you create client-side widgets, you do this using field names that WTForms will parse correctly into the server-side list. You can clone an existing row using client-side JavaScript to add rows, so that the rendering of a row is consistent across rows generated server-side and rows created client-side.

Upvotes: 1

Related Questions