Changement de case de formulaire automatique

Résolu

bretonm2004 Messages postés 319 Date d'inscription Statut Membre Dernière intervention -
bretonm2004 Messages postés 319 Date d'inscription Statut Membre Dernière intervention - 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

Afficher la suite

A voir également:

Changement de case de formulaire automatique
Whatsapp formulaire opposition - Guide
Changer de dns - Guide
Logiciel de sauvegarde automatique gratuit - Guide
Formulaire de réclamation facebook - Guide
Réponse automatique thunderbird - Guide

3 réponses

Réponse 1 / 3

kadeh Messages postés 334 Date d'inscription Statut Membre Dernière intervention 92

- 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
@+

bretonm2004 Messages postés 319 Date d'inscription Statut Membre Dernière intervention 2

+10 :D sujet rérolu merci beaucoup

Réponse 2 / 3

kadeh Messages postés 334 Date d'inscription Statut Membre Dernière intervention 92

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 Statut Membre Dernière intervention 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 Statut Membre Dernière intervention 2

il m emmene au champ nom de l'entreprise

Réponse 3 / 3

kadeh Messages postés 334 Date d'inscription Statut Membre Dernière intervention 92

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 Statut Membre Dernière intervention 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 Statut Membre Dernière intervention 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

Discussions similaires

Contact LEBONCOIN

Votre réponse

Discussions similaires