ID d'une Textarea dans un IF

**wisefun77** · 16/05/2022, 17h33

Bonjour,
J'aimerais modifier mon code.

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<br/><br/>
 Poste(s) de travail
  <br/><br/> 
 Veuillez selectionner l'intervention effectuée *
 <br/>
  <form method="post" action="sdp-autre-intervention.php" >
<select name="demg" required/>
 <option value="">Selectionner...</option>
<option value="DEM_PDT" id="DEM">Déménagement</option>
<option value="PRT" id="PRT">Prêt</option>
<option value="NDO" id="NDO">Nouvelle dotation sans reprise</option>
<option value="REP" id="REP">Reprise sans nouvelle dotation</option>
<option value="REN" id="REN">Nouvelle dotation + reprise(renouvelement)</option>
</select>
<br/><br/>
Veuillez selectionner le type de poste	*
<br/>
<select name="prt" required/>
 <option value="">Selectionner...</option>
<option value="PCF"" >Poste fixe</option>
<option value="LAP">Laptop + avec ou sans station d'accueil</option>
<option value="SCI" >Poste scientifique</option>
</select>	
<br/><br/>
<?PHP
  if(isset(id="REN")){
 
 
  }
?> 
<center>Asset or New Asset* &emsp;&emsp; &emsp;Ancien Asset </center>
<input type="hidden" name="balise" value=""/>
<input type="texte" name="asset" id="cible" tabindex="20" required/>
<input type="texte" name="Ancien asset" id="cible" tabindex="20" required/>
<br/>
<input type="radio" id="XXX" onchange="document.getElementById('cible').value=id" />
<label for="radio_1">Hostname inconnu ou matériel non sérialisé</label>
<br/>
<br/><br/>
Durée de l'opération en Minutes *
<br/>
<input type="hidden" name="balise" value="" />
<input type="number" name="time" tabindex="20" required />
<br/><br/>
 
<input type="submit" value="Suivant"/>
 </form>

Si l'user sélectionne la ligne

Code html :

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

<option value="REN" id="REN">Nouvelle dotation + reprise(renouvelement)</option>

Alors cela active les deux textaera Nouvel ASSET et Ancien ASSET.
/////////////////
Si l'user sélectionne la ligne

Code html :

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

<option value="REP" id="REP">Reprise sans nouvelle dotation</option>

Cela désactive la textaera Nouvel ASSET et active la textaera Ancien ASSET.

Sinon
la textaera est toujours grisée. >> ça je sais faire avec disabled.

Ce que je n'arrive pas à faire, c'est de récupérer l'id des textaera dans un IF.

Merci.

**darkstar123456** · 16/05/2022, 17h41

Bonjour,

L'ID n'existe pas en tant que tel dans le PHP donc il n'est pas possible de le récupérer.
Par contre, il est possible de récupérer la valeur d'un champ (select par exemple) en se basant sur son attribut name.

Par exemple dans votre cas :

Code php :

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

1
2
3
4
5
6
7
8
9
10
<?php
if(!empty($_POST['demg']) && ($_POST['demg'] === 'REP' || $_POST['demg'] === 'REN')) {
    // ici on affiche le textarea NOUVEL asset
    // car on l'affiche pour les options REP et REN
}
if(!empty($_POST['demg']) && $_POST['demg'] === 'REN') {
   // ici on affiche le textarea ANCIEN asset
   // car on ne l'affiche que pour l'option REN
}
?>

Mais vu le fonctionnement, ça veut dire que ça ne fonctionne qu'après soumission du formulaire... ce que je trouve étrange.
Il serait plus judicieux de passer par Javascript afin de regarder si la valeur de demg change et suivant sa valeur afficher telle ou telle partie

**wisefun77** · 17/05/2022, 10h11

Bonjour darkstar123456,

Je me doutais bien que je devrais utiliser JavaScript.
Je vais apprendre de suite comment faire.
Merci pour ton aide.

**darkstar123456** · 17/05/2022, 11h04

Hello,

Ce n'est donc plus vraiment la bonne partie du forum mais vu qu'on avait le code HTML de base, j'ai fait un petit exemple en JS natif :

https://codepen.io/DarkStar123456/pen/ZErezZg

Comment ça marche ?
On regarde et intercepte les évéments "change" sur le select car c'est de lui que dépend l'affichage des champs.
Par défaut, on cache les 2 champs ça permet de reset l'affichage au changement de la valeur du select. (on les a également cacher par défaut dans l'HTML avec style="display: none;" pour qu'ils ne soient pas visibles au chargement initial de la page)
Ensuite on va regarder la valeur du select et afficher le ou les groupes (div) selon les conditions décrites dans le post initial

**wisefun77** · 17/05/2022, 12h34

Bonjour darkstar123456,

Merci pour ton aide.
Je vais étudier ton code, en même temps que j'apprends.
Je mets en résolu.

**laurentSc** · 17/05/2022, 14h48

Hello darkstar123456,

j'ai regardé rapidement ton codepen du post # 4.

J'y ai vu un " en trop (ligne 20 du code html) mais surtout, j'ai une question : à quoi servent les 2 div avec style="display: none;" et contenant chacun un textarea (lignes 25 et 29 du html), vu que l'utilisateur ne les verra pas ?

**two3d** · 17/05/2022, 15h11

Les textarea sont affichés seulement si l'utilisateur sélectionne une valeur particulière dans le <select>.

**laurentSc** · 17/05/2022, 15h25

Merci pour la réponse,

ce n'est pas le cas chez moi si je lance ce codepen...Normal ?

**wisefun77** · 17/05/2022, 15h53

Bonjour darkstar123456, LaurentSc,two3d,
Je viens de modifier le code de la page.

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 Poste(s) de travail
  <br/><br/> 
 Veuillez selectionner l'intervention effectuée *
 <br/>
  <form method="post" action="sdp-autre-intervention.php" >
<select name="demg" required/>
 <option value="">Selectionner...</option>
<option value="DEM_PDT" id="DEM">Déménagement</option>
<option value="PRT" id="PRT">Prêt</option>
<option value="NDO" id="NDO">Nouvelle dotation sans reprise</option>
<option value="REP" id="REP">Reprise sans nouvelle dotation</option>
<option value="REN" id="REN">Nouvelle dotation + reprise(renouvelement)</option>
</select>
<br/><br/>
Veuillez selectionner le type de poste	*
<br/>
<select name="prt" required/>
 <option value="">Selectionner...</option>
<option value="PCF"" >Poste fixe</option>
<option value="LAP">Laptop + avec ou sans station d'accueil</option>
<option value="SCI" >Poste scientifique</option>
</select>	
<br/><br/>
<div id="new-asset-group" style="display: none;">
  <label for="new-asset">New asset:*</label>
  <br/>
  <input type="hidden" name="balise" value=""/>
  <textarea name="new-asset" id="new-asset" rows="2" required></textarea>
  <br/>
  <input type="radio" id="XXX" onchange="document.getElementById('new-asset').value=id"  />
  Hostname inconnu ou matériel non sérialisé.
</div>
<div id="old-asset-group" style="display: none;">
  <label for="old-asset">Old asset:*</label>
  <br/>
  <input type="hidden" name="balise" value=""/>
  <textarea name="old-asset" id="old-asset" tabindex="20" required></textarea>
  <br/>
  <input type="radio" id="XXX" onchange="document.getElementById('old-asset').value=id"  />
  Hostname inconnu ou matériel non sérialisé.
</div>
<br/>
Durée de l'opération en Minutes *
<br/>
<input type="hidden" name="balise" value="" />
<input type="number" name="time" tabindex="20" required />
<br/><br/>
<input type="submit" value="Suivant"/>
 </form>
<script>
 let demgSelect = document.querySelector('[name="demg"]');
 
// On va intercepter les événements "change" du select
// Cela correspond à un changement d'option sélectionnée
demgSelect.addEventListener('change', function() {
  // On cache les assets par défaut
  document.querySelector('#new-asset-group').style.display = 'none';
    document.querySelector('#old-asset-group').style.display = 'none';
  // Si la valeur du select est REN alors on affiche les 2 assets
  if(this.value === 'REN') {
    document.querySelector('#new-asset-group').style.display = 'block';
    document.querySelector('#old-asset-group').style.display = 'block';
  } 
  // Sinon si la valeur est REP, alors on affiche que le OLd assets
  else if(this.value === 'REP') {
    document.querySelector('#old-asset-group').style.display = 'block';
  }
  // Sinon si la valeur est DEM_PDT ou PRT ou NDO , alors on affiche que le New asset
  else if(this.value === 'DEM_PDT' ,'PRT' ,'NDO') {
    document.querySelector('#new-asset-group').style.display = 'block';
  }
});
</script>

Le petit soucis est que cela me décale l"affichage sur la gauche quand les deux textaera sont affichés, et je ne peux leur donner une dimension.
Mais c'est un autre problème.

Merci à tous pour votre aide et votre savoir.

**darkstar123456** · 17/05/2022, 15h55

Salut laurentSc,

Effectivement, il y a un problème dans l'HTML.
Je t'avoue que je suis parti du post initial sans le corriger pcq j'ai vu plein de trucs horribles, comme l'utilisation des tags <center></center> et je voulais m'éviter de toute corriger (et surtout de tout expliquer xD)

Pour ce qui est du fonctionnement, j'imagine que ça vient de ton navigateur car certains navigateurs corrigent automatiquement les erreurs (comme la double quote ici, ou les tags pas fermés)
J'imagine que vue l'erreur, le JS ne s'exécute pas correctement et donc le CodePen ne fonctionne pas chez toi

Et pour ce qui est du display: none;, c'est effectivement pour les cacher au chargement de la page vu que leur visibilité dépend de la valeur du select.
Je l'avais d'ailleurs précisé dans mon post :

Par défaut, on cache les 2 champs ça permet de reset l'affichage au changement de la valeur du select. (on les a également cacher par défaut dans l'HTML avec style="display: none;" pour qu'ils ne soient pas visibles au chargement initial de la page)

@wisefun77 : pour ce qui est des décalages, comme je l'ai dit un peu plus haut ton utilisation de l'HTML est un peu "dépassée" et quoi qu'il arrive, nous n'avons pas tout le code ici pour pouvoir ce qui va ou ne va pas ^^

**wisefun77** · 17/05/2022, 16h17

Bonjour darkstar123456

@wisefun77 : pour ce qui est des décalages, comme je l'ai dit un peu plus haut ton utilisation de l'HTML est un peu "dépassée" et quoi qu'il arrive, nous n'avons pas tout le code ici pour pouvoir ce qui va ou ne va pas ^^

J'en suis conscient, mais je n'ai pas le temps de tout refaire.
Cela est prévu dans une mise à jour ultérieure de l'application.
De plus je dois faire au plus simple, car les consignes sont:" toutes personnes du service ayant des bases minimes en PHP HTML CSS JavaScript, doivent pouvoir me remplacer sans devoir se remettre à niveau."
J'ai quand même eu le droit de faire des pages en include.
Et celle-ci en fait partie, elle s'inclut dans une autre page.

Sinon je serais passé par un Framework. Mais c'est ainsi.

Merci.

**laurentSc** · 17/05/2022, 16h29

Merci pour les précisions darkstar123456. En fait, j'ai lu tellement rapidement, que j'ai pas fait attention à tes explications dans le post #4. Et le JS, je maîtrise pas (ça fait plusieurs années que j'en ai pas fait).

**wisefun77** · 17/05/2022, 16h50

Bonjour,

Je rencontre un autre souci en JavaScript.
Les textaera sont en required.
Le fait de les cacher ne désactive pas le required.
Ne serait-il pas plus simple de les afficher et de griser celle dont l'user n'a pas besoin?
Si je dis une énorme bêtise, allez y ne vous gênez pas

Merci.

**darkstar123456** · 17/05/2022, 17h40

Hello,

De la même façon qu'on peut afficher/cacher les champs on peut modifier leur attributs
Pour cela on utilise les fonctions setAttribute() et removeAttribute()

J'ai mis à jour le CodePen : https://codepen.io/DarkStar123456/pen/ZErezZg

**wisefun77** · 18/05/2022, 11h33

Bonjour darkstar123456,
Merci pour tout.
Cela fonctionne à merveille.

ID d'une Textarea dans un IF [PHP 7]

Langage PHP

Discussions similaires

Partager

Partager