Hello, can someone help me? I am currently trying out form builder on my local machine based on Getting Started instructions in the docs. However the Save, Clear and Code Producing button on the bottom right is not working and is looking for specific assets.
Are there other codes needed for it to run?
I noticed than when adding a select field, by default there are 3 options added. This is an issue for me because when I use a form with a select field, it submits a value for the select field even if the user did not intend to set a particular value.
Is there a way to add an empty option when adding a select field?
I tried to look around onAddField but did not find how to do it.
Thx!
return fb.actions.getData('json');
}); then you save what it returns at the end.
1 reply
Query(($) => {
var $fbPages = $(document.getElementById("form-builder-pages"));
var addPageTab = document.getElementById("add-page-tab");
var fbInstances = [];
$fbPages.tabs({
beforeActivate: function(event, ui) {
if (ui.newPanel.selector === "#new-page") {
return false;
}
}
});
const result = <?php echo $questiondata->json_question; ?>;
let length = result.length;
var stepLen = length;
const res = result;
for (let i = 1; i <= stepLen; i++) {
let tabId = "step-" + i;
let $newPageTemplate = $(document.getElementById("new-page"));
let $newPage = $newPageTemplate.clone().attr("id", tabId).addClass("fb-editor");
let $newTab = $('#add-page-tab').clone().removeAttr("id");
let $tabLink = $("a", $newTab).attr("href", "#" + tabId).text("Step " + i);
$newPage.insertBefore($newPageTemplate);
$newTab.insertBefore('#add-page-tab');
$fbPages.tabs("refresh");
$fbPages.tabs("option", "active", 0);
let $newInstance = $newPage.formBuilder();
$newInstance.promise.then(function(fb) {
let formadata = res[i - 1];
fbInstances.push(formadata);
fb.actions.setData(formadata);
});
}
addPageTab.addEventListener(
"click",
(click) => {
const tabCount = document.getElementById("tabs").children.length;
const tabId = "page-" + tabCount.toString();
const $newPageTemplate = document.getElementById("new-page");
const $newTabTemplate = document.getElementById("add-page-tab");
const $newPage = $newPageTemplate.cloneNode(true);
$newPage.setAttribute("id", tabId);
$newPage.classList.add("fb-editor");
const $newTab = $newTabTemplate.cloneNode(true);
$newTab.removeAttribute("id");
const $tabLink = $newTab.querySelector("a");
$tabLink.setAttribute("href", "#" + tabId);
$tabLink.innerText = "Page " + tabCount;
$newPageTemplate.parentElement.insertBefore($newPage, $newPageTemplate);
$newTabTemplate.parentElement.insertBefore($newTab, $newTabTemplate);
$fbPages.tabs("refresh");
$fbPages.tabs("option", "active", tabCount - 1);
fbInstances.push($($newPage).formBuilder());},
false
);
$(document.getElementById("save-all")).click(function() {
const allData = fbInstances.map((fb) => {
return fb.actions.getData();
});
var jsondata = JSON.stringify(allData);
//$('#jsondata').val(jsondata);
console.log(jsondata);
});
});
addPageTab.addEventListener(
"click",
(click) => {
click.preventDefault();
const tabCount = document.getElementById("tabs").children.length;
const tabId = "page-" + tabCount.toString();
const $newPageTemplate = document.getElementById("new-page");
const $newTabTemplate = document.getElementById("add-page-tab");
const $newPage = $newPageTemplate.cloneNode(true);
$newPage.setAttribute("id", tabId);
$newPage.classList.add("fb-editor");
const $newTab = $newTabTemplate.cloneNode(true);
$newTab.removeAttribute("id");
const $tabLink = $newTab.querySelector("a");
$tabLink.setAttribute("href", "#" + tabId);
$tabLink.innerText = "Page " + tabCount;
$newPageTemplate.parentElement.insertBefore($newPage, $newPageTemplate);
$newTabTemplate.parentElement.insertBefore($newTab, $newTabTemplate);
$fbPages.tabs("refresh");
$fbPages.tabs("option", "active", tabCount - 1);
fbInstances.push($($newPage).formBuilder(fbOptions));
}, false);
fbInstances.push(fbEditor.formBuilder(fbOptions));
i have same issue as tomcodes from jun 09 :
Hello again, question on the drag'n'drop of fields.
It is working flawlessly on a computer. However on touch devices (iPhone, iPad) it does not work, instead the click is "taken" by the scroll.
I have no problems on the demo here https://formbuilder.online/
But when I grab the basic exemple available and put it in a .html file, it does not work: https://formbuilder.online/docs/getting-started/
Am I missing something?
1 reply