8791 sujets

Développement web côté serveur, CMS

Desactiver le bouton submit à l'envoi d'un formulaire

Pages :
Bonjour à tous,

Je cherche à rendre inactif le bouton envoyer (submit) de mon formulaire de façon à ce que les utilisateurs ne puissent pas recliquer dessus quand des données sont envoyées à la base, ce qui causent parfois des resultats ennuyeux.

Est-ce possible en PHP ? ou alors en Javascript.

Merci d'éclairer ma lanterne.
Salut,

je ne comprends pas de quoi tu parles : un INPUT submit n'a pas à être désactivé une fois qu'il a été cliqué. Smiley murf

Si tu as un problème je dirais que c'est parce que tu ne fais pas de redirection une fois que le formulaire a été traité... ou alors il faudrait nous donner plus d'infos...
Bonjour,

Ma préoccupation est de rendre inactif le bouton envoi une fois qu'il a été cliqué. Parfois et j'imagine que c'est dû au fait que l'utilisateur clique à plusieurs reprises avant que les données ne soient totalement envoyées en pensant que sont formulaire n'a pas été validé , je retrouve sur une publication 6 images alors que le formulaire ne comporte que 3 champs d'upload...

Bizarre ne trouves-tu pas ?
Est-ce possible que cette étrangeté provienne du clique multiple ?

Je ne trouve pas l'explication... Le formulaire est redirigé après traitement sur une page confimation.php.

Par contre je viens de tester le clique multiple avant l'envoi complet des données et je me retrouve avec 3 images et pas 6 ou 9 comme c'est déjà arrivé.

Je ne vois pas d'où cela peut provenir, d'autant que ça n'arrive pas systémantiquement c'est surcenu 3 fois sur environ 100 publications.
pareto a écrit :
c'est surcenu 3 fois sur environ 100 publications.
La redirection permet justement d'éviter cela : cela n'empêche personne de faire "page précédente" et de re-soumettre son formulaire. Donc à moins de vérifier que le nom des images n'existe pas déjà avant de l'uploader je ne vois pas grand chose à faire.
Sur un formulaire classique ce genre de problème ne peut normalement arriver, mais peut être est ce un formulaire dont le contenu est soumis au serveur via une requête AJAX non, auquel cas j'ai déjà vu des comportements similaire, ou tout simplement un utilisateur qui a fait un page précédente et revalidé le formulaire, le mieux c'est d'utiliser un token CSRF sur chaque formulaire.
Edit : Désolé je n'avais pas vu la réponse précedente...

Eurêka j'ai compris !!!!

Alors j'explique: la personne publie sa news, elle met 3 photos, elle valide. Les données sont traitées et envoyées au serveur. La redirection se fait grâce à :
"header('Location: confirmation.php');"

sur la page confirmation.php j'ai 2 choix :

(1) retour à l'accueil
(2) voir la publication

Par contre si l'utilisateur clique sur le bouton "PRECEDENT" de IE il retourne sur le formulaire rempli et peut réuploader 3 photos maxi.

L'idée est de :

1 - supprimer les données du formulaire une fois rempli.
2 - interdire l'usage du bouton "PRECEDENT" du navigateur.

Dans les 2 cas j'en appelle à vos compétences.

Merci d'avance
Modifié par pareto (23 Jul 2010 - 11:30)
pareto a écrit :
L'idée est de :

1 - supprimer les données du formulaire une fois rempli.
2 - interdire l'usage du bouton "PRECEDENT" du navigateur.
1) il suffit d'interdire la mise en cache :

* soit avec la fonction header
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date dans le passé
* soit en activant les sessions : 
session_start();
2) on ne peut pas (et c'est heureux) empêcher un utilisateur d'utiliser comme il le souhaite son navigateur.
oui pas super comme soluce

En plus la fonction JS ne marche pas à tous les coups...

J'ai opté pour la méthode Header.

ça marche.


MAIS j'ai un controle en JS qui vérifie si les champs obligatoires sont remplis, et là ça ne marche plus ...
Je reteste
Modifié par pareto (23 Jul 2010 - 12:02)
pareto a écrit :
j'ai un controle en JS qui vérifie si les champs obligatoires sont remplis, et là ça ne marche plus ...
Pas de raison : on peut voir le code ?
oui j'étais en train de passer les tests en php...
le checkfields javascript


function checkFields() {
missinginfo = "";
if (document.upload.nom.value == "") {
missinginfo += "\n     -  Vous devez préciser votre nom";
}
if (document.upload.prenom.value == "") {
missinginfo += "\n     -  Vous devez préciser votre prénom";
}
if ((document.upload.email.value == "") || 
(document.upload.email.value.indexOf('@') == -1) || 
(document.upload.email.value.indexOf('.') == -1)) {
missinginfo += "\n     -  Vous devez préciser votre adresse email";
}
if (document.upload.image0.value == "") {
missinginfo += "\n     -  Vous devez envoyer au moins 1 photo";
}
if (missinginfo != "") {
missinginfo ="Vous n'avez pas rempli correctement le/les champs:\n" +
missinginfo + "\n" +
"\nMerci de vérifier et de valider à nouveau !";
alert(missinginfo);
return false;
}
else return true;
}



le formulaire
<form method="post" enctype="multipart/form-data" name="upload" id="upload" action="">


le bouton submit

<input name="submit" value="Publier"  type="submit" class="noir_input"  onclick="return checkFields();" />

Modifié par pareto (23 Jul 2010 - 13:13)
Salut,

déjà il ne faut pas utiliser onclick sur l'INPUT submit mais onsubmit sur l'élément FORM : (re)lire Comment bien coder en Javascript.

Cela peut donner quelque chose comme ça :
function checkFields() { 
	var missinginfo = ""; 
	if (document.getElementById('nom').value == "") { 
		missinginfo += "\n     -  Vous devez préciser votre nom"; 
	} 
	if (document.getElementById('prenom').value == "") { 
		missinginfo += "\n     -  Vous devez préciser votre prénom"; 
	} 
	var email = document.getElementById('email').value;
	if ( (email == "") ||  ( email.indexOf('@') == -1 ) || ( email.indexOf('.') == -1) ) { 
		missinginfo += "\n     -  Vous devez préciser votre adresse email"; 
	} 
	if (document.getElementById('image0').value == "") { 
		missinginfo += "\n     -  Vous devez envoyer au moins 1 photo"; 
	} 
	if (missinginfo != "") { 
		missinginfo ="Vous n'avez pas rempli correctement le/les champs:\n" + missinginfo + "\n" + "\nMerci de vérifier et de valider à nouveau !"; 
		alert(missinginfo); 
		return false; 
	} else return true; 
}
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post" enctype="multipart/form-data" onsubmit="return checkFields();">
	<p>
		<label for="nom">Nom :</label>
		<input type="text" name="nom" id="nom" value="<?php echo htmlspecialchars($nom); ?>" />
	</p>
	<p>
		<label for="prenom">Prénom :</label>
		<input type="text" name="prenom" id="prenom" value="<?php echo htmlspecialchars($prenom); ?>" />
	</p>
	<p>
		<label for="email">Email :</label>
		<input type="text" name="email" id="email" value="<?php echo htmlspecialchars($email); ?>" />
	</p>
	<p>
		<label for="image0">Image 0 :</label>
		<input type="file" name="image[]" id="image0" />
	</p>
	<p>
		<label for="image1">Image 1 :</label>
		<input type="file" name="image[]" id="image1" />
	</p>
	<p>
		<label for="image2">Image 2 :</label>
		<input type="file" name="image[]" id="image2" />
	</p>
	<p>
		<input value="Publier"  type="submit" /> 
	</p>
</form>
Merci pour tes explications, je vais les tester.
je pense avoir réussi en php.


Ok ça marche avec ton systeme. j'ai du retirer 
<form action="echo htmlspecialchars($_SERVER['PHP_SELF'])";
pour le faire fonctionner car sinon il ne reconnait pas mon login...
Merci

C'est mieux en PHP ou JS selon toi ?
Modifié par pareto (23 Jul 2010 - 13:47)
pareto a écrit :
C'est mieux en PHP ou JS selon toi ?
La question ne se pose pas comme ça : il faut toujours faire les vérifications côté serveur en PHP et, éventuellement, on peut rajouter une surcouche JavaScript pour effectuer des contrôles au moment du submit pour éviter une requête inutile.
BON je reviens vers toi, j'ai testé sous IE8 ça marche nickel impec mais sous Firefox, Safari, Opéra et peut-etre Google Chrome (que je n'ai pas encore essayé) ça ne marche pas.

Je veux dire que si je fais PRECEDENT avec les navigateurs incriminés, je retourne bien sur mon formulaire avec les données présentes et donc la possibilité de renvoyer une nouvelle fois l'intégralité de celui-ci.

Je désespère !!! Ou alors je m'y prends mal ?

Y'a t'il une façon de faire différente pour Safari, Firefox Opéra et Chrome ?
Modifié par pareto (23 Jul 2010 - 15:14)
Sous IE et Firefox ça marche
méthode :
php

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); // always modified
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0"); // HTTP/1.1
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache"); // HTTP/1.0



html

<meta http-equiv="Pragma" CONTENT="no-cache">
<meta http-equiv="cache-control" content="no-store, no-cache, must-revalidate">



Pour opéra, safari et chrome non............
Pages :
Sujet clos
Aller à