ManipulatedFieldId key usage example
In this example, when a user selects an option from the dropdown menu for the select type field, the daysNumber field should automatically update to reflect the value associated with the currently selected option's amount value. This means that the daysNumber field will contain the numeric value corresponding to the selected option, ensuring that the user's choice is accurately represented in the form
[
{
"formName": "formName_01"
},
{
"groups": [
{
"groupName": "Informazioni Generali",
"tabName": "Dati pratica",
"tab": true,
"column": true,
"content": {
"rows": [
{
"name": "firstRow",
"column": true,
"fields": [
{
"Type": "select",
"id": "expertiseType",
"label": "Model",
"visible": true,
"readOnly": false,
"options": [
{
"label": "ForTwo",
"value": "ForTwo",
"amount": 30
},
{
"label": "ForFour",
"value": "ForFour",
"amount": 40
}
],
"manipulatedFieldId": "daysNumber"
},
{
"Type": "integer",
"id": "daysNumber",
"label": "Daily Amount Of Model",
"visible": true,
"readOnly": true
}
]
}
]
}
}
]
},
{
"conditions": []
}
]
<!DOCTYPE html>
<html lang="en">
<head>
<!-- load plugin style -->
<link
href="https://plugins.wedat.eu/form-builder/plugin.css"
rel="stylesheet"
/>
</head>
<body>
<!-- this place where plugin will render -->
<div class="plugin"></div>
<!-- load plugin JS synchronously -->
<script src="https://plugins.wedat.eu/form-builder/plugin.js"></script>
<!-- init plugin options on your JS file or inline JS like this -->
<script>
window.FORM_BUILDER.init({
selector: '.plugin',
onComplete: res => {
// make what your want :)
console.log(res);
},
data: [
{
"formName": "formName_01"
},
{
"groups": [
{
"groupName": "Informazioni Generali",
"tabName": "Dati pratica",
"tab": true,
"column": true,
"content": {
"rows": [
{
"name": "firstRow",
"column": true,
"fields": [
{
"Type": "select",
"id": "expertiseType",
"label": "Model",
"visible": true,
"readOnly": false,
"options": [
{
"label": "ForTwo",
"value": "ForTwo",
"amount": 30
},
{
"label": "ForFour",
"value": "ForFour",
"amount": 40
},
],
"manipulatedFieldId": "daysNumber"
},
{
"Type": "integer",
"id": "daysNumber",
"label": "Daily Amount Of Model",
"visible": true,
"readOnly": true
}
]
}
]
}
}
]
}
]
options: {} // page options
});
</script>
</body>
</html>