Multiple forms on the same page

[florent-dehanne]

Description:

Hi,

I try to have multiples forms on the same page (one for each language). However, when I try to get data, it's always the data from the last form.

Thanks.

Environment Details:

• formBuilder Version: 3.4.2
• Browser: Chrome 83
• OS: MacOS

Expected Behavior

Data of all forms

Actual Behavior

I get data of last form instead of data of each form.

Example

https://jsfiddle.net/fdehanne/1j9c8fry/14/

<button id="save">Save</button>
<div class="render"></div>
<div id="formEditor-fr_FR" data-culture="fr_FR" class="form-editor"></div>
<div id="formEditor-en_GB" data-culture="en_GB" class="form-editor"></div>

var formsBuilder = [];

$(function() {
  $('.form-editor').each(function() {
    var culture = $(this).attr('data-culture');
    formsBuilder[culture] = $(this).formBuilder();
  });

  $(document).on('click', '#save', function() {
    $('.render').html('');
    for (var culture in formsBuilder)
    {
      $('.render').append(culture + '<br>');
      var data = formsBuilder[culture].formData;
      $('.render').append(data + '<br>');
    }
  });
});

[ngjulia]

I have the same issue, however I am trying to render multiple forms on one page, and formRender.('userData') only retrieves the user data from the last form as well.

[myowinthein]

Only initiate multiple form builder instance with promise & recursive function. Check example here.

https://github.com/kevinchappell/formBuilder/issues/965#issuecomment-526204831

[ngjulia]

Will this work for form-rendering as well? @myowinthein

[myowinthein]

Sure, here is the sample of my usage.

Initiate Multiple Instances

let formIDs = ['#form1', '#form2']
let fbInstances = []
let options = [............]

let init = function(i) {
    if (i < formIDs.length) {
        options['formData'] = [] // add existing form components here (for rendering)
        $(formIDs[i]).formBuilder(options).promise.then(res => {
            fbInstances.push(res)
            i++
            init(i)
        })
    }
}

init(0)

Without recursive function, all previous form instance will be override by later one. In above case, outputting of form1 will always show as form2.

Get Data from All Instances on Submit

const formData = []

fbInstances.forEach(fbInstance => {
    formData.push(fbInstance.actions.getData())
})

Never use these methods for getting data. Even if you initiate form builder with recursive function, only the components of last builder will return. Use this instead.

[maximus1127]

when I do this, I get Cannot read property 'then' of undefined. the first form id in #form1 gets rendered, but the second one never does. The way I solved this was to render like normal:

let fbInstances = []
        let intakeForm = $('#formBuilderIntake').formRender({
            formData: //my formdata here
        });

fbInstances['intake'] = intakeForm

Then later down the page:

let symptomForm = $('#formBuilderSymptom').formRender({
            formData: //my formdata again
        });
fbInstances['symptom'] = symptomForm

Now the user data can be accessed like this: form1responses = fbInstances['intake']['userData']

I hope this helps someone in the future.

[lucasnetau]

formRender does not have the promise interface, only multiple formBuilder instances need to be created via awaiting the promise interface.