Unable to add new field option to dobtco formbuilder plugin

问题

I am building a web application in which I am using this form builder plugin: https://github.com/dobtco/formbuilder.

I am trying to add a new field option that will be visible in all form fields. Like this:

Formbuilder.options = {
            BUTTON_CLASS: 'fb-button',
            HTTP_ENDPOINT: '',
            HTTP_METHOD: 'POST',
            AUTOSAVE: false,
            CLEAR_FIELD_CONFIRM: false,
            mappings: {
                SIZE: 'field_options.size',
                UNITS: 'field_options.units',
                LABEL: 'label',
                FIELD_TYPE: 'field_type',
                REQUIRED: 'required',
                ADMIN_ONLY: 'admin_only',
                OPTIONS: 'field_options.options',
                DESCRIPTION: 'field_options.description',
                INCLUDE_OTHER: 'field_options.include_other_option',
                INCLUDE_BLANK: 'field_options.include_blank_option',
                INTEGER_ONLY: 'field_options.integer_only',
                MIN: 'field_options.min',
                MAX: 'field_options.max',
                MINLENGTH: 'field_options.minlength',
                MAXLENGTH: 'field_options.maxlength',
                LENGTH_UNITS: 'field_options.min_max_length_units',
                SAVE_X_INFO: 'save_x_info' /* <--- This is added by me */
            },
            dict: {
                ALL_CHANGES_SAVED: 'All changes saved',
                SAVE_FORM: 'Save form',
                UNSAVED_CHANGES: 'You have unsaved changes. If you leave this page, you will lose those changes!'
            }
        };

The HTML code for this field option is generated using this code:

var infoSelectorHTML = '<div id="infos" style="display:inline-block"></div>&nbsp;&nbsp;<button class="edit" onclick="tagInfo(\'infos\'); return false"><i class="fa fa-plus-circle"></i> Select</button>';
this["Formbuilder"]["templates"]["edit/save_x_info"] = function (obj) {
    obj || (obj = {});
    var __t, __p = '',
        __e = _.escape;
    with (obj) {
        __p += '<div class=\'fb-edit-section-header\'>Save to Infos: </div>' + infoSelectorHTML + '<input id=\'fbInfoHidden\' style=\'display: none\' type="text" data-rv-input="model.' + ((__t = (Formbuilder.options.mappings.SAVE_X_INFO)) == null ? '' : __t) +
            '" />\n\n&nbsp;&nbsp;\n';
    }
    return __p
};

Now, this code works as follows:

User clicks Select button. A popup is opened.
From that popup user selects his/her profile info.
The ID of that info is saved inside #fbInfoHidden textbox.
This ID is now fetched by the form builder when saving data.

Problem starts from step 3. The ID sent by the popup is not assigning to the textbox's value. Here is the code that I am using to assign it:

function updateFBInfoData(fbInfoData) {
    var fbInfoHidden = $('#fbInfoHidden');
    if (fbInfoHidden != null)
        fbInfoHidden.val(fbInfoData);
}

fbInfoData is successfully receiving ID from the popup. But not assigning to fbInfoHidden textbox. Please tell me the reason for this?

And another problem in the form builder I am facing is that before using fbInfoHidden as a textbox, I was using it like a hidden field. That time ID was successfully assigned to fbInfoHidden hidden field. But at that time when form is saved, it's still not getting the value for save_x_info in the json data. Please tell me the solution in either of these two cases.

This plugin uses rivets.js, prototype.js, underscore.js and backbone.js plugin and I don't know a single thing about these plugins. As I only used pure JavaScript and JQuery till now. So unable to understand much of the code. Please tell me how to configure this to add custom field options.

UPDATE

This is how I am initializing form builder:

var formDesignData = $('#formDesignData').val();
    if (formDesignData == null)
        formDesignData = '[{}]'
    fb = new Formbuilder({
        selector: '.fb-main',
        bootstrapData: JSON.parse(formDesignData)
    });

    fb.on('save', function (payload) {
        SaveFormDesign(payload);
    })

UPDATE 2

The reason why the value of save_x_info is not being fetched from the field is because the data added to the textbox from the popup is not fetched but the data entered manually is being fetched successfully. I don't know why it is happening. But I know that it has something to do with rivets.js can you please tell me how to fix it?

来源：https://stackoverflow.com/questions/31685866/unable-to-add-new-field-option-to-dobtco-formbuilder-plugin

标签

javascript

jquery

html

forms

rivets.js