Here is some JS code I use in forms, so maybe it can help you. If you think my code can be improve, let me know here
If you have ideas to share, tell me too.
If my English is poor, just let me know too
- Replace 123/456/789 for your field ID.
- JS in this box is loaded at the init of the form
- To check during editing/adding of the form, you need to get changes of the field when users type (see when I write "dynamic"; I recommend to add the dynamic check during the form on the field and also a "trigger code" to check the first value at the beginning/loading; see below the edit on 2023-12-20)
- Remember JS can be access with source of the page, so don't use confidential or privacy datas
- Also JS can be disable by the user
- Some codes are very useful because field access rules can't be set for all kind of fields in Rukovoditel at this time
- To hide/show a field in the form
Code: Select all
$('.form-group-123').hide(); //or ".show()"
- To compare a value
Code: Select all
if($('#fields_123').val() == 'A' ) //if the value of field_123 is 'A', or "!= 'A'" for different of A; also 'A' is for a text input, or '12' for a input with ID for example (dropdown lists, ...)
{
//do something
}
- To hide the help block for a field in the form
Code: Select all
$('.form-group-123').find('.help-block').hide();
- To set a text/input field to read-only ("disabled")
Code: Select all
$('#fields_123').prop("readonly", true); //or "false" to be able to change the input
- Condition for admin or non-admin or a specific user group
Code: Select all
if([current_user_group_id]==0) //or "!=0" to do something for non-admin; the number is for group ID
{
//do something for admin
}
- Condition to check if a field is not empty
Code: Select all
if($('#fields_123').val()) //or "!$('#fields_123').val()" to check if empty
{
//do something if field is not empty
}
- For example, to read-only ("disabled") a text field if the field is not empty (previously entered) for non-admin
Code: Select all
if($('#fields_123').val() && [current_user_group_id]!=0) //test if the field 123 contains some value and if user is not an admin
{
$('#fields_123').prop("readonly", true);
}
- To check if a checkbox field is checked/not checked
Code: Select all
if($('#fields_123').is(':checked')) //or ".is(':not(:checked)')"
{
//do something
}
- To check if a checkbox field is checked (or something else) (dynamic)
Code: Select all
$('#fields_123').on('change', function() { //do what you want when the input is changing
if ($(this).is(':checked')) // "this" is for "$('#fields_123')" in a function like that
{
//do something
}
else
{
//do something, you can remove the "else" part too
}
});
- To "re-init" a field, to empty a field (for most of fields), to change the value of a field, to add a default value at the begining of the form (keep in mind if the form is editing, the value will be change, so check before if the value is empty for example it will indicate you the form is a adding form if the field is mandatory, or check the code below to know if it's an adding or editing form)
Code: Select all
$("#fields_123").val(''); //you can put whatever you want like ".val('text here')" for a text input, or ".val('12')" for a input with ID for example (dropdown lists, ...)
- To generate a random value (not for cryptographic use)
Code: Select all
var randomValue = Math.random().toString(36).substr(2, 3);
//Math.random() is for a random value between 0 and 1
//.toString(36) is for converting this value with a-z and 0-9
//.substr(2, 3) is for removing the begining of the code "0." and keep 3 characters after, you can adapt that for you
- To uppercase fields (dynamic)
Code: Select all
var elementsTableau = ['.field_123','.field_456', '.field_789']; //list of fields (text input)
$.each(elementsTableau, function(index, element) {
$(element).on('input', function() {
var inputValue = $(this).val();
var uppercaseValue = inputValue.toUpperCase();
$(this).val(uppercaseValue);
});
});
- For a dropdown list (not AJAX), select the first value at the init of the form if just one value is available
Code: Select all
var $select = $("#fields_123");
var $options = $select.find("option");
if ($options.length === 2) {
var $singleOption = $options.eq(1);
$select.val($singleOption.val()).trigger("change");
}
Sometimes, I prefer to use JS in form and not fields access rules to have the possibility to reinit the value of the field before storage in the database.
- If a field has this ID, another field is changed (see other code above to get information about conditions, ...) (dynamic)
Code: Select all
var tableForm = ["5", "7"]; //id to check
var fieldChecked = $("#fields_123");
var fieldChanged = $('#fields_456');
if(tableForm.includes(fieldChecked.val())) //check at the init of the form, if the field has one of these id
{
fieldChanged.prop("readonly", true);
}
fieldChecked.on("input", function() { //check dynamically the field
if($(this).val() == '5')
{
fieldChanged.prop("readonly", true);
fieldChanged.val('1');
}
else if($(this).val() == '7')
{
fieldChanged.prop("readonly", true);
fieldChanged.val('0');
}
else
{
fieldChanged.prop("readonly", false);
fieldChanged.val('');
}
});
- Check some id and do something (dynamic)
Code: Select all
var tableForm = ["173", "171", "155", "11", "108", "172"]; //list of id
if(tableForm.includes($("#fields_123").val())) //check if value is one of the id, at the init of the form
{
$('.form-group-456').hide();
$('#fields_456').removeAttr('checked'); //remove the "check" of a checkbox
$("#uniform-fields_456").find('span').removeClass('checked'); //remove the "check" of a checkbox
}
else
{
$('.form-group-456').show();
}
$("#fields_123").on("input", function() { //check if value is one of the id, dynamically
if(tableForm.includes($('#fields_123').val()))
{
$('.form-group-456').hide();
$('#fields_456').removeAttr('checked');
$('#uniform-fields_456').find('span').removeClass('checked');
}
else
{
$('.form-group-456').show();
}
});
EDIT :
- To check if the form is an editing or adding form (added on 2023-06-23) :
Code: Select all
if ($('#items_form').attr('action').includes('id=')) //check if the value in 'action' had an id
{
//do something for editing
}
else
{
//do something for adding
}
- To disable cut, copy, paste and right click on several fields (added on 2023-12-20) :
Code: Select all
var protectedFields = ['#fields_123', '#fields_456'];
protectedFields.forEach(function (fieldID) {
var protectedFields= $(fieldID);
protectedFields.on('cut copy paste', function (e) {
e.preventDefault();
});
protectedFields.on('contextmenu', function (e) {
e.preventDefault();
});
});
- To "force" the trigger on a field at the beginning of the form (for editing for example, when you have some "dynamic" code on the field) (added on 2023-12-20) :
Code: Select all
$('#fields_123').trigger('input');
- To clear an ajax dropdown list selection (added on 2024-01-13) :
Code: Select all
$("#fields_123").val([]).trigger('change');
I hope it will help you