How to store data into database by using form builder?

[ceteongvanness]

How to store data into SQL database by using form builder ?

[pradeepasp]

You just need to get the formatted data from formbuilder and send to api to store.

you can use this below var formBuilder = {}; var template = document.getElementById('fb-template'), formBuilder = $(template).formBuilder(); var formdata1 = formBuilder.data('formBuilder').formData; $.post('/Home/SaveFormBuilder', { formhtml: formdata1.toString() }, function (result) { // your action goes here });

[max-kk]

You need edit compiled or .coffe files. Find function doAjaxSave

BuilderView.prototype.saveForm = function(e) {
  var payload;
  if (this.formSaved) {
    return;
  }
  this.formSaved = true;
  this.saveFormButton.attr('disabled', true).text(Formbuilder.options.dict.ALL_CHANGES_SAVED);
  this.collection.sort();
  payload = {
    fields: JSON.stringify(this.collection.toJSON()),
    title: jQuery(".form-title").val()
  };
  if (Formbuilder.options.HTTP_ENDPOINT) {
    this.doAjaxSave(payload);
  }
  return this.formBuilder.trigger('save', payload);
};

BuilderView.prototype.doAjaxSave = function(payload) {
  var _this = this;
  return $.ajax({
    url: fv_add_query_arg('action', Formbuilder.options.HTTP_SAVE_ACTION, Formbuilder.options.HTTP_ENDPOINT),
    type: Formbuilder.options.HTTP_METHOD,
    data: payload,
    //contentType: "application/json",
    success: function(data) {
      data = FvLib.parseJson(data);
      if (data.success) {
        return jQuery.growl.notice({
          message: 'Form Saved!'
        });
      } else {
        return jQuery.growl.warning({
          message: data.message
        });
      }
    }
  });
};

And need pass params on init (form, savin url, etc):

<script>
    var $ = jQuery;
    FvLib.addHook('doc_ready', function() {
        var fb = new Formbuilder({
            selector: '.fb-main',
            bootstrapData: jQuery.parseJSON('<?php echo $form->fields; ?>'),
            bootstrapTitle: '<?php echo $form->title; ?>',
        });

        Formbuilder.options.HTTP_ENDPOINT = "<?php echo add_query_arg('form_id',$form->ID, wp_nonce_url( admin_url('admin-ajax.php') )); ?>";
        Formbuilder.options.HTTP_SAVE_ACTION = "fv_save_form_structure";
        Formbuilder.options.HTTP_RESET_ACTION = "fv_reset_form_structure";
        Formbuilder.options.HTTP_METHOD = "POST";
        Formbuilder.options.FORM_ID = <?php echo $form->ID; ?>;
    });
</script>        

Function, that add param to URL.

function fv_add_query_arg(key, value, url) {
    var urlParts = url.split("?");
    var newQueryString = "";
    if (urlParts.length > 1)
    {
        var parameters = urlParts[1].split("&");
        for (var i=0; (i < parameters.length); i++)
        {
            var parameterParts = parameters[i].split("=");
            // replaceDuplicates
            if (parameterParts[0] != key)
            {
                if (newQueryString == "")
                    newQueryString = "?";
                else
                    newQueryString += "&";
                newQueryString += parameterParts[0] + "=" + parameterParts[1];
            }
        }
    }
    if (newQueryString == "")
        newQueryString = "?";
    else
        newQueryString += "&";
    newQueryString += key + "=" + value;

    return urlParts[0] + newQueryString;
}

This code is a few customized (added form titla and other changes), but you can see how it can be edited. Some php functions are from Wordpress (wp_nonce_url, admin_url, etc), so change them, if not used WP.

Saving form example:

$form_data = $_POST;
if ( empty($_GET['form_id']) ) {
    fv_AJAX_response(false, 'No Form_id passed!');
}

//  || !is_array($form_data['fields'])
if ( empty($form_data['fields']) || empty($form_data['title']) ) {
    fv_AJAX_response(false, 'No Form data passed!');
}

$form_ID = (int) $_GET['form_id'];

// Get JSON snd save it to BD
$form_fields_json = $form_data['fields'];
$form_title = sanitize_text_field($form_data['title']);

ModelForms::q()->updateByPK( array(
                'title'=>$form_title,
                'fields'=>$form_fields_json,
                'last_edited'=>current_time('timestamp')
            ), $form_ID );

Code is taken from my plugin http://wp-vote.net/