Contrôle de formulaire compatible IE/Fx : plouf -_-

**Bensor** · 23/08/2007, 15h44

Salut, c'est encore moi (oui je sais, je demande beaucoup d'aide ces derniers temps).

Donc cette fois-ci, c'est un problème de contrôle de formulaire qui soit à la fois compatible IE et Fx qui me pose problème. Tout d'abord, il n'y a aucun bouton input submit dans le formulaire et il n'y en aura pas (donc pas la peine de me dire d'en mettre)

Voici le code de ma page de tests :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html>
  <head>
    <script type='text/javascript'>
      alert("rechargé");
      function valid(){
        return false;
      }
      function checkEnter(form,e){
        var characterCode ;
        if(e && e.which){
          characterCode = e.which;
        }
        else{
          e = event;
          characterCode = e.keyCode;
        }
        if(characterCode == 13){
          document.forms[form].submit;
          return false;
        }
        else{
          return true;
        }
      }
    </script>
  </head>
  <body>
    <form action='/index/test' method='post' onsubmit='return valid();' name='test'>
      <input type='text' size='20' name='random' onkeyup='checkEnter("test",event)' /><button onclick='document.test.submit;'>dsds</button>
    </form>
  </body>
</html>

Ce code fonctionne presque sous IE (le bouton ne fonctionne pas), mais pas sous Firefox(ma fonction "valid()" retourne false, mais Fx s'en fout).

La fonction checkEnter me permet d'activer la touche "entrée" qui permet de soumettre un formulaire quand on est dans un champ input (l'astuce du bouton submit caché ne fonctionne pas sous IE).

Etant donné que les sites donnent tous des solutions différentes toutes plus buggées les unes que les autres en affirmant qu'elles fonctionnent, je demande votre humble aide pour m'aider à faire fonctionner ce code sous IE et sous Firefox.

Merci d'avance

**jypees** · 24/08/2007, 15h50

Je suis laaa pour te sauver

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<html>
	<head>
		<script type='text/javascript'>
		function	show_submit()
		{
			currentButton = document.getElementById('button');
			currentButton.style.display = 'block';
		}
		function	submit_form()
		{
			document.forms[0].submit();
		}
		</script>
	</head>
	<body>
		<form action='/index/test' method='post'>
			<input onkeyup='show_submit();' />
			<button id="button" style="display: none" onclick="submit_form();">submit</button>
		</form>
	</body>
</html>

Voila en gros ce qu'il faut faire sans oublier bien entendu de readapter ca a ton code (j'ai enlever les trucs de mise en forme histoire que cela soit le plus claire possible). Voila j'attends ton commentaire

**Bensor** · 27/08/2007, 11h02

Effectivement, ce code-ci fonctionne...reste à voir si cette solution est applicable en prod, là je suis pas sûr. Enfin bon, de toutes façons merci

**Bensor** · 27/08/2007, 11h33

En fait non. Ca bug. Même si j'enlève le submit de la fonction javascript, le formulaire est tout de même envoyé.

EDIT : Bon, j'ai fait quelques modifs. J'ai remplacé le "submit" par un return true/false et ça donne déjà de meilleurs résultats. MAIS : ça bug sous IE. En effet, qu'on return true ou false, le formulaire s'envoie quand on appuie sur la touche d'entrée dans le champ.

**jypees** · 27/08/2007, 12h01

Peux tu me montrer ton code du formulaire stp?

j'ai peux etre une idée mais c'est pas sur !!!

**Bensor** · 27/08/2007, 12h34

Voili voilou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
	<head>
		<script type='text/javascript'>
		alert("chargé");
		function	show_submit()
		{
			currentButton = document.getElementById('button');
			currentButton.style.display = 'block';
		}
		function	submit_form()
		{
			//document.forms[0].submit();
			return false;
		}
		</script>
	</head>
	<body>
		<form action='/index/test' method='post'>
			<input onkeyup='show_submit();' />
			<button id="button" style="display: none" onclick="return submit_form();">submit</button>
		</form>
	</body>
</html>

**javatwister** · 27/08/2007, 13h28

je ne comprends pas bien:

- visiblement, tu ne testes aucune saisie dans ta fonction;
- tu veux soumettre le formulaire sur entrée?

si on est d'accord, pourquoi ne fais-tu pas:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<form action="" method="post" id="test">
   <p>
      <input type="text" size="20" name="random" />
   </p>
</form>

sans script d'aucune sorte;

**Bensor** · 27/08/2007, 14h16

Il s'agit d'une page de test. En réalité y'a un gros site derrière, et cette page reprend le même code de formulaire. Les boutons que j'utilise dans ces formulaires sont en réalités des ensembles d'images (ce n'est pas le cas ici, mais j'utilise une balise "button" ce qui revient donc au même), d'où l'absence de bouton submit.

Souvent, dans ces formulaires, Je fais des vérifications, ou alors j'affiche des boites de dialogue pour demander une décision de l'utilisateur, et je dois pouvoir interrompre l'envoi du formulaire (par un "return false" tout con par exemple), ainsi que pouvoir envoyer le formulaire grâce à la touche "Entrée" dans un champ tout en faisant passer l'envoi par les mêmes vérifications Javascript que le bouton (d'où le "onsubmit" du code du premier message), et que cela fonctionne sous IE et sous Fx.

Cette page de test me permet ainsi de voir si le formulaire se comporte de la même manière sous IE et sous Firefox quand je clique sur le bouton ou quand je fais "entrée" dans un champ, et de tenter de résoudre ces problèmes autant que je peux, ainsi que d'avoir un code court et très lisible.

**Bensor** · 28/08/2007, 15h33

Bon, je suis parti sur un autre chemin. Voici le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<html>
  <head>
    <script type='text/javascript'>
      function checkEnter(e,form,callbackFunc){
        var characterCode ;
        if(e && e.which){
          characterCode = e.which;
        }
        else{
          e = event;
          characterCode = e.keyCode;
        }
        if(characterCode == 13){
          setTimeout("callbackFunc()",1);
          return false;
        }
        else{
          return true;
        }
      }
      function	submit_form(){
        alert("a");
        return false;
      }
      function	submit_formb(){
        alert("b");
        return true;
      }
    </script>
  </head>
  <body>
    <form action='/index/test' method='post' name="toto">
      <input type='text' size='30' name='toto' onKeyUp='checkEnter(event,"toto","submit_form")' /> <input type='text' size='30' name='toto2' onKeyUp='checkEnter(event,"toto")' />
      <button id="button" onclick="return submit_form();">submit</button>
    </form>
    <form action='/index/test' method='post' name="toto32">
      <input type='text' size='30' name='toto4' onKeyUp='checkEnter(event,"toto32","submit_formb")' /> <input type='text' size='30' name='toto02' onKeyUp='checkEnter(event,"toto32")' />
      <button id="button" onclick="return submit_formb();">submit</button>
    </form>
  </body>
</html>

Il s'agit toujours d'une page de code de test. En gros, je cherche à appeler une fonction d'après une variable contenant une chaine de caractère ( en PHP cela donnerait $variable(); ). La façon qui me semble être la plus propice à ce genre d'appel est en passant par la fonction setTimeout, où l'on fait appel à une fonction par une chaine de caractère. Hélàs, je bloque encore et toujours

**Bensor** · 28/08/2007, 15h42

Au temps pour moi,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<html>
  <head>
    <script type='text/javascript'>
      function checkEnter(e,form,callbackFunc){
        var characterCode ;
        if(e && e.which){
          characterCode = e.which;
        }
        else{
          e = event;
          characterCode = e.keyCode;
        }
        if(characterCode == 13){
          setTimeout(callbackFunc+"()",1);
          return false;
        }
        else{
          return true;
        }
      }
      function	submit_form(){
        alert("a");
        return false;
      }
      function	submit_formb(){
        alert("b");
        return true;
      }
    </script>
  </head>
  <body>
    <form action='/index/test' method='post' name="toto">
      <input type='text' size='30' name='toto' onKeyUp='checkEnter(event,"toto","submit_form")' /> <input type='text' size='30' name='toto2' onKeyUp='checkEnter(event,"toto","submit_form")' />
      <button id="button" onclick="return submit_form();">submit</button>
    </form>
    <form action='/index/test' method='post' name="toto32">
      <input type='text' size='30' name='toto4' onKeyUp='checkEnter(event,"toto32","submit_formb")' /> <input type='text' size='30' name='toto02' onKeyUp='checkEnter(event,"toto32","submit_formb")' />
      <button id="button" onclick="return submit_formb();">submit</button>
    </form>
  </body>
</html>

Me reste plus qu'à dire au formulaire de s'envoyer et c'est nickel chrome. Compatible IE et Fx, pour mon plus grand bonheur

Contrôle de formulaire compatible IE/Fx : plouf -_-

JavaScript

Vue hybride

Discussions similaires

Partager

Partager