readonly sur toute la page

Version imprimable

Bonjour a tous,

J'ai créé un formulaire qui selon la personne qui l'affiche (donc selon son identifiant de connexion sur la page précédente de l’accès formulaire), tous les champs input, select, radio checkbox, etc.. doivent apparaitre modifiables ou pas.

Donc je tente d'utiliser readonly mais je ne parviens pas a créer la fonction :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Document sans nom</title> <script type="application/javascript"> function readinput(){ allInput[i].readonly = true; } </script> </head> <body onload="readinput()"> <form action="" id="form1" name="form1"> <input name="toto" id="toto" type="text" value="tata"/> </form> </body> </html>
ce code permet quand même de cliquer sur l'input (normal) mais surtout de pouvoir le modifier et je voudrai justement éviter cela.

Je précise que je ne veux pas passer par jquery.

Merci milles fois de votre aide un dimanche.
Guillaume

Salut,

Après vérification c'est "readOnly" et non "readonly" ou bien tu utilises setAttribute("readonly", "readonly").

Mais ton code n'est pas complet, allInput n'est pas défini et i non plus, il te manque une une boucle...

Voici un exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>readonly</title>    
 
    <script>
        function readinput() {
            var allInput = document.getElementsByTagName("input");
 
            for (var i = 0, l = allInput.length; i < l; i++) {
                allInput[i].readOnly = true;
                // ou bien : allInput[i].setAttribute("readonly", "readonly")
            }
        }
    </script>
    </head>
 
    <body onload="readinput()">
        <form action="" id="form1" name="form1">
            <input name="toto" id="toto1" type="text" value="tata1" />
            <input name="toto" id="toto2" type="text" value="tata2" />
            <input name="toto" id="toto3" type="text" value="tata3" />
        </form>        
    </body>
 
</html>

Bonjour,

ou encore :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
function readonlyForm() {
  var allInput = document.querySelectorAll('input, textarea');
  allInput.forEach(function(input){
    input.readOnly = true;
    //input.setAttribute('readonly', 'readonly');
  });
}
//window.onload = readonlyForm;
window.onload = function(){ 
    readonlyForm(); 
}
</script>

N.B. J'ai ajouté "textarea" (au cas où...).

Par contre, ça ne fonctionne pas avec "select", qui ne prend pas d'attribut "readonly".

Une solution consiste à désactiver les options non sélectionnées :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function readonlyForm() {
  var allInput = document.querySelectorAll("input, textarea");
  allInput.forEach(function(input) {
    input.readOnly = true;
    //input.setAttribute('readonly', 'readonly');
  });
  var allSelectOptions = document.querySelectorAll("select option");
  allSelectOptions.forEach(function(seloption) {
    if (!seloption.selected) { // on desactive les options non selectionnees
      seloption.disabled = true;
    }
  });
}

05/02/2019, 09h39
guillaumeIOB

Bonjour et merci à vous deux pour votre aide Ô combien précieuse.

Excellente journée
Guillaume