Sujet Précédent Sujet Suivant

Changement de case de formulaire automatique

Résolu/Fermé
bretonm2004 Messages postés 319 Date d'inscription vendredi 9 mai 2008 Statut Membre Dernière intervention 30 août 2013 - 9 déc. 2010 à 04:09
bretonm2004 Messages postés 319 Date d'inscription vendredi 9 mai 2008 Statut Membre Dernière intervention 30 août 2013 - 10 déc. 2010 à 00:55
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

Réponse 1 / 3
kadeh Messages postés 334 Date d'inscription vendredi 21 décembre 2007 Statut Membre Dernière intervention 15 novembre 2012 92
10 déc. 2010 à 00:20
- 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
bretonm2004 Messages postés 319 Date d'inscription vendredi 9 mai 2008 Statut Membre Dernière intervention 30 août 2013 2
10 déc. 2010 à 00:55
+10 :D sujet rérolu merci beaucoup
0
Réponse 2 / 3
kadeh Messages postés 334 Date d'inscription vendredi 21 décembre 2007 Statut Membre Dernière intervention 15 novembre 2012 92
9 déc. 2010 à 20:57
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>

@+
1
bretonm2004 Messages postés 319 Date d'inscription vendredi 9 mai 2008 Statut Membre Dernière intervention 30 août 2013 2
9 déc. 2010 à 21:35
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>
0
bretonm2004 Messages postés 319 Date d'inscription vendredi 9 mai 2008 Statut Membre Dernière intervention 30 août 2013 2
9 déc. 2010 à 21:36
il m emmene au champ nom de l'entreprise
0
Réponse 3 / 3
kadeh Messages postés 334 Date d'inscription vendredi 21 décembre 2007 Statut Membre Dernière intervention 15 novembre 2012 92
9 déc. 2010 à 05:36
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>

@+
0
bretonm2004 Messages postés 319 Date d'inscription vendredi 9 mai 2008 Statut Membre Dernière intervention 30 août 2013 2
9 déc. 2010 à 14:47
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
0
bretonm2004 Messages postés 319 Date d'inscription vendredi 9 mai 2008 Statut Membre Dernière intervention 30 août 2013 2
9 déc. 2010 à 15:35
<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
0

Discussions similaires

Contacter le "bon coin"
babet56 -
SUDEST13 -

28 réponses