kevinchappell/formBuilder

A jQuery plugin for drag and drop form creation

Ozeeee

@Ozeeee

Please anyone can help in guiding how to link the datasource of the select from an API and not via using the static options.

Ozeeee

@Ozeeee

@matthew.goulart_gitlab in fbOptions use typeUserAttrs: {text: { labelfr: { label: 'French Label' }}...

Epandudev

@Epandudev

@rcbeton Thank you., But I have got this from https://github.com/Draggable/formeo/blob/master/CHANGELOG.md

Ozeeee

@Ozeeee

Please anyone can help in binding API as source for the select control ... Many Thanks

Daniel Charlton

@DCharlo98

Hey, is anyone able to help me? I have implemented the form builder into a react app and it all works well, but when I press the save button, I want to be able to toggle the state of something in another component. I have tried associating the form builder and the modal with the state I want to toggle with a parent class that has both the state of the modal and the toggle method and I can pass this method well enough but I am unsure of how to call the method using the form builder as the onSave option is located outside of the render() and so cannot directly call the parent method. Any suggestions?

Anthony

@Arcnet505

Does anyone know how to call a redux action from the onSave function? I tried this.props.addForm(formData) (addform is the action) but I just got a TypeError saying addForm was undefined

Anthony

@Arcnet505

Update: just had to bind the onSave function by changing it to an arrow function.

onSave: (formData) => {
   //stuff
}

Gregory Varghese

@gregvarghese_twitter

Hi! Does anyone know if there's an event available when formData is loaded into FormBuilder? I'm trying to add an approved/rejected checkbox next to each form control for submitted data but I don't see any events in the docs that would let me do this. If there's no event, is there a way to accomplish this?

rcbeton

@rcbeton

@gregvarghese_twitter How about $('input').on('change', function)

Gregory Varghese

@gregvarghese_twitter

@rcbeton , will try that! I also realized I could just loop through all the fields on the page inside the div to do it.

Nshan

@Nshan0102

Hi there, I'm wondering to know how to make 2 formBuilders in one page

Is there anybody who can help me?

HELP ME TO CREATE 2 FORMBUILDERS IN ONE PAGE

Matthew Goulart

@matthew.goulart_gitlab

@Nshan0102 just call the form builder func on multiple divs...

Nshan

@Nshan0102

@matthew.goulart_gitlab
I had tried and it has built the new builder, but I can't access to it's actions, when I'm trying to get second builder's data or save it or just set data in it, it's giving an error which says
formBuilder.actions.getData()
is not a function

@matthew.goulart_gitlab
I would be grateful if you could help with this, otherwise I would have to connect another form builder

Nshan

@Nshan0102

here is my code if it's neccessary !

jQuery($ => {
    const fbEditor = document.getElementById("fb-editor");
    const formBuilderEn = $(fbEditor).formBuilder();
    const fbEditorRu = document.getElementById("fb-editor-ru");
    const formBuilderRu = $(fbEditorRu).formBuilder();
});

Nshan

@Nshan0102

console of both FormBuilders

Nshan

@Nshan0102

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="myFormEn"></div>
    <div id="myFormRu"></div>
    <button id="saveMyForms">Save</button>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
      <script src="https://formbuilder.online/assets/js/form-builder.min.js"></script>
    <script>
        jQuery($ => {
            var myFormBuilderEn = $('#myFormEn').formBuilder();
            var myFormBuilderRu = $('#myFormRu').formBuilder();
            var saveDatas = document.getElementById('saveMyForms');
            saveDatas.addEventListener('click', function(){
                console.log(myFormBuilderEn.actions.getData());
                console.log(myFormBuilderRu.actions.getData());
            });
        });
    </script>
</body>
</html>

error code

Uncaught TypeError: Cannot read property 'getData' of undefined
    at HTMLButtonElement.<anonymous> (index.html:20)

jogireddygowthami

@jogireddygowthami

hi guys

whether there is possibility of changing the date pattern while saving the value. value is saving {YYYY/MM/DD} need {DD/MM/YYYY}. pLease suggest the possibility

SynozeN IT Solutions

@SynozeN

Can someone help me?

Nshan

@Nshan0102

Hey guys! I have found how to use multiple formBuilders in the same page.
I'm going to post it in GitHub, but you can mail me if you need some solution for this problem
Nshan.Vardanyan.1996@gmail.com

Matthew Goulart

@matthew.goulart_gitlab

Hello all. I am wondering if FormBuilder has any built-in/intended way to perform input validation. Does the library include any kind of validation or should I implement my own? I'm thinking it would be nice to integrate with FormValidator by providint the 'data-validation' tags.

Matthew Goulart

@matthew.goulart_gitlab

@Ozeeee Thanks for the insight. Any idea if it's possible to add fields to things like radio options, checkbox options, etc? The examples only show it being done on high level elements like labels. Thanks.

Vivek Misra

@vivekmisra_gitlab

I need help Regards Form bukilder use with application

Form Builder not support in IE11 and Safari

Matthew Goulart

@matthew.goulart_gitlab

@vivekmisra_gitlab you probably need to use polyfill.

https://polyfill.io/v3/

When I get to work I'll paste the exact url I use.

Matthew Goulart

@matthew.goulart_gitlab

@vivekmisra_gitlab <script src="https://polyfill.io/v3/polyfill.min.js?features=Object.assign%2CObject.entries%2CPromise%2CArray.prototype.includes%2CArray.prototype.find%2CString.prototype.startsWith%2CObject.values%2CString.prototype.includes"></script>

Just add that to the top of you JS files. THe problem is IE doesn't support some of the JS functions necessary to get formbuilder working.

Vivek Misra

@vivekmisra_gitlab

but its not working after add script

Harutyun

@Harutyu62143706_twitter

Hello

Can someone help me?

Tabbed/Multi-page Forms is not working

Williams Abraham

@wapcrazut

@Harutyu62143706_twitter Apparently the project is being abandoned, there is a workaround on Stack Overflow but I didn't saved the page

I need to create a Block control for grouping many inputs inside it, this is possible?

toineKeistoer

@toineKeistoer

Hi guys, does anyone know where to find a list with all options we can use for custom fields?

maruthi2141

@maruthi2141

Hello can someone help me, after integration of formbuilder im not able to access save button..how can i use a save button

pushpendra90

@pushpendra90

Hello Someone can help me please if any way to change form field name "text-1565353740835" to "surname" ?

only93

@only93

Hi，guys,does anyone know how to bind data to controls?

pushpendra90

@pushpendra90

@only93 you can use like this to get data in json
formBuilder = fbEditor.formBuilder(fbOptions);
var formBuilderJSONData = formBuilder.actions.getData('json')

var postData = {
form_builder_json: formBuilderJSONData,
_token: window.FormBuilder.csrfToken
}
jQuery.ajax({
url: form.attr('action'),
processData: true,
data: postData,
method: method,
cache: false,
})
and post it by ajax to controller action

@toineKeistoer In the form builder create.js
you can find the option of form builder
use like this to add custom field

typeUserAttrs:{
text: {
readonly: {
label: 'readonly',
value: false,
},
},
},
it add this field into every drag and drop text box

only93

@only93

@pushpendra90 thanks,I will try then

pushpendra90

@pushpendra90

@only93 my pleasure to help you if you need any help ping me here

pushpendra90

@pushpendra90

@only93 and another second method is
// Initialise the form builder
var fb = $( '#form-builder' ).formBuilder();

// Post the data to a script which will save it to your db
$( '.save-template' ).on( 'click', function(){

$.ajax({
    url: 'save-form.cfm', // Point this to the file you create to save data
    type: 'POST',
    data: {
        formStructure: JSON.stringify( fb.actions.getData('json') )
    },
    success: function( response ){

        // Got a response
        console.log( 'Response from the save action: ' + response );

    },
    error: function( jqXHR ){

        // Something went wrong
        console.log( 'Error saving the form (details below)' );
        console.log( jqXHR );

    }

});

}

only93

@only93

@pushpendra90 Ijust want to bind data to a control .eg,when you drag a select control on the stage ,I hope the options which are already difined can be binded at the same time.

pushpendra90

@pushpendra90

@only93 When you drag a field data is already winded into form builder actions, if you need to get this you can use a single line when your event is done.
formBuilder = fbEditor.formBuilder(fbOptions);
var formBuilderJSONData = formBuilder.actions.getData('json')-return data in json on your eventlistener

Where communities thrive

People

Repo info

Activity