MAKE A FIELD READ-ONLY AFTER TYPING

[pasbonte]

Hello !
I WOULD LIKE TO MAKE A FIELD READ-ONLY AFTER TYPING AND SAVING
HOW TO DO IT?
THANK YOU

[pbottcher]

Hi,

you can add to the hooks/TABLENAME-dv.js file some code that checks if this is a valid record (not new), which you can identidy by the SelectedID being set. Then change your field to readonly via jquery. This works when you saved the record. Not sure what you mean by "after typing".

Something like

Code: Select all

if ($j('[name="SelectedID"]').val() != '') $j('#FIELDNAME').prop('readonly',true);

Make sure that you still check in the after_update hook if someone manipulated the field.

[pasbonte]

Hello
This code works very well and it's simple, thank you
But what if I have several fields?
I tried with the help of chatgpt:

Code: Select all

 // Vérifier si on est en mode édition d'un enregistrement existant
    var selectedID = $j('[name="SelectedID"]').val();

    // Si l'enregistrement existe (édition d'un enregistrement, pas création)
    if (selectedID != '') {
        // Liste des champs à vérifier
        var fields = ['septembre', 'octobre', 'novembre'];

        // Boucle sur chaque champ
        fields.forEach(function(fieldName) {
            var field = $j('[name="' + fieldName + '"]');  // Sélection du champ par son nom

            // Si le champ a une valeur non vide, on le rend en lecture seule
            if (field.val() !== '') {
                field.prop('readonly', true);  // On rend le champ en lecture seule
            }
        });
    }
});

[pasbonte]

I'll explain better what I want:
I have a form with 9 input fields
SEPTEMBER
OCTOBER
NOVEMBER
DECEMBER
JANUARY
FEBRUARY
MARCH
APRIL
MAY
JUNE
At the end of each month users enter numeric values, I want it to be blocked after entering it and therefore read-only to prevent a modification.
The code provided first works fine for September but if I enter for October it doesn't work.

[pasbonte]

Code: Select all

<?php
function GES_HSE_2425_dv($selectedID, $memberInfo, &$html, &$args) {
    $html .= '<script>
        document.addEventListener("DOMContentLoaded", function() {
            // Liste des champs de saisie (nommés par mois)
            var mois = ["SEPT", "OCT", "NOV", "DEC", "JAN", "FEV", "MAR", "AVR", "MAI", "JUI"];
            
            // Boucle sur chaque champ de saisie
            mois.forEach(function(moisName) {
                var champ = $j("[name=\'" + moisName + "\']"); // Sélectionner le champ par son nom
                if (champ && champ.val() != "") { // Si le champ contient une valeur
                    champ.prop("readonly", true); // Rendre le champ en lecture seule
                }
            });
        });
    </script>';

    return TRUE;
}

[pasbonte]

I have the impression that javascript doesn't work

[pbottcher]

Hi,

check you fieldnames. It is a bit confusing as in every post I read a different name:
octobre vs OCTOBER vs OCT
You need to specify the correct fieldname as defined in you app for the table.

[pasbonte]

Hello
All my apologies, messages and requests were not clear.
With the help of a young programmer whom I thank, I solved the problem with this code if it can help another user.

One thing remains to be done: allow the ADMINS to modify or enter, I will look into the problem.

in tablename-dv.js

Code: Select all

var mois = ["SEPT", "OCT", "NOV", "DEC", "JAN", "FEV", "MAR", "AVR", "MAI", "JUI"];

// Parcourir la liste des mois
mois.forEach(function (month) {
    // Sélectionner chaque input par son attribut "name"
    var input = document.querySelector(`input[name="${month}"]`);
    // Si l'input est rempli, ajouter la propriété readonly
    if (input && input.value.trim() !== "") {
        input.setAttribute('readOnly', 'true');
    }
});

I don't know javascript at all, I'm more php...

Last tip: clear the cache in javascript

Code: Select all

// Exemple de requête pour contourner le cache en ajoutant un paramètre unique
fetch('hooks/GES_HSE_2425-dv.js?v=' + new Date().getTime())
    .then(response => response.text())
    .then(data => {
        // Utiliser les données ou mettre à jour le contenu
        console.log(data);
    });