Some JS code for displaying forms

[Didou12]

Hi everyone,

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

https://docs.rukovoditel.net/index.php?p=113
https://docs.rukovoditel.net/index.php?p=112

- 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

Note : to test for editing form, you can also use the code below "To check if the form is an editing or adding form (added on 2023-06-23)".

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)

Note: ".on('change')" is very helpful for input fields like : checkbox, radio buttons and dropdown lists ("select"); for text input field, use 'input'.

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

[Didou12]

I just added code to check if the form is an adding or editing form

• To check if the form is an editing or adding form :

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
}

[yaoying]

Thank you very much for sharing, if we try to make a database backup file according to the instructions to upload to the attachment, it may be better understood for people who do not program, I will try to do this in my spare time, but I am not competent enough, it may be slow.

[shandybt]

do you have JS Script for disable Copy and Paste text in field or using right click?

I used to create a form quiz with field or textarea to prevent my user using paste or rightclick in the answer field

thank you

[Didou12]

Sure but remember, JS is a client side process, so user can always disable JS, or access to the page source.

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();
    });
});

[Didou12]

To clear an ajax dropdown list selection :

Code: Select all

$("#fields_123").val([]).trigger('change');