Using javascript you can improve the insertion experience for example by hiding fields or verifying the data entered.
Inside the lists go to the form tab.
Inside the individual fields there is a textarea to insert custom javascript.
The javascript inserted is executed when the form is loaded, when it is submitted and every time an element of the form is modified. You can use the status variable to identify when the function is called.
if (status == 'start') {
// The form is started
}
if (status == 'field_change') {
// The field is changed
}
if (status == 'form_change') {
// Any other field on the form is changed
}
if (status == 'submit') {
// Viene inviata al form. Puoi bloccare l'invio impostando un campo come invalid.
}
You can use the field variable to refer to the field in which you are writing the code. This variable extends the Dbp_field object which has the following functions:
You can refer to the other fields on the form through the form variable which extends Dbp_form
You don't have to enter the tag code <script></script>.
Attention a required field even if hidden remains required! In general, a hidden invalid field prevents the form from being submitted.
I show a field only if the checkbox is checked. For the single checkbox, val returns null if it is not selected, otherwise it returns the value of the checkbox. In the example the checkbox has value = "1"
field.toggle(form.get('mycheckboxlabel').val() == 1);
I show a field only if a particular option of a checkbox is checked.
field.toggle(form.get('n.categories').val().indexOf('Blue') > -1);
I set the checkboxes with the option values (must be an array). If I want a defaul I use the array in the default field.
field.val(["opt_val1","opt_val5"]);
Valid a field only if it is greater than 10
field.valid( field.val() < 10, 'The field must be greater than 10');
Valid a date only if the start is greater than the date_start field
let a = form.get('r.date_start').val();
field.valid_range(a);
The field is valid only if it is less than 100
field.valid_range(false,100);
In a repeating table I validate the next_order field saying that it must be greater than the previous instance
if (status == 'form_change') {
let prev_val = parseInt(form.get('my_table.next_order.prev').val());
if (!isNaN(prev_val)) {
field.valid( field.val() > prev_val);
}
}
Given due select changes the second's options each time the first is changed
if (status == 'start' || status == 'form_change') {
if (form.get('PROVIN').val() == 'scelta 1') {
field.toggle(true).choices({'1':"Male",'2':"Female"});
} else if (form.get('PROVIN').val() == 'scelta 2') {
field.toggle(true).choices(["Red","Blue"]);
} else if (form.get('PROVIN').val() == 'scelta "3') {
field.toggle(true).choices(["A","B","C"]);
} else {
field.toggle(false);
}
}
Set a default date. I use the timestamp in seconds.
if (status == 'start') {
field.val(1583677568);
}