Plusieurs fonctions dans un OnSubmit dans un Form

Version imprimable

26/09/2012, 13h04
Anne1969

Plusieurs fonctions dans un OnSubmit dans un Form
Bonjour,
je travaille sur un formulaire pour lequel je fais des contrôles sur la bonne saisie des champs

Code:

<form NAME="formannonce" ACTION="'.$_SERVER['PHP_SELF'].'" METHOD="post" onsubmit="return verifannonce();">

Voilà, ça ça marche sans problème...hors je voulais rajouter au OnSubmit l'action consistant à afficher un petit message de patience lors de la validation du Form..action qui marche parfaitement seule

Code:

<form NAME="formannonce" ACTION="'.$_SERVER['PHP_SELF'].'" METHOD="post" onsubmit="document.getElementById(\'divchargement\').style.display = \'block\';">

Mais si je souhaite les 2 actions (savoir validation puis affichage du "Patienter") seule le verifannonce() fonctionne...

Code:

<form NAME="formannonce" ACTION="'.$_SERVER['PHP_SELF'].'" METHOD="post" onsubmit="return verifannonce();document.getElementById(\'divchargement\').style.display = \'block\';">

Cela fonctionne dans l'autre sens mais du coup le message "Patienter" s'affiche même en cas de non validation du Form

Code:

<form NAME="formannonce" ACTION="'.$_SERVER['PHP_SELF'].'" METHOD="post" onsubmit="document.getElementById(\'divchargement\').style.display = \'block\';return verifannonce();">

Sauriez vous m'expliquer comme faire pour faire fonctionner les 2?

Merci

Pour être plus complète je met ma fonction verifannonce (qui fonctionne, elle, à tous les coups)
Code:

1 2 3 4 5 6 7 8 function verifannonce(){ if (document.formannonce.identifiant.value.length == 0) { alert("Vous devez saisir un identifiant"); return false; } return true; }
26/09/2012, 13h11
SpaceFrog

Code:

onsubmit="return verifannonce() && document.getElementById(\'divchargement\').style.display = \'block\';">

Merci mais là pour le coup, rien ne fonctionne...:lol:

En plus je souhaite que mon message de Patience ne soit actionné que si le form est vérifié..

Je m'étais imaginé faire un truc comme ça mais pareil, le verifannonce marche mais pas le message de Patience
Code:

1 2 3 4 5 6 7 8 9 function verifannonce(){ if (document.formannonce.identifiant.value.length == 0) { alert("Vous devez saisir un identifiant"); return false; } document.getElementById('divchargement').style.display = "block"; return true; }

je viens de tester ceci qui fonctionne ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
function verif(bool){
return bool;
}
</script>
</head>
<body>
<form onsubmit=" return verif(false) && alert('coucou')">
<input type="submit" value="go"/>
</form>
</body>
</html>

26/09/2012, 13h39
Anne1969

Alors mon pb vient probablement du fait que

Code:

document.getElementById('divchargement').style.display = "block";

est une instruction et pas une fonction, non?...elle ne renvoie rien ...mais du coup je ne sais pas comment m'en sortir...
26/09/2012, 13h41
SpaceFrog

essaye avec des parenthèses ?

onsubmit="return ( verifannonce() && (document.getElementById(\'divchargement\').style.display = \'block\'));">
26/09/2012, 13h48
Anne1969

Toujours pas...verifannonce() fonctionne mais pas l'affichage de mon petit div..

Merci quand même de tes réponses!
26/09/2012, 13h50
tigunn

Salut,
tu peux poster le code généré (html, code source)? Je pense que cela pourrait aider à comprendre.

Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script type="text/javascript"> function verif(bool){ return bool; } </script> </head> <body> <form action="javascript:void(0)" onsubmit=" return verif(true) && (document.getElementById('foo').style.display='block')"> <input type="submit" value="go"/> </form> <div id="foo" style="display:none">Veuillez patienter ...</div> </body> </html>
mais n'oublie pas que la soumission du form implique un rechargement de page ...
=>

Code:

onsubmit=" if( verif(true)){document.getElementById('foo').style.display='block'}; return verif(true)">

n'oublies pas que la soumission du form implique le rechargement de page

l'autre solution est de traiter l'affichage dans la fonction verif ...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script type="text/javascript"> function verif(bool){ document.getElementById('foo').style.display=(bool)?'block':'none'; return bool; } </script> </head> <body> <form action="javascript:alert('envoyé')" onsubmit=" return verif(false)"> <input type="submit" value="go"/> </form> <div id="foo" style="display:none">Veuillez patienter ...</div> </body> </html>

26/09/2012, 14h09
Anne1969

Code:

onsubmit=" if( verifannonce(true)){document.getElementById('divchargement').style.display='block'}; return verifannonce(true)">

Seul mon verifannonce fonctionne...dingue.

Tigunn mon code source est énorme (j'ai un énorme form) :lol:
26/09/2012, 14h13
SpaceFrog

heu le param true que je passe c'est juste pour passer un paramètre pour que la fonction de vérification retourne true ou false.

en interprétant ton code, j'ai fait ceci, mais seul la vérification fonctionne, pas l'affichage...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">
function verifannonce(bool){
if (document.formannonce.identifiant.value.length == 0)
{
alert("Vous devez saisir un identifiant");
return false;
}
document.getElementById('divchargement').style.display=(bool)?'block':'none';
return true;
}
</script>
</head>
<body>
<form action="javascript:alert('envoyé')" onsubmit=" return verifannonce(false)">
<input type="submit" value="go"/>
</form>
<div id="foo" style="display:none">Veuillez patienter ...</div> 
</body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
function verifannonce(){
var bool=true
if (document.formannonce.identifiant.value.length == 0)
{
bool=false
alert("Vous devez saisir un identifiant");
}
document.getElementById('divchargement').style.display=(bool)?'block':'none';
return bool;
}
</script>

26/09/2012, 15h00
Anne1969

Bon, toujours pas...je crois que je vais me résoudre à faire mon truc moyen, à savoir

Code:

<form NAME="formannonce" ACTION="'.$_SERVER['PHP_SELF'].'" METHOD="post" onsubmit="document.getElementById(\'divchargement\').style.display = \'block\';return verifannonce();">

qui m'affiche mon message "Patienter" même en cas de mauvaise saisie (c'est à dire que cela s'affiche lors de la 2eme tentative de saisie..suis pas sûre d'être très claire là)
26/09/2012, 15h03
Bovino

Code:

onsubmit="var isOK = verifannonce();if(!isOK){document.getElementById('divchargement').style.display = 'block';};return isOK"

Mais bon... c'est assez "crade" de faire ça dans l'attribut onsubmit, il existe des façons plus propres de procéder, comme de mettre cela dans une fonction à part.
26/09/2012, 15h06
SpaceFrog

J'ai pourtant testé les differentes solutions données ci dessus...
et elles fonctionnent !
Tu es sur que ta fonction de validation retourne bien le boolean attendu ???
26/09/2012, 15h06
Anne1969

Je dois partir mais je teste cela au plus vite...
Merci en tout cas à tous
26/09/2012, 15h09
Bovino

Je pense aussi que toutes les réponses valables ont déjà été données et que si cela ne fonctionne pas correctement, c'est que le code donné ne correspond pas à ton code réel...
26/09/2012, 16h56
Anne1969

J'adore la solution "crade"! Ca marche! Merci à tous, vraiment! Je me triture le neurone depuis des heures sur ce problème...:ccool:

NB: Ah oui, j'ai bien sûr inversé la proposition puisque je veux que mon affichage "Patienter" se mette en marche uniquement si mon verifannonce retourne True!

Code:

onsubmit="var isOK = verifannonce();if(isOK){document.getElementById(\'divchargement\').style.display = \'block\';};return isOK"