Afficher désaficher une div avec un select dans un formulaire

Résolu/Fermé

Lilou75 - 30 oct. 2021 à 20:49
Lilou75 - 31 oct. 2021 à 09:51

Bonjour,

Etant une buze en JS, je cherche désespérément à afficher ou à masquer une partie de mon formulaire située dans une <div>.

Ma liste à choix multiple dans mon formulaire :


<html>
<form id="contrat" method="post" action="assistant_v1-0.php">
<label for="type_nc">Type de périmètre de non réinstallation :</label> 
		<select name="type_nc" id="type_nc" onChange="affiche_ncDIV()">
        <option value="1">pas de clause de non réinstallation</option>
        <option value="2">en km autour du cabinet :</option>
        <option value="3">dans une ville ou arrd. :</option>
        </select>
</form>
<html>

et ma div


		<div id=ncDIV style="display:none;">
		<label for="perimetre_nc">Distance :</label>
        <input id="perimetre_nc" type="text" name="perimetre_nc" required>
		<label for="duree_nc">Durée :</label> <input id="duree_nc" type="number" min="0" step="1" name="duree_nc" required><br>
		</div>

Je souhaite que la <div> ci-dessus s'affiche que si le select est sur 2 ou 3 et qu'elle disparaisse si on repasse à 1.

j'ai tenté différentes solutions en JS... dont celle là, mais sans succès.


function affiche_ncDIV(){
  var typenc = document.forms["contrat"]["type_nc"];
  if (typenc > "1")                               
      {
		document.getElementById("ncDIV").style.display = block;
  }
  else {
    document.getElementById("ncDIV").style.display = none;
  }
}

A voir également:

Afficher désaficher une div avec un select dans un formulaire
Formulaire de réclamation facebook - Guide
Afficher calendrier outlook dans google agenda - Guide
Afficher appdata - Guide
Afficher mot de passe wifi android - Guide
Formulaire instagram compte suspendu - Guide

5 réponses

Réponse 1 / 5

jordane45 Messages postés 38358 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 décembre 2024 4 719
Modifié le 30 oct. 2021 à 21:26

Bonsoir

 <select name="type_nc" id="type_nc" onChange="affiche_ncDIV(this.value)">

function affiche_ncDIV(typenc ){
  let ncDiv = document.getElementById("ncDIV");
  if (typenc != "1")  {
   ncDiv.style.display = "none";
  }  else {
     ncDiv.style.display = "block";
  }
}

Réponse 2 / 5

Lilou75
31 oct. 2021 à 00:00

Voilà tout mon code... et cela ne fonctionne pas.
Il doit me manquer les bases


<html>
<head>
</head>
  <body>
<form id="contrat" method="post" action="assistant_v1-0.php">
<label for="type_nc">Type de périmètre de non réinstallation :</label> 
		<select name="type_nc" id="type_nc" onChange="affiche_ncDIV()">
        <option value="1">pas de clause de non réinstallation</option>
        <option value="2">en km autour du cabinet :</option>
        <option value="3">dans une ville ou arrd. :</option>
        </select>
<script>
function affiche_ncDIV(typenc){
  let ncDiv = document.getElementById("ncDIV");
  if (typenc != "0")  {
   ncDiv.style.display = "none";
  }  else {
     ncDiv.style.display = "block";
  }
}
</script>
<div id=ncDIV style="display:none;">
		<label for="perimetre_nc">Distance :</label>
        <input id="perimetre_nc" type="text" name="perimetre_nc">
		<label for="duree_nc">Durée :</label> <input id="duree_nc" type="number" min="0" step="1" name="duree_nc"><br>
		</div>
</form>
</body>
<html>

jordane45 Messages postés 38358 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 décembre 2024 4 719
31 oct. 2021 à 00:08

Si tu ne parviens pas à copier coller l'ensemble du code que je t'ai fourni ça va devenir compliqué...
Je ne t'ai pas donné que du JavaScript, je t'ai également donné une ligne de ton HTML...

Réponse 3 / 5

Lilou75
31 oct. 2021 à 00:21

Alors là, mea culpa !
je n'avais pas vu la ligne html.....

Bien, et cela fonctionne (bon, dans le mauvais sens mais j'ai inversé "none" et "block".... et c'est nikel.

Alors, un grand merci et désolé d'avoir zappé cette première ligne de code.
Je vais pouvoir dormir tranquille !
Merci beaucoup

Réponse 4 / 5

Lilou75
Modifié le 31 oct. 2021 à 09:15

J'ai eu l'idée de séparer en 2 div....
mais ça ne fonctionne pas. peut être que c'est idiot.

<html>
<head>
</head>
  <body>
<form id="contrat" method="post" action="assistant_v1-0.php">
<label for="type_nc">Type de périmètre de non réinstallation :</label> 
  <select name="type_nc" id="type_nc" onChange="affiche_ncDIV(this.value)">
  <option value="1">pas de clause de non réinstallation</option>
        <option value="2">en km autour du cabinet :</option>
        <option value="3">dans une ville ou arrd. :</option>
        </select>
<script>
function affiche_ncDIV(typenc){
  let ncDiv2 = document.getElementById("ncDIV2");
  let ncDiv3 = document.getElementById("ncDIV3");
  
if (typenc = "2")  {
   ncDiv2.style.display = "block";
   ncDiv3.style.display = "none";
  }
else {}

if (typenc = "3")  {
   ncDiv2.style.display = "none";
   ncDiv3.style.display = "block";
     }
else {}

if (typenc = "1")  {
   ncDiv2.style.display = "none";
   ncDiv3.style.display = "none";
   }
  else {}
}
</script>
<div id=ncDIV2 style="display:none;">
  <label for="perimetre_nc_km">Périmètre (en km):<input id="perimetre_nc_km" type="number" name="perimetre_nc_km">
  <label for="duree_nc_km">Durée de la clause de non réinstallation (en année (si 0, il n'y aura aucune clause):</label> <input id="duree_nc_km" type="number" min="0" step="1" name="duree_nc_km" required><label>année(s)</label><br>
  </div> 

<div id=ncDIV3 style="display:none;">
  <label for="perimetre_nc">Préciser le ou les aires géographiques :<input id="perimetre_nc" type="text" name="perimetre_nc" size="50">
  <label for="duree_nc">Durée de la clause de non réinstallation (en année (si 0, il n'y aura aucune clause):</label> <input id="duree_nc" type="number" min="0" step="1" name="duree_nc" required><label>année(s)</label><br>
  </div>   


</form>
</body>
<html>

jordane45 Messages postés 38358 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 décembre 2024 4 719
31 oct. 2021 à 09:21

<!Doctype html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Formulaire</title>
  </head>
  <body>
    <form id="contrat" method="post" action="assistant_v1-0.php">
      <label for="type_nc">Type de périmètre de non réinstallation :</label> 
      <select name="type_nc" id="type_nc" onChange="affiche_ncDIV(this.value)">
        <option value="1">pas de clause de non réinstallation</option>
        <option value="2">en km autour du cabinet :</option>
        <option value="3">dans une ville ou arrd. :</option>
      </select>

      <div id=ncDIV2 style="display:none;">
        <label for="perimetre_nc_km">Périmètre (en km):
        <input id="perimetre_nc_km" type="number" name="perimetre_nc_km">
        <label for="duree_nc_km">Durée de la clause de non réinstallation (en année (si 0, il n'y aura aucune clause):</label> 
        <input id="duree_nc_km" type="number" min="0" step="1" name="duree_nc_km" required>
        <label>année(s)</label>
        <br>
      </div> 

      <div id=ncDIV3 style="display:none;">
        <label for="perimetre_nc">Préciser le ou les aires géographiques :
        <input id="perimetre_nc" type="text" name="perimetre_nc" size="50">
        <label for="duree_nc">Durée de la clause de non réinstallation (en année (si 0, il n'y aura aucune clause):</label> 
        <input id="duree_nc" type="number" min="0" step="1" name="duree_nc" required>
        <label>année(s)</label>
        <br>
      </div>   
    </form>

    <!-- Toujours mettre les scripts à la fin.. avant le </body> -->
    <script>
    function affiche_ncDIV(typenc){
      let ncDiv2 = document.getElementById("ncDIV2");
      let ncDiv3 = document.getElementById("ncDIV3");
      
      if (typenc == "2")  {
         ncDiv2.style.display = "block";
         ncDiv3.style.display = "none";
      }else if (typenc == "3")  {
         ncDiv2.style.display = "none";
         ncDiv3.style.display = "block";
      }else if (typenc == "1")  {
         ncDiv2.style.display = "none";
         ncDiv3.style.display = "none";
      }
    }
    </script>
  </body>
<html>

Lilou75 > jordane45 Messages postés 38358 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 décembre 2024
31 oct. 2021 à 09:51

on s'est croisé !
merci... c'est super.

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

Lilou75
31 oct. 2021 à 09:22

ça semble fonctionner comme cela....

<script>
function affiche_ncDIV(typenc){
  let ncDiv2 = document.getElementById("ncDIV2");
  let ncDiv3 = document.getElementById("ncDIV3");
  
if (typenc == "1")  {
   ncDiv2.style.display = "none";
   ncDiv3.style.display = "none";
  }
else {
if (typenc == "3")  {
   ncDiv2.style.display = "none";
   ncDiv3.style.display = "block";
     }
else {
   ncDiv2.style.display = "block";
   ncDiv3.style.display = "none";
   }}
	 }
</script>

Discussions similaires

Aide Please select boot device

Cellules en surbrillance selon une TextBox

"Reboot and Select proper Boot Device"

additionner nombres dans cellules avec texte