我正在尝试创建一个基于表单中的选择生成文件的系统。目前我使用 FormIO 从 json 结构生成表单。FormIO 表单生成器
因此，当我按下提交时，它会下载一个包含我选择的值的文件。我知道它已经生成了对象。但我不知道如何用这个过滤它。
现在它会生成包含此文件的文件。但我只想拥有单选按钮值和名称。
{"data":{"radio2":1,"howLongShouldItWait":12,"submit":true},"metadata":{"timezone":"Europe/Brussels","offset":60,"referrer":"","browserName":"Netscape","userAgent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:65.0) Gecko/20100101 Firefox/65.0","pathName":"/C:/Users/Jan/Desktop/IPP_conf/index.html","onLine":true},"state":"submitted","saved":false}
所以我最终想要的是这样的
#define WAIT_TIME 3
#define OVERRIDE_BUTN
用于下载文件和 JSON 部分的 js 函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>Configuration form</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/formiojs@latest/dist/formio.full.min.css">
<script src="https://unpkg.com/formiojs@latest/dist/formio.full.min.js"></script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="resources/logo64x64.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1 class="mt-5">Settings</h1>
<div id="formio"></formio>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script>
Formio.icons = 'fontawesome';
Formio.createForm(document.getElementById('formio'), {
"display": "form",
"components": [
{
"label": "Test",
"optionsLabelPosition": "right",
"values": [
{
"label": "Yes",
"value": "1",
"shortcut": ""
},
{
"label": "No",
"value": "0",
"shortcut": ""
}
],
"inline": true,
"mask": false,
"tableView": true,
"alwaysEnabled": false,
"type": "radio",
"input": true,
"key": "radio2",
"defaultValue": 1,
"validate": {
"customMessage": "",
"json": ""
},
"conditional": {
"show": "",
"when": "",
"json": ""
},
"encrypted": false,
"properties": {},
"customConditional": "",
"logic": [],
"reorder": false
},
{
"label": "How long should it wait?",
"optionsLabelPosition": "right",
"values": [
{
"label": "1 Hour",
"value": "1",
"shortcut": ""
},
{
"label": "12 Hours",
"value": "12",
"shortcut": ""
}
],
"inline": true,
"mask": false,
"tableView": true,
"alwaysEnabled": false,
"type": "radio",
"input": true,
"key": "howLongShouldItWait",
"defaultValue": 12,
"validate": {
"customMessage": "",
"json": ""
},
"conditional": {
"show": "",
"when": "",
"json": ""
},
"encrypted": false,
"reorder": false,
"properties": {},
"customConditional": "",
"logic": []
},
{
"label": "Generate",
"state": "",
"theme": "primary",
"shortcut": "",
"disableOnInvalid": true,
"mask": false,
"tableView": true,
"alwaysEnabled": false,
"type": "button",
"key": "submit",
"input": true,
"defaultValue": false,
"validate": {
"customMessage": "",
"json": ""
},
"conditional": {
"show": "",
"when": "",
"json": ""
},
"encrypted": false,
"properties": {
"test": "5"
},
"tags": [],
"showValidations": false,
"event": "",
"url": "",
"custom": "",
"reorder": false,
"customConditional": "",
"logic": []
}
],
}).then(function (form) {
var filename = "settings.h";
function download(filename, text) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
form.on('submit', function (submission) {
console.log(submission);
download(filename, JSON.stringify(submission));
});
});</script>
</body>
</html>我在提交变量上尝试了一个 for 循环。但我不知道如何选择确切的数据。
提前致以诚挚的问候和感谢