Controler un formulaire

Version imprimable

Bonjour,

J'ai un formulaire tout ce qu'il y a de plus normal.

Le problème que je rencontre est le suivant :
Dans ce formualire, j'ai un champ SELECT :
Code:

1 2 3 4 5 6 <SELECT CLASS='ChoixOption' NAME='option2' SIZE='1'> <OPTION VALUE='0' SELECTED>Sélection</OPTION> <OPTION VALUE='205'>6 mm</OPTION> <OPTION VALUE='207'>8 mm</OPTION> <OPTION VALUE='209'>10 mm</OPTION> </SELECT>
J'aimerais, au moment ou l'utilisateur clique sur le bouton de validation, lancer un script qui contrôle le choix effectué sur ce champ SELECT.

En effet, s'il n'a pas fait de choix, le valeur sera 0. Or, il faut qu'il choisisse une valeur.

J'aimerai donc lancer une boîte de dialogue si la valeur du select est toujours 0 au moment ou l'utilisateur clique sur le bouton submit.
Cette boîte de dialogue l'informant qu'il doit choisir une valeur dans la liste.

J'espère que j'ai été assez clair :?

En tout cas, je vous remercie de votre aide.

La fonction JS :

Code:

1
2
3
4
5
6
7
 
function formOK(leformu){
   if(leformu.option2.value==0){
   alert('Remplis moi ce champs vide...');
   return false;
   }
}

Le bouton submit :

Code:

1
2
 
<input type="submit" value="go" onclick="javascript:return formOK(this.form)" />

05/11/2004, 09h53
SpaceFrog

Code:

<input type="submit" value="go" onclick="javascript:return formOK(this.form)" />

onclick n'attend à mon avis pas grand chose d'autre que du javascript...
enfin moi je n'ai jamias vu un truc du genre:

Code:

<input type="submit" value="go" onclick="recettedecuisine:soupedortiesàlacrème" />

je pense donc que

Code:

<input type="submit" value="go" onclick="return formOK(this.form)" />

est largelment suffisant
06/11/2004, 01h26
Fleep

Merci, ca fonctionne parfaitement ^^

Je tiens a m'excusez mais je n'arrive pas a faire marcher ce script...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function formOK(){
 
   if(document.myfom.totalmonday.value>1){
   alert('The workload for monday is too high ');
   return false;
   }
 if(document.myfom.totaltuesday.value>1){
   alert('The workload for tuesday is too high ');
   return false;
   }
   if(document.myfom.totalwednesday.value>1){
   alert('The workload for wednesday is too high ');
   return false;
   }
   if(document.myfom.totalthursday.value>1){
   alert('The workload for thursday is too high ');
   return false;
   }
   if(document.myfom.totalfriday.value>1){
   alert('The workload for friday is too high ');
   return false;
   }
}

Code:

<input type='submit' name='action' value='Save' onclick='return formOK();' >;

Merci pour votre aide...

02/05/2007, 17h18
E.Bzz

Citation:

Envoyé par ChrisMan

Je tiens a m'excusez mais je n'arrive pas a faire marcher ce script...

Mieux vaut préciser ce qui ne marche pas comme prévu.

Si c'est qu'il n'est jamais envoyé, ajoute

Code:

return true;

en dernière ligne de ta fonction de verif : onsubmit attends false ou true;
Là tu renvoies false ou ... rien :mrgreen:

Si les symptômes persistent, précise le dysfonctionnement ;)

A+

PS : Ah ouaiiiis ! Avec de la crême ça peut être pas mal :mrgreen:
02/05/2007, 17h30
ChrisMan

Non en réalité, au contraire, le formulaire s'envoit toujours.
Il s'execute tout le temps et ne controle rien...

J'viens de comprendre l'histoire de la creme... :lol:
02/05/2007, 17h35
E.Bzz

Citation:

Envoyé par ChrisMan

Non en réalité, au contraire, le formulaire s'envoit toujours.
Il s'execute tout le temps et ne controle rien...

8O Rhoooo !!
@ SpaceFrog : faut pas les faire trop fermenter les orties (bon d'accord, j'avais rien vu non plus à la 1° lecture)

@ChrisMan : ta fonction de verif doit être appelée sur le onsubmit du <form> et non sur le onclick du bouton submit :aie:

A+
02/05/2007, 17h37
E.Bzz

... le name="action" du bouton risque aussi de te poser des pb (action => form).
02/05/2007, 17h43
ChrisMan

J'ai enlevé le 'name', et je l'ai mis sur le onsubmit de mon formulaire mais ca continue a tout envoyer !!
Pourtant dans l'exemple du dessus (qui marche apparement pour quelqu'un) c'est bien un onclick sur le bouton...
Mais peu importe la, les 2 ne marchent pas. J'avais deja un onSubmit sur mon formulaire est ce que ca peut empecher le fonctionnement du onClick ?
02/05/2007, 17h47
E.Bzz

Citation:

Envoyé par ChrisMan

J'ai enlevé le 'name', et je l'ai mis sur le onsubmit de mon formulaire mais ca continue a tout envoyer !!

Fais plutôt un copié/collé de ta version actuelle, parce que là ... :?
Le onsubmit du <form> est la seule manière (standard) de faire le contrôle sur le client ...

Pour info : il faut toujours la refaire sur le serveur (au cas où JS soit désactivé) ....

Voici mon script :

Code:

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
<script language="javascript">
 
function formOK(){
 
   if(document.myfom.totalmonday.value>1){
   alert('The workload for monday is too high ');
   return false;
   }
 if(document.myfom.totaltuesday.value>1){
   alert('The workload for tuesday is too high ');
   return false;
   }
   if(document.myfom.totalwednesday.value>1){
   alert('The workload for wednesday is too high ');
   return false;
   }
   if(document.myfom.totalthursday.value>1){
   alert('The workload for thursday is too high ');
   return false;
   }
   if(document.myfom.totalfriday.value>1){
   alert('The workload for friday is too high ');
   return false;
   }
   return true;
}
</script>

Voici le debut de mon formulaire

Code:

<form name="myform" method="post" action="savload.php" onsubmit="return formOK();">

Et enfin mon bouton

Code:

<input type='submit' value='Save' >

Je ne comprenais pas bien mais la... :?

02/05/2007, 18h03
E.Bzz

Effectivement, sur le principe, c'est OK.
Sous réserve que les identifiants (des name et non des id) soient corrects :?

Juste la syntaxe

Code:

document.forms['myfom'].elements['totalmonday'].value

qui pose moins de pb de compatibilité ...
02/05/2007, 18h05
E.Bzz
Ah si : pb de type de données :
Code:

1 2 if (parseInt(document.forms['myfom'].elements['totalmonday'].value)>1) ...
Les value sont de type caractère, par défaut, et tu utilises un opérateur de comparaison numérique ;)
02/05/2007, 18h12
ChrisMan

Non désolé...
J'ai tout essayé, avec le onsubmit, le onClick...
Ca ne marche toujours pas... Je ne comprends pas.
02/05/2007, 18h18
E.Bzz

Citation:

Envoyé par ChrisMan

Ca ne marche toujours pas... Je ne comprends pas.

Heu ... ben moi je comprends plus, là 8O
Tu n'aurais pas "cassé" les parties qui marchaient en essayant de corriger (comme tu reparles du onclick, ça m'inquiète :mrgreen: )

Fais voir tout le code actuel ...

Ca doit marcher ;)
03/05/2007, 02h46
debie1108

Bonjour,

J'y connais pas grand chose en Javascript mais le nom de ton formulaire est : myform

Et dans ton javascript tu tests des document.myfom....
03/05/2007, 09h07
ChrisMan

Merci beaucoup...
Je crois que j'etais fatigué hier soir... En effet ca marche, merci a vous 2 !!:D
03/05/2007, 09h08
E.Bzz

Citation:

Envoyé par debie1108

J'y connais pas grand chose en Javascript mais le nom de ton formulaire est : myform

Et dans ton javascript tu tests des document.myfom....

Joli ! :king:
03/05/2007, 17h14
ChrisMan

Tout marche niquel sous Firefox en fait, mais sous IE, meme sous Opera mon javascript ne fonctionne pas !
Est ce qu'il y a une raison valable a part le fait que c'est de la m****e ?
Faut il que je remontre mon code ?
03/05/2007, 17h18
E.Bzz

Citation:

Envoyé par ChrisMan

Est ce qu'il y a une raison valable a part le fait que c'est de la m****e ?

Valable ?
Non, c'est la seule :mrgreen:

Sinon, vazy pour le code ...

A+

Voici mon javascript (enfin, un de mes javascript)...

Code:

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 <script language="javascript">
 
 
 function AfficheTotalDay(champ1, champ2) // champ1 :premiere partie du nom du select selectionné
								//champ2:Deuxieme partir du nom du select selectionné
 {
 // On va chercher le nombre de lignes dans l'input caché
 var nblignes=parseInt(document.forms['myform'].elements['nblignes'].value);
 // Creation du jour selectionné
if (champ1==1){daytext="monday";}
if (champ1==2){daytext="tuesday";}
if (champ1==3){daytext="wednesday";} //On met dans daytext le nom du jour qu'on modifie
if (champ1==4){daytext="thursday";}
if (champ1==5){daytext="friday";}
champ2.toString(10); 
// Conversion en String et concatenation du jour et du numero pour obtenir le nom du champs input selectionné
var total=0;
 var totalweek=0;
 var totalglobal=0;
for (i=1; i<=nblignes; i++)
{
champ=i;
 champ.toString(10); 
 var jour=daytext.concat(champ); 
  var nouvelle=parseFloat(document.forms['myform'].eval(jour).options[document.forms['myform'].eval(jour).selectedIndex].value); 
  total=total+nouvelle;
}
 
// Calcul et creation du totalJOUR
   var tot="total"; 
  var totalday=tot.concat(daytext); 
    document.forms['myform'].eval(totalday).value=total; 
    if (document.forms['myform'].eval(totalday).value>1)
    {
    //document.myform.eval(totalday).style.backgroundColor='#CC0000';
    //document.myform.eval(totalday).style.fontSize = '12pt';
    document.forms['myform'].eval(totalday).style.border = "solid red 3px";
    }
   if (document.forms['myform'].eval(totalday).value<1.25)
    {
    //document.myform.eval(totalday).style.backgroundColor='#FFFFFF';
    //document.myform.eval(toalday).style.border= "white";
    document.forms['myform'].eval(totalday).style.border = "solid grey 1px";
    }
 
// Recalcul du totalPROJETSEMAINE
  var week="totalweek".concat(champ2) 
  var lundi="monday".concat(champ2); 
    var mardi="tuesday".concat(champ2); 
  var mercredi="wednesday".concat(champ2); 
  var jeudi="thursday".concat(champ2); 
  var vendredi="friday".concat(champ2); 
 
totalweek=parseFloat(document.forms['myform'].eval(lundi).options[document.forms['myform'].eval(lundi).selectedIndex].value)+
parseFloat(document.forms['myform'].eval(mardi).options[document.forms['myform'].eval(mardi).selectedIndex].value)+
parseFloat(document.forms['myform'].eval(mercredi).options[document.forms['myform'].eval(mercredi).selectedIndex].value)+
parseFloat(document.forms['myform'].eval(jeudi).options[document.forms['myform'].eval(jeudi).selectedIndex].value)+
parseFloat(document.forms['myform'].eval(vendredi).options[document.forms['myform'].eval(vendredi).selectedIndex].value);
document.forms['myform'].eval(week).value=totalweek; 
 
// Recalcul du totalGlobal
 
totalglobal=parseFloat(document.forms['myform'].totalmonday.value)+parseFloat(document.forms['myform'].totaltuesday.value)+parseFloat(document.forms['myform'].totalwednesday.value)
+parseFloat(document.forms['myform'].totalthursday.value)+parseFloat(document.forms['myform'].totalfriday.value);
document.forms['myform'].total.value=totalglobal;
}

03/05/2007, 17h53
E.Bzz
Code:

1 2 for (i=1; i<=nblignes; i++) {champ=i.toString(10);
serait pas plus logique ?

Sinon, doit manquer un parseFloat() là, non :

Code:

if (document.forms['myform'].eval(totalday).value<1.25)

Sinon, les eval() dans les ref aux objets, j'utilise pas (mais y parait que ça marche) ....

Mais bon, rien de catégorique :?
04/05/2007, 09h03
ChrisMan

Non pour la deuxieme car au dessus j'affecte un float a cte "variable" donc elle contient une valeur numerique, plus string !
De toute maniere ca ca marche...:roll:
04/05/2007, 09h15
E.Bzz

Citation:

Envoyé par ChrisMan

Non pour la deuxieme car au dessus j'affecte un float a cte "variable" donc elle contient une valeur numerique, plus string !

Peu importe : un ".value" est de type string

Citation:

De toute maniere ca ca marche...:roll:

C'est toi qui voit ...
04/05/2007, 09h53
ChrisMan

J'ai changé tout ce que t'as dit... Mais rien n'y fait.
Sous FF ca marche niquel... Sous IE, rien ! Aucun javascript.
Le javascript est pourtant activé...
04/05/2007, 09h58
E.Bzz

Citation:

Envoyé par ChrisMan

Sous FF ca marche niquel... Sous IE, rien ! Aucun javascript.
Le javascript est pourtant activé...

C'est donc une erreur de syntaxe !

Bonne recherche ;)

A+