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

Résolu

Lilou75 -
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
Whatsapp formulaire opposition - Guide
Formulaire de réclamation facebook - Guide
Afficher appdata - Guide
Formulaire de reclamation instagram - Guide
Afficher le 0 devant un nombre dans excel - Guide

5 réponses

Réponse 1 / 5

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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

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

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

<!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 38486 Date d'inscription Statut Modérateur Dernière intervention

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

ç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

Civilité (Mr,Mme,Melle) n' apparait pas lors de l'exécution du formulaire

Aide Please select boot device

additionner nombres dans cellules avec texte

Durée d'une diapositive animée

Votre réponse

Discussions similaires