Hi,

I have had to rename some function names in the builder and render. I run automated tests using selenium web driver. When running it in htmlunit it throws the following error on a few lines. Renaming the functions to be different to the variable names seems to do the trick. I am currently using version 1.9.10 but will need to update soon. Could you please rename the functions to fix this so I do not have to do so for each update.

ReferenceError: Assignment to undefined "formBuilderHelpers" in strict mode (http://localhost:8000/javascript/formbuilder/form-builder.js#10)

Changes made:

form-builder.js
ln 10
var formBuilderHelpers = function formBuilderHelpersFn(opts, formBuilder) {
ln 721
var formBuilderEvents = function formBuilderEventsFn(opts, _helpers) {

from-render.js
ln 56
var FormRender = function FormRenderFn(options, element) {

Hi Kevin,

I'm trying to make changes to some existing form elements. For example: instead of checkbox, I want to make it like a True & False toggle.
I am kinda lost when going thu your code. Wonder if you can shed some lights on how to either add new element or modify existing one.

Thanks,
Trong

When opening Button modification panel in the stage, button type dropdown is set as "button" even when XML states subtype="submit".

Might be related: .fld-className is missing set CSS classes, defaults to btn btn-default when XML states class="btn btn-success".

If I initialize formBuilder based on following xml, it doesn't work properly

<form-template>
    <fields>
        <field label="Checkbox Group" name="checkbox-group-1458766047820" type="checkbox-group">
            <option value="option-1">some text</option>
            <option value="option-2">another text</option>
            <option value="fsadfdas">some another text</option>
        </field>
    </fields>
</form-template>

It will produce the following result.
http://i.imgur.com/UrJcfFy.png
No matter what

The problem persist on radio buttons too.

The problem appeared in the latest versions.
In the Version: 1.7.5, it's working well.

I used v1.9.14 version, and try to put some elements into the textarea in the form builder design web page.
then I try to get the xml after click "Save" button the patrial code as below.
var xmlString = $('.frmb').toXML();

I found there bug some error in form-builder.js

With the addition of classes attribute this field is now redundant and should be removed. Autocomplete field would have a dependency on jQuery UI Autocomplete and since formBuilder in general is moving away from jQuery it may be time for it to go.

Hello,

I am trying to add additional textareas to the page I am building (using Telerik RadEditors - but a standard HTML textarea exhibits the same behavior). When I add the textarea, the whole page is thrown off (e.g. form builder controls are repeated, etc...).

Is there anyway around this?

Thanks.
Daniel

I try to set some defaultFields as below. I click the reander form button before I drop any form element into textarea ,it can't render any forms ,but after put an element then it works:

<script>
        jQuery(document).ready(function ($) {
            'use strict';
            var template = document.getElementById('fb-template'),
              formContainer = document.getElementById('rendered-form'),
              renderBtn = document.getElementById('render-form-button');
            var options = {
                fieldRemoveWarn: true,
                defaultFields: [{
                    label: 'Form Name',
                    name: 'fb_forname',
                    required: true,
                    description: 'Enter a Form Name !',
                    maxlength: 200,
                    className: "form-control",
                    type: 'text'
                }, {
                    description: "",
                    className: "btn btn-primary",
                    label: "Submit",
                    name: "fb_formsubmit",
                    required: "false",
                    type: "button"
                }]
            };
            $(template).formBuilder(options);
            $(renderBtn).click(function (e) {
                e.preventDefault();
                $(template).formRender({
                    container: formContainer
                });
            });
        });
    </script>

To reload fields in the formBuilder i have to enter their structure in the defaultFields option...
currently the only type whose template i found was 'text'..

I specifically want to know how to add the options for select list and checkbox group types...

Is there a defaultFields equivalent in formRender.. or something that can help me sink in the field data

To reproduce:

1. Drag a Mulitple field to the stage (/select|checkbox-group|radio-group/ )
2. Edit the field options
3. Close edit form
4. see preview is not updated

It allows to check all radio boxes while it should only allow to select one radio box.

Here's attachment file.

The help text entered in formBuilder doesn't show up in formRender... that a given?

I am integrating this plug in rails application.
In HTML page i used the code given at http://kevinchappell.github.io/formBuilder/ . But it always give an error for fromBuilder.
I think the sequence of requiring the javascript files is somehow wrong.

The code in application.js is:

//= require jquery
//= require form-builder
//= require jqueryui-1.10.3.min
//= require jquery_ujs
//= require jquery.turbolinks
//= require bootstrap-sprockets
//= require jquery.dataTables.min
//= require dataTables.bootstrap
//= require jquery.validate
//= require jquery.validate.additional-methods
//= require_tree .

And
here is my HAML file code:

%link{:href => "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css", :media => "screen", :rel => "stylesheet", :type => "text/css"}
.demo-wrap
/ MAIN CONTENT
#main_content_wrap.outer
%section#main_content.inner
.build-form
%h2
%strong Build The Form
%form{:action => ""}
%textarea#form-builder-template{:cols => "30", :name => "form-builder-template", :rows => "10"}
%br{:style => "clear:both"}
.render-form
%h2
%strong Render The Form
%form#rendered-form
%p.cta Add some fields to the formBuilder above and render them here.
.render-description
%h3 Try it out
%button#render-form-button.btn.btn-primary Render form
%br{:style => "clear:both"}
-#%script{:src => "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"}
-#%script{:src => "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"}

:javascript
jQuery(document).ready(function($) {
'use strict';
var template = document.getElementById('form-builder-template'),
formContainer = document.getElementById('rendered-form'),
renderBtn = document.getElementById('render-form-button');
console.log(template)
$(template).formBuilder();
$(renderBtn).click(function() {
$(template).formRender({
container: $(formContainer)
});
});
});
:javascript
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

ga('create', 'UA-4784386-21', 'auto');
ga('send', 'pageview');

How do i fix this ?

Sorry if this was answered somewhere, I couldn't find if it was. Is there a way to append additional classes to the fields? I'd like to be able to wrap the form elements with some additional CSS classes that would be in addition to the classes that are autogenerated by formBuilder.

Even though you have the bower file did you actually register it yet?

I was able to change the language of form during initialization e.g as explain in this example provided by Kevin chappel . But what if i want to change the language in the middle of form creation or user want to save a form with English and a french version.
Do i have to re initialize the form with new language messages on language change event??

It doesn't appear that the close button works (checkbox groups, selects). I'm not sure it's needed since it's not consistent between the different controls -- it doesn't appear when editing a textbox, for example.

Or maybe I'm misinterpreting the function?

Hi Kevin,

I was wondering if you could tell me a way to hide the following items (possibly using CSS display:none):
"Save Template" button
"View XML" link

For each form item:
Name field
"Access" field

I just don't want them to appear on screen.

Thank you.
Daniel

As pointed out by @BenjaminPiscart the required attribute is not rendered correctly.

The formbuilder works fine locally. However when I tried to push it to prod, I encountered a Syntax issue in the form-builder.js
How do I solve this issue?

 238        if (fieldClass.match(/(select|checkbox-group|radio-group)/)) {
 239          previewData.values = [];
 240  
 241          $('.sortable-options li', field).each(function() {
 242            let option = {};
      ==============^
      SyntaxError: missing ; before statement
 243            option.selected = $('.select-option', $(this)).is(':checked');
 244            option.value = $('.option-value', $(this)).val();
 245            option.label = $('.option-label', $(this)).val();
 246  
 247            previewData.values.push(option);
 248          });
 249        }

IS there a way to maybe add headers, like h1, h2 and h3 to the menu and drag them onto the form?

In formBuilder and formRender the max-length attribute should be maxlength.

Should formBuilder 2.0 have Header tags by default?

In IE the logic in form-render.js for the radio group and select controls are generating labels with undefined as the label contents. This is happening due to an issue in IE when you try to access innerHTML on the dynamically generated elements. http://stackoverflow.com/questions/8999998/javascript-innerhtml-is-not-working-for-ie

Fix on my end was to change:

optionsMarkup += '<option ' + optionAttrsString + '>' + el.innerHTML + '</option>';

to

optionsMarkup += '<option ' + optionAttrsString + '>' + optionAttrs.value + '</option>';

And:

optionsMarkup += '<input ' + optionAttrsString + ' /> <label for="' + optionAttrs.id + '">' + el.innerHTML + '</label><br>';

to:

optionsMarkup += '<input ' + optionAttrsString + ' /> <label for="' + optionAttrs.id + '">' + fieldAttrs.value + '</label><br>';

Thanks for the library its been quite useful.

Brian

Form render fails on this XML

<form-template>
    <fields>
        <field label="Checkbox Group" name="checkbox-group-1458765767942" type="checkbox-group">
            <option value="option-1">< Option 1</option>
            <option value="option-2">< Option 2</option>
        </field>
    </fields>
</form-template>

So, the problem is character "<" in the option name.

A common question is how to disable specific fields in formBuilder like Autocomplete. The simplest way to accomplish this is to hide it from the user with css like this:

.frmb-control .icon-autocomplete {
    display: none;
}

There are use cases however where the field type should not exist in DOM at all. For this I propose changing the current disabledFields option to accept an array of field types that should not be rendered. Initializing formBuilder with this option would look like this:

var fbTemplate = document.getElementById('fb-template'),
    options = {
      disabledFields: ['autocomplete']
    };
$(fbTemplate).formBuilder(options);

The only catch is that disabledFields is already an option used to prepend and append uneditable fields/html to the beginning and end of the form. For this reason the second part of this proposal is to reassign that functionality to new options called prepend and append respectively.

Please use the comments here to vote up or down and make suggestions related to this proposal.

Voting ends Feb, 26 2016

Hey Kevin,
I wasn't sure the best way to ask the question, so posting it as an issue. Does formBuilder support multiple columns. Or, maybe I need a different to think about it, but the goal woud be to have the possibililty of fields being side-by-side on the form instead only one field per row. Sorry if you already answered a similar question.

Thanks.

Hi,

I was wondering if it's possible to have something like a language setting. So that I only have to create a form once (and not for every language) and I am able to name e.g. the label attributs in the different languages.

Thanks in advance!

Hello kevin,
I need to add form builder in my website in a week or two.
can you please inform me about the release date for Form Builder 2.0 as i am planning to use a from builder with html 5 elements.

By the way very nice plugin!

Hi,
Thank you for the code to build forms online...
i am unable to write the code for saving the template..can u help me to do...

Hi, I have some problems with groups (checkbox and radiobutton). All changes aren't showing on UI after editing and aren't saving to XML.
This problem even present on your demo.
Maybe I'm doing smth wrong?

Hi Kevin,

Hope you are doing well. Thank you for your continued work on this especially correcting some issues with the last release.

However, there is an error in your generated XML when creating RadioGroups (CheckboxGroups appear to be okay).

The XML generated for a RadioGroup is as follows:
<field name="radio-group-1445351957780" label="Did you enjoy the presentation and will you attend another one?" description="" required="true" type="radio-group"/> <option label="I like it and would attend.">1</option> <option label="I like it but would not attend.">2</option> <option label="I am indifferent to it.">3</option> <option label="I don't really care for it.">4</option> </field>

Notice the starting field element is self-closing. You need to remove the / at the end of the tag otherwise it is breaking as non-valid XML.

Just a heads up.

Thanks,
-Daniel

Was trying to install the most recent version of this from GitHub through Bower. The only options I was getting was 1.2 and 1.3. Resorted to Downloading a zip version but may be useful to others.

Hey.. I feel bad that i've opened so many issues on day-1 with the formBuilder.
But I think that proves it's an amazing plugin... and i'm already a dependent

So, when i finish sorting the elements on the form, the xml isn't re-rendered unless something else is done to trigger the render( like adding a new element, or editing an attribute of an existing one)..

Any way to trigger a re-render of the XML for the new sorted order.. after a sort?

Het Kevin,

I was trying to add some custom fields in one of my project, for doing so i have to edit form-builder.js

What i was expecting if can extend custom fields in a separate file,so that i can update library in the next release.

Is there any way to do so..?

Hi,

If a hidden input is used on the form, when it is rendered it will cause all other items underneath it to not render.

Cheers

Bower keeps installing 1.6.4.
I'm assuming it's because that's the latest tag it can find... please push the 1.6.5 tag.

Following XML breaks because of ä, I imagine all other umlauts act same way.

<form-template>
    <fields>
        <field class="btn" label="L&auml;het&auml;" name="button-1458140997967" type="submit" subtype="submit"/>
    </fields>
</form-template>

Edit: jQuery.parseXML returns the error.

Hi Kevin,
Just a small thought & favor. Both form-builder & form-render are currently minified. Can you please provide an unminified version? I have tried to use some online tools but the form builder kept crashing somehow.

Thanks,

Currently you have support to add a Class to the input control itself, would you consider allowing Classes to be added to a control's associated label and parent container div? This would pretty much give full control, via bootstrap, to supporting columns and label location (relative to the control).

For example:

<div class="form-group COL-MD-6 field-text-input-1458998906140">
        <label class="COL-MD-2 COL-MD-PUSH-8" for="text-input-1458998906140">Text Field  </label>
        <input class="COL-MD-8 COL-MD-PULL-2 form-control" name="text-input-1458998906140" type="text" subtype="text" id="text-input-1458998906140">
</div>

My idea would be to put add "Parent Class" and "Label Class" fields alongside the current "Class" field. If that makes sense.

Hello,

First - thanks for your work on this utility.

Next set of questions for this:

1. I noted in a previous question asked that you are writing the generated XML to a hidden textarea on screen (cool). My question is if I want to re-load a previously saved form (e.g. to allow a user to edit a previously created form), do I just set the value of the hidden textarea to the previously saved XML on page load?
2. If I want to add/remove a field type or if I want to add an attribute to a field type, how can I go about doing that? An example - is for each field, I want the user to be able to select from a dropdown a DB field to map the data to.

Thank you.
Daniel

Hi,

Thanks again for implementing the good plugin.

I was looking for documentation for following. Can you please let me know if following possible,

1. Is there any option to not allow user to change form "field_name". First time when creating the fields, yes we need the field name (even autogenerated field name is fine too).

But once we start saving data into database, using the field name, and if user changing field name, it's making it tough to match the field name with data that was already saved with earlier form field name. Possible when re displaying fields (via defaultFields input element), can we can have option to not allow user to change field name.

2. For the allowed list of form fields that can be added, we want to avoid having "File Input" and "Hidden Field". Is there any option to not have these fields on right side of allowed fields.

Thanks

Whats the right way to convert generated xml back to form again. Whats the rendering method

Hey Guys,

I am trying to update default fields through ajax. but not able to do that. When i tried to do that with new set of default fields, it did nothing...

Can you guys please suggest me, How to do it?

Thanks.

1- Add a placeholder text option for text field input.

2 - Is this compatible with Bootstrap?

Great plugin by the way

I am trying to get json formate of formBuilder and want to store into mysql database. Is there any way to do? There is no enough information on your docs. Thanks a lot

I'm trying implement an auto-update feature...
instead of having to run a setinterval() to track the change, would it be possible to just trigger a change event when the text area is updated and i listen to that change?

for a quick fix.. just show me the area of the code to implement the change and I make a quick fork of the project.