I use the nice FormBuilder from Kevin Chappell
https://formbuilder.online/docs/
Several types can be defined for the 'text' field. I have integrated the new control 'time'. I now want if this new control is clicked, 'time' should be preset in the 'Type' field.
How can i adjust that?
PS: The code example does not run here but only locally (sessionStorage topic)
jQuery(function($) {
var fbTemplate = document.getElementById('fb-editor');
var options = {
fields : [{
label: 'Time',
attrs: {
type: 'text'
},
icon: '🕑'
}],
subtypes: {
text: ['datetime-local','time']
},
disabledSubtypes: {
text: ['password','email','color','tel'],
}
};
$(fbTemplate).formBuilder(options);
});body {
background: lightgrey;
font-family: sans-serif;
}<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - formBuilder: Options -> subtypes</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div id="fb-editor"></div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://formbuilder.online/assets/js/form-builder.min.js'></script><script src="./script.js"></script>
</body>
</html>I didn't find out, but i took a different path for it. :-)
Enter the new element as type time in the field definition.
A new subtype time has also been defined.
Then add the time in the controls register.
jQuery(function($) {
var fbTemplate = document.getElementById('fb-editor');
var options = {
fields : [{
label: 'Time',
attrs: {
type: 'time'
},
icon: '🕑'
}],
subtypes: {
time: ['time']
}
};
$(fbTemplate).formBuilder(options);
});
// src/js/control/text.js
// register this control for the following types & text subtypes
control.register(['text', 'file', 'date', 'number', 'time'], controlText)
control.register(['text', 'password', 'email', 'color', 'tel'], controlText, 'text')body {
background: lightgrey;
font-family: sans-serif;
}<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>formBuilder</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="fb-editor"></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='https://formbuilder.online/assets/js/form-builder.min.js'></script>
<script src="./script.js"></script>
</body>
</html>