Question 14961 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to get data from jquery form builder if there are multiple form initialized on the same page

I have a code like this:

<html>
<head>
    <title>Example formBuilder</title>
</head>
<body>

<div class="build-wrap"></div>
<div class="build-wrap"></div>


  <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(function($) {
    $(document.getElementsByClassName('build-wrap')).formBuilder();
  });
  </script>
</body>
</html>

If it was initialized by id, then I could have get data with something like this:

  var fbEditor = document.getElementById('build-wrap');
  var formBuilder = $(fbEditor).formBuilder();

  document.getElementById('getJSON').addEventListener('click', function() {
    alert(formBuilder.actions.getData('json'));
  });

However, I am using classname to initialize form builder. Is there any way, when click on save, get the respective form-builder data? I am using https://formbuilder.online/

Here is jsfiddle: https://jsfiddle.net/xycvbj3r/3/

#PS: there could be numerous form builder inside php loop.

Tags:

4

Answers


  1. 0

    You can try this:

    formBuilder.actions.getData('json');

    Or:

    formBuilder.actions.getData();

    The live demo is here: http://jsfiddle.net/dreambold/q0tfp4yd/10/

    Login or Signup to reply.
  2. 0

    I was facing the same issue too. This worked for me

    var list = ['#ins1', '#ins2', '#ins3'];
          var instances = [];
          
          var init = function(i) {
            if (i < list.length) {
              var options = JSON.parse(JSON.stringify([]));
                  $(list[i]).formBuilder(options).promise.then(function(res){
                console.log(res, i);
                instances.push(res);
                i++;
                init(i);
              });
            } else {
              return;
            }
            
          };
          init(0);

    And to get data, you can use instances[key].actions.getData()

    Login or Signup to reply.
  3. 0

    I am not sure how you are planning to save this data, but to help with your problem of getting form data for a particular form you can use something like this

    var formBuilder = $(document.getElementsByClassName('build-wrap')).first().data('formBuilder').actions.getData()

    Or to use it over a jQuery Collection then

    $(document.getElementsByClassName('build-wrap')).each(function () {
    var formBuilder = $(this).data('formBuilder').actions.getData()
})
    Login or Signup to reply.
  4. 0

    There is a callback mentioned in the documentation, onsave which runs on editor save. So, when clicking on any form builder’s save button, the respected form’s data can be received.

    Here is the code-

    <html>
  <head>
    <title>Example formBuilder</title>
  </head>
  <body>
    <div class="build-wrap"></div>
    <div class="build-wrap"></div>
    <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(function($) {
        var options = {
          onSave: function(evt, formData) {
            // This is the respected form's data
            console.log('MY DATA_________', formData)
          },
        };
        $(document.getElementsByClassName('build-wrap')).formBuilder(options); 
      });
    </script>
  </body>
</html>

    Here is the fiddle (couldn’t create a working snippet due to not working CDNs.
    )- https://jsfiddle.net/nehasoni988/rpo1jnuk/1/#&togetherjs=Mka9TJ4cex

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search