readonly sur toute la page

**guillaumeIOB** · 03/02/2019, 10h33

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Beginner.** · 03/02/2019, 14h20

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Invité · 04/02/2019, 11h25

Bonjour,

ou encore :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**guillaumeIOB** · 05/02/2019, 09h39

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

Excellente journée
Guillaume

readonly sur toute la page

JavaScript

Discussions similaires

Partager

Partager