Working with WTForms FieldList Working with WTForms FieldList flask flask

Working with WTForms FieldList


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


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.