Changement de case de formulaire automatique [Résolu/Fermé]

Signaler
Messages postés
319
Date d'inscription
vendredi 9 mai 2008
Statut
Membre
Dernière intervention
30 août 2013
-
bretonm2004
Messages postés
319
Date d'inscription
vendredi 9 mai 2008
Statut
Membre
Dernière intervention
30 août 2013
-
Bonjour,

j'ai 3 cases pour inscrire un numéro de téléphone j'aimerait que quand la premiere case est remplie le curseur se déplace automatiquement sur le deuxieme et de meme pour le troisieme

merci de votre aide





3 réponses

Messages postés
337
Date d'inscription
vendredi 21 décembre 2007
Statut
Membre
Dernière intervention
9 mai 2013
89
- pour les listes de choix (jour, moi, année) mettez les valeurs des options pour récupérer le choix de l'utilisateur.
<select name="le_nom_du_select">
  <option value="valeur_option1">option 1</option>
  <option value="valeur_option2">option 2</option>
  <option value="valeur_option3">option 3</option>
</select>

- concernant votre question:
dans la section head:

<script type="text/javascript">
function checklength(element, element_suivant, v)
{
 if (v.length==element.maxLength)
 {
     element_suivant.focus()
 }
}
</script>

le formulaire : n'oubliez pas de spécifier les attributs de la balise FORM (action, method)
<form action="page_traitement.php" method="post"name="form_id" id="form_id" >
<table align="center" style=" background-color:#339999;color:#FFFFFF;">
 <tr>
  <td>Type de client :</td>
  <td colspan="3">
   <select name="typeclient">
    <option value="Résidentiel">Résidentiel</option>
    <option value="Commercial">Commercial</option>
   </select>
  </td>
 </tr>
 <tr>
  <td>Nom de l'entreprise :</td>
  <td colspan="3"><input type="text" name="compagnie" /></td>
 </tr>
 <tr>
  <td>Prénom *:</td>
  <td colspan="3"><input type="text" name="prenom" /></td>
 </tr>
 <tr>
  <td>Nom *:</td>
  <td colspan="3"><input type="text" name="nom" /></td>
 </tr>
 <tr>
  <td>Adresse :</td>
  <td colspan="3"><input type="text" name="adresse" /></td>
 </tr>
 <tr>
  <td>Ville :</td>
  <td colspan="3"><input type="text" name="ville" /></td>
 </tr>
 <tr>
  <td>Code Postal :</td>
  <td colspan="3"><input type="text" maxlength="6" name="codepostal" /></td>
 </tr>
 <tr>
  <td>Téléphone :</td>
  <td>( <input type="text" name="tel" id="Tab1" maxlength="3" size="1" onkeyup="checklength(this, Tab2, this.value)"/> )</td>
  <td><input type="text" name"tel1" id="Tab2" maxlength="3" size="1" onkeyup="checklength(this, Tab3, this.value)"/> -</td>
  <td><input type="text" name"tel2" id="Tab3" maxlength="4" size="2" onkeyup="checklength(this,Tab4, this.value)"/>
  </td>
 </tr>
 <tr>
  <td>Télécopieur :</td>
  <td>( <input type="text" name="fax" id="Tab4" maxlength="3" size="1" onkeyup="checklength(this, Tab5, this.value)"/> )</td>
  <td><input type="text" name"fax1" id="Tab5" maxlength="3" size="1" onkeyup="checklength(this, Tab6, this.value)"/> -</td>
  <td><input type="text" name"fax2" id="Tab6" maxlength="4" size="2" /></td>
 </tr>
 <tr>
  <td>Adresse courriel *:</td>
  <td colspan="3"><input type="text" name="email" /></td>
 <tr>
  <td>Référé par (Non obligatoire) :</td>
  <td colspan="3"> <input type="text" name="refere" /></td>
 </tr>
 <tr>
  <td>Date de naissance *:</td>
  <td colspan="3">
<table>
<tr>
  <td>
   <select name="jour">
    <option selected="selected">JJ</option>
    <option value="01">01</option>
    <option value="02">02</option>
    <option value="03">03</option>
    <option value="03">04</option>
    <option value="03">05</option>
    <option value="03">06</option>
    <option value="03">07</option>
    <option value="03">08</option>
    <option value="03">09</option>
    <option value="03">10</option>
    <option value="03">11</option>
    <option value="03">12</option>
    <option value="03">13</option>
    <option value="03">14</option>
    <option value="03">15</option>
    <option value="03">16</option>
    <option value="03">17</option>
    <option value="03">18</option>
    <option value="03">19</option>
    <option value="03">20</option>
    <option value="03">21</option>
    <option value="03">22</option>
    <option value="03">23</option>
    <option value="03">24</option>
    <option value="03">25</option>
    <option value="03">26</option>
    <option value="03">27</option>
    <option value="03">28</option>
    <option value="03">29</option>
   <option value="31">30</option>
   <option value="31">31</option>
  </select>
 </td>
 <td>
 <select name="mois">
  <option>MM</option>
  <option value="01">01</option>
  <option value="02">02</option>
  <option value="03">03</option>
  <option value="03">04</option>
  <option value="03">05</option>
  <option value="03">06</option>
  <option value="03">07</option>
  <option value="03">08</option>
  <option value="03">09</option>
  <option value="03">10</option>
  <option value="03">11</option>
  <option value="03">12</option>
 </select>
</td>
<td>
 <select name="annee">
  <option>AAAA</option>
  <option value="2010">2010</option>
  <option value="2009">2009</option>
  <option value="2008">2008</option>
  <!--... -->
  <option value="1981">1981</option>
 </select>
</td>
</tr>
</table></td>
 </tr>
<tr>
  <td>Mot de passe :</td>
  <td colspan="3"><input type="password" name="password" /></td>
 </tr>
 <tr>
  <td>Confirmer le mot de passe :</td>
  <td colspan="3"><input type="password" name="password1" /></td>
 </tr>
 <tr>
  <td colspan="4" align="center">
   <input type="submit" name="envoyer" value="Envoyer" />&nbsp; &nbsp; 
   <input type="reset" name="effacer" value="Effacer" />
  </td>
 </tr>
</table>
</form>

enfin vous pouvez consulter cet article sur Les formulaires HTML
@+
3
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 72015 internautes nous ont dit merci ce mois-ci

bretonm2004
Messages postés
319
Date d'inscription
vendredi 9 mai 2008
Statut
Membre
Dernière intervention
30 août 2013
2
+10 :D sujet rérolu merci beaucoup
Messages postés
337
Date d'inscription
vendredi 21 décembre 2007
Statut
Membre
Dernière intervention
9 mai 2013
89
Bonjour,

désolé j'ai pas fait attention.
<script type="text/javascript">
function checklength(element,v)
{
 if (v.length==element.maxLength)
 {
  var next=element.tabIndex
  if (next<document.getElementById("form_id").length)
  {
    document.getElementById("form_id").elements[next].focus()
  }
 }
}
</script>

*****
<form action="" method="" name="form_id" id="form_id" enctype="" >
 <table>
  <tr>
   <td style="color:#FFF;">
    ( <input type="text" name="fax" tabindex="1" maxlength="3" size="1" onkeyup="checklength(this,this.value)"/> )
   </td>
   <td style="color:#FFF;">
    <input type="text" name"fax1" tabindex="2" maxlength="3" size="1" onkeyup="checklength(this,this.value)"/> -
   </td>
   <td>
    <input type="text" name"fax2" tabindex="3" maxlength="4" size="2" onkeyup="checklength(this,this.value)"/>
   </td>
  </tr>
 </table> 
</form>

@+
bretonm2004
Messages postés
319
Date d'inscription
vendredi 9 mai 2008
Statut
Membre
Dernière intervention
30 août 2013
2
je script fonctionne nickel yajuste un petit hic vu qe mon formulaire contient d'autres champs il me rammene pas a la bonne place

<form action="" method="" name="form_id" id="form_id" enctype="" >
<table align="center">
<tr>
<td style="color:#ffffff;">Type de client :</td>
<td><select name="typeclient">
<option>Résidentiel</option>
<option>Commercial</option>
</select></td>
</tr>
<tr>
<td style="color:#ffffff;">Nom de l'entreprise :</td>
<td><input type="text" name="compagnie" /></td>
</tr>
<tr>
<td style="color:#ffffff;">*Prénom :</td>
<td><input type="text" name="prenom" /></td>
</tr>
<tr>
<td style="color:#ffffff;">*Nom :</td>
<td><input type="text" name="nom" /></td>
</tr>
<tr>
<td style="color:#ffffff;">Adresse :</td>
<td><input type="text" name="adresse" /></td>
</tr>
<tr>
<td style="color:#ffffff;">Ville :</td>
<td><input type="text" name="ville" /></td>
</tr>
<tr>
<td style="color:#ffffff;">Code Postal :</td>
<td><input type="text" maxlength="6" name="codepostal" /></td>
</tr>
<tr>
<td style="color:#ffffff;">Téléphone :</td>
<td>





<table>
<tr>
<td style="color:#FFF;">
( <input type="numero" name="fax" tabindex="1" maxlength="3" size="1" onkeyup="checklength(this,this.value)"/> )
</td>
<td style="color:#FFF;">
<input type="text" name"numero1" tabindex="2" maxlength="3" size="1" onkeyup="checklength(this,this.value)"/> -
</td>
<td>
<input type="text" name"numero2" tabindex="3" maxlength="4" size="2" onkeyup="checklength(this,this.value)"/>
</td>
</tr>
</table>




</td>
</tr>
<tr>
<td style="color:#ffffff;">Télécopieur :</td>
<td>


<table>
<tr>
<td style="color:#FFF;">
( <input type="text" name="fax" tabindex="1" maxlength="3" size="1" onkeyup="checklength(this,this.value)"/> )
</td>
<td style="color:#FFF;">
<input type="text" name"fax1" tabindex="2" maxlength="3" size="1" onkeyup="checklength(this,this.value)"/> -
</td>
<td>
<input type="text" name"fax2" tabindex="3" maxlength="4" size="2" onkeyup="checklength(this,this.value)"/>
</td>
</tr>
</table>



</td>
</tr>
<tr>
<td style="color:#ffffff;">*Adresse courriel :</td>
<td><input type="text" name="email" /></td>
<tr>
<td style="color:#FFF;">Référé par (Non obligatoire) :</td>
<td> <input type="text" name="refere" />
</tr>
<tr>
<td style="color:#ffffff;">*Date de naissance :</td>
<td>

<table>
<tr>
<td><select name="jour">
<option>JJ</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select></td>
<td><select name="mois">
<option>MM</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select></td>
<td><select name="annee">
<option>AAAA</option>
<option>2010</option>
<option>2009</option>
<option>2008</option>
<option>2007</option>
<option>2006</option>
<option>2005</option>
<option>2004</option>
<option>2003</option>
<option>2002</option>
<option>2001</option>
<option>2000</option>
<option>1999</option>
<option>1998</option>
<option>1997</option>
<option>1996</option>
<option>1995</option>
<option>1994</option>
<option>1993</option>
<option>1992</option>
<option>2003</option>
<option>2002</option>
<option>2001</option>
<option>2000</option>
<option>1999</option>
<option>1998</option>
<option>1997</option>
<option>1996</option>
<option>1995</option>
<option>1994</option>
<option>1993</option>
<option>1992</option>
<option>1991</option>
<option>1990</option>
<option>1989</option>
<option>1988</option>
<option>1987</option>
<option>1986</option>
<option>1985</option>
<option>1984</option>
<option>1983</option>
<option>1982</option>
<option>1981</option>
</select></td>
</tr>
</table>


</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td style="color:#ffffff;">Mot de passe :</td>
<td><input type="password" name="password" /></td>
</tr><tr>
<td style="color:#ffffff;">Confirmer le mot de passe :</td>
<td><input type="password" name="password1" /></td>
</tr>
</table>
</form>
bretonm2004
Messages postés
319
Date d'inscription
vendredi 9 mai 2008
Statut
Membre
Dernière intervention
30 août 2013
2
il m emmene au champ nom de l'entreprise
Messages postés
337
Date d'inscription
vendredi 21 décembre 2007
Statut
Membre
Dernière intervention
9 mai 2013
89
Bonjour,
<script type="text/javascript">
function go_to_Next( what ) 
{
	if(typeof what.form != 'null')
	{
		var f = what.form.elements,
		n = f.length,
		j;
		if(n) 
		{
			for(var i=0; i<n; i++) 
			{
				if(f[i] === what) j=i;
				if(typeof j == 'number' && i>j &&
				f[i].type == 'checkbox' &&
				!f[i].checked )
				{
					f[i].focus();
					break;
				}
			}
		}
	}
}
</script>

<form>
case 1 : <input name="c1" type="checkbox" onclick="go_to_Next(this)">
case 2 : <input name="c2" type="checkbox" onclick="go_to_Next(this)">
case 3 : <input name="c3" type="checkbox" onclick="go_to_Next(this)">
</form>

@+
bretonm2004
Messages postés
319
Date d'inscription
vendredi 9 mai 2008
Statut
Membre
Dernière intervention
30 août 2013
2
ce n'est pas tout a fait ce que je voulait dire je croit que je me suis mal expliqué

les 3 cases ce sont descellules de type text pour inscrire le numero de telephone

je suis tres bon en php mais en javascript je suis assez néophite

merci
bretonm2004
Messages postés
319
Date d'inscription
vendredi 9 mai 2008
Statut
Membre
Dernière intervention
30 août 2013
2
<table>
<tr>
<td style="color:#FFF;">( <input type="text" name="fax" maxlength="3" size="1" /> )</td>
<td style="color:#FFF;"><input type="text" name"fax1" maxlength="3" size="1" /> -</td>
<td><input type="text" name"fax2" maxlength="4" size="2" /></td>
</tr>
</table>

voila ce que je veut qui change automatiquement de case

mon formulaire s appele form_id