1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

Formulaire

Gluondupc
Messages postés
1
Date d'inscription
lundi 20 janvier 2014
Statut
Membre
Dernière intervention
20 janvier 2014
 - 20 janv. 2014 à 10:36
f0xi
Messages postés
4205
Date d'inscription
samedi 16 octobre 2004
Statut
Modérateur
Dernière intervention
12 mars 2022
 - 1 févr. 2014 à 19:40
Bonjour,
J'ai un problème avec un formulaire avec des "checkbox" et des "function showRadio()".
J'ai réussi à faire un code qui s'appel "Séquence 1:" qui m'affiche des "checkbox" en fonction de l'activation d'autres Checkbox, mais j'aimerai faire plusieurs lignes.
J'ai fait la "séquence 1" dans le code et j'"aimerai faire les séquences de 1 à 10 en récupérant les variables en local, mais je n'y arrive pas.
Bien sur, tout ce que j'ai fait c'est copier des morceaux de code sur le net et les modifier, mais là je but.
Merci à vous, en esperant que vous aurez plus de temps à me concacrer que ma demande est clair.
Voici le code: 

<html>
<head>
	<meta charset="utf-8">
	<title>Développé par </title>
	<style type="text/css">#D1, #D2, #D3, #D4, #D5, #D6, #D7 {display: none;}</style>
	<script type="text/javascript">
	function showRadio() {
		var n = document.form.Sq1.length;
		for(i=1;i<=n;i++) {
			if(document.getElementById('choix'+i).checked == true) {
				document.getElementById('D'+i).style.display = "block";
			} else {
				document.getElementById('D'+i).style.display = "none";
			}
		}
	  }
	</script>
</head>

<body>

<CAPTION> <p><b>Definition de la sequence d'essai :</b></p></CAPTION> 
 
	<form name="form" action="" method="post">
	<br>
		<CAPTION><TR> Sequence 1:</CAPTION>
		      <label>Mouvement moteur<input type="radio" id="choix1" name="Sq1" value="Mvt1" onclick="showRadio()" /></label> </TR>
		      <label>Mesure des potentiometres <input type="radio" id="choix2" name="Sq1" value="Mesur1" onclick="showRadio()" /></label> 
		      <label>Retour a Zero Moteur <input type="radio" id="choix3" name="Sq1" value="Zero1" onclick="showRadio()" /></label> 
		<div id="D1">
		<label> Mouvement <input type="radio" name="Numero Moteur Sq1" value="Moteur 1" checked >Moteur 1
				<input type="radio" name="Numero Moteur Sq1" value="Moteur 2">Moteur 2 
				      
				<input type="radio" name="Cablage Sq1" value="Nominal" checked >Nominal
				<input type="radio" name="Cablage Sq1" value="Redondant">Redondant
				      
				<input type="radio" name="Sens Sq1" value="CW" checked >CW
				<input type="radio" name="Sens Sq1" value="CCW">CCW
				      
				Nombre de pas <input type="text" name="NbPas Sq1" size="5">
	</label>
	</div>

	<div id="D2">
		<label>Mesure des potentiometres</label>
	</div>
	<div id="D3">
	<label> 	<input type="radio" name="Numero Moteur Sq1" value="Moteur 1" checked >Moteur 1
				<input type="radio" name="Numero Moteur Sq1" value="Moteur 2">Moteur 2 
				      
				<input type="radio" name="Cablage Sq1" value="Nominal" checked >Nominal
				<input type="radio" name="Cablage Sq1" value="Redondant">Redondant
	</div>
</br>
</br>
</form>

</body>
</html>

1 réponse

Réponse 1 / 1
f0xi
Messages postés
4205
Date d'inscription
samedi 16 octobre 2004
Statut
Modérateur
Dernière intervention
12 mars 2022
 37
1 févr. 2014 à 19:40
Petit exemple de remplissage selon un choix, avec script et style. 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
*,html{
  font-family:calibri,arial,tahoma;
}

body{
  font-size:12pt;
}

content[hidden]{
  display:none;
  width:0;
  height:0;
  left:-9999px;
}

fieldset,input[type="text"],select{
  border:1px solid #ccc;
  border-radius:3px;
  box-shadow:none;
}
input[type="text"],select{  
  font-size:12pt;
  height:24px;
  line-height:24px;
}
input[type="text"]:focus,select:focus{
  box-shadow:0 0 3px #ccc;
}

fieldset{
  display:block;
  margin-top:28px;
  padding:8px;
}
fieldset legend{ 
  display:block;
  position:relative;
  margin-top:-22px;
  left:0px;
  font-weight:bolder;
  color:#fff;
  background-color:#ccc;
  border-top-left-radius:3px;
  border-top-right-radius:3px;
  height:24px;
  line-height:24px;
  padding:0 8px;
}

fieldset label{
  display:inline-block;
  min-width:81px;
  margin-right:4px;
}

fieldset select{
  min-width:81px;
}

fieldset input[type="text"]{
  min-width:81px;
  color:#222;
}
fieldset input[type="text"]:focus{
  color:#909;
}
fieldset input[type="button"]{
  min-width:64px;
}
</style>
	
<script>
function choice(select){
  if(select)
  {
    var value  = parseInt(select.value);
    if(value == NaN) value = 0;
    var target = document.getElementById("content");
    var source = document.getElementById("c_"+value);
    target.innerHTML = source.innerHTML; 
    if(target.innerHTML.length > 0) 
    {
      target.style.display = 'block'
    }
    else 
    {
      target.style.display = 'none';
    }
  }
}
</script>
</head>

<body>
<h4>Test affichage</h4> 

<fieldset id="settings"> 
  <legend>Choix</legend>
  <select id="choice" onchange="choice(this);">
    <option value="0" selected>-- Choisissez une option --</option>
    <option value="1">C 1</option>
    <option value="2">C 2</option>
    <option value="3">C 3</option>
  </select>
</fieldset>

<content id="content" style="display:none;">
</content>

<!-- Contenus -->

<content id="c_0"></content>
	
<content hidden id="c_1">
  <fieldset>
    <legend>C1</legend>
    <p><label>C 1 1</label><input type="text" value="1" id="c_1_1"/></p>
    <p><label>C 1 2</label><input type="text" value="2" id="c_1_2"/></p>
    <p><label>C 1 3</label><input type="text" value="3" id="c_1_3"/></p>
  </fieldset>
</content>

<content hidden id="c_2">
  <fieldset>
    <legend>C 2</legend>
    <p><label>C 2 1</label><input type="text" value="4" id="c_2_1"/></p>
    <p><label>C 2 2</label><input type="text" value="5" id="c_2_2"/></p>
    <p><label>C 2 3</label><input type="text" value="6" id="c_2_3"/></p>
  </fieldset>
</content>
<content hidden id="c_3">
  <fieldset>
    <legend>C3</legend>
    <p><label>C 3 1</label><input type="text" value="7" id="c_3_1"/></p>
    <p><label>C 3 2</label><input type="text" value="8" id="c_3_2"/></p>
    <p><label>C 3 3</label><input type="text" value="9" id="c_3_3"/></p>
  </fieldset>
</content>
</body>
</html>

0