[英]How to get data from jquery form builder if there are multiple form initialized on the same page
我有这样的代码：
<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>
如果它是由 id 初始化的，那么我可以通过这样的方式获取数据：
var fbEditor = document.getElementById('build-wrap');
var formBuilder = $(fbEditor).formBuilder();
document.getElementById('getJSON').addEventListener('click', function() {
alert(formBuilder.actions.getData('json'));
});
但是，我正在使用类名来初始化表单生成器。 有什么办法，当点击保存时，获取相应的表单生成器数据？ 我正在使用https://formbuilder.online/
这是 jsfiddle： https ://jsfiddle.net/xycvbj3r/3/
#PS：php 循环中可能有许多表单生成器。
你可以试试这个：
formBuilder.actions.getData('json');
要么：
formBuilder.actions.getData();
现场演示在这里：http: //jsfiddle.net/dreambold/q0tfp4yd/10/
我也面临着同样的问题。 这对我有用
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);
要获取数据，您可以使用 instances[key].actions.getData()
我不确定您打算如何保存这些数据，但是为了帮助您解决获取特定表单的表单数据的问题，您可以使用类似这样的方法
var formBuilder = $(document.getElementsByClassName('build-wrap')).first().data('formBuilder').actions.getData()
或者在 jQuery Collection 上使用它
$(document.getElementsByClassName('build-wrap')).each(function () {
var formBuilder = $(this).data('formBuilder').actions.getData()
})
文档中提到了一个回调， onsave在编辑器保存时运行。 因此，当单击任何表单构建器的保存按钮时，可以接收相关表单的数据。
这是代码-
<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>
这是小提琴（由于无法使用 CDN，无法创建工作片段。）- https://jsfiddle.net/nehasoni988/rpo1jnuk/1/#&togetherjs=Mka9TJ4cex
jQuery preventDefault正在刷新页面并以数组形式显示JSON-如何使此数据恢复为相同格式？
[英]JQuery preventDefault is refreshing page & displaying JSON as an array - how to get this data back into the same form?
如何使用jQuery从同一页面上的数据库记录填充表单
[英]How to use jquery to populate a form from database record on the same page
如何获取具有多个 select 的表单数据，类似于 jquery val？
[英]How to get form data with multiple select, similar to jquery val?
如何将数据从表单获取到javascript并重定向到另一个页面？
[英]How to get data from form to javascript and redirect to another page?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.