Bonjour,

Après 2 heures de recherches intensives, impossible de trouver ce que je recherche.
En effet, dans mon formulaire d'upload de pièce jointe, cela peut prendre un certain temps, suivant la taille de celle-ci. Donc je veux désactiver le <button> submit, afin d'empêcher l'utilisateur de réenvoyer.

J'ai trouvé une multitude de script permettant de faire cela, à chaque fois mon bouton se vérouille bien, mais ça refresh la page. Aucune donnée n'est traitée, aucune erreur affichée, ça refresh juste la page...

Donc je désespère un petit peu, avez-vous une idée de pourquoi cela fait ça ?

Merci d'avance,

Montre ton code s'il te plait. Sur le coup, j'ai pas trop compris si tu utilise un input 'button' ou 'submit'.

Salut,
tu peux utiliser on submit:

<form id="form1" name="form1" method="post" action="" onsubmit="document.getElementById('button').disabled='diabled'">
  <label for="salut">Salut</label>
  <input type="text" name="salut" id="salut" />
  <br />
  <input type="submit" name="button" id="button" value="Envoyer" />
</form>

Par contre si tu désactive seulement le bouton, ca n'empêchera pas l'utilisateur d'appuyer sur la touche entrée.

Il vaut mieux, lors du clic sur le bouton, mettre une fonction retournant faux sur l'événement onsubmit du formulaire.

+1, mais à mon avis les utilisateurs qui ne savent pas qui savent qu'ils peuvent appuyer savent qu'il faur parfois attendre pour charger une page ( c'est mon avis, après vous en faites ce que vous voulez )

Ma remarque peut être valable dans d'autre cas, y compris pour des questions d'accessibilité ...

sebcap, tu pense à quelque chose comme sa ?

<form id="form1" name="form1" method="post" action="" onsubmit="document.getElementById('button').disabled='diabled'; document.getElementById('button').addEventListener('click',function (){return false;},true)">
  <label for="salut">Salut</label>
  <input type="file" name="salut" id="salut" />
  <br />
  <input type="submit" name="button" id="button" value="Envoyer" />
</form>

Non :

<form method="post" action="" onsubmit="this.onsubmit=function(){return false;}">

Sauf que du coup c'est pas forcément clair pour l'utilisateur. Le mieux (mais plus long) c'est un truc comme ca :

function bloquerFormulaire(form) {
    // On verrouille les éléments
    var els = form.getElementsByTagName('*');
    for(i = 0 ; i < els.length ; i++) {
        els[i].disabled = 'disabled';
    }
    
    // On ajoute un message
    var msg = document.createElement('span');
    msg.innerText = 'Envoi en cours, veuillez patienter ...';
    form.appendChild(msg);

    // On verrouille le formulaire lui même
    form.onsubmit = function() {
        return false;
    }

    // On envoie le formulaire
    return true;
}

<form method="post" action="" onsubmit="return bloquerFormulaire(this);">
    Contenu de ton formulaire ...
</form>

Bonjour,
J'ai essayé tout ceci, mais mon problème est toujours le même :(. La page se refresh, il n'y a plus de $_POST[xx], même en laissant les champs vides, ou en remplissant tout correctement, ça n'enregistre pas.

<script language="javascript">
function bloquerFormulaire(form) {
    // On verrouille les éléments
    var els = form.getElementsByTagName('*');
    for(i = 0 ; i < els.length ; i++) {
        els[i].disabled = 'disabled';
    }
    
    // On ajoute un message
    var msg = document.createElement('span');
    msg.innerText = 'Envoi en cours, veuillez patienter ...';
    form.appendChild(msg);

    // On verrouille le formulaire lui même
    form.onsubmit = function() {
        return false;
    }

    // On envoie le formulaire
    return true;
}
</script>

<form action="" method="post" enctype="multipart/form-data" onsubmit="return bloquerFormulaire(this);">
	<fieldset>
	<legend>Formulaire à remplir</legend>
		<div class="field">
			<label>Sujet :</label>
			<input type="text" name="sujet" class="medium" value="<? echo stripslashes($_POST[sujet]);?>" onkeydown="textCounter(this.form.sujet,this.form.textLen,55);" onkeyup="textCounter(this.form.sujet,this.form.textLen,55);" /> <input readonly="readonly" name="textLen" size="3" maxlength="2" value="55" type="text">
		</div>  				
		</div>
		<div class="field">
			<label>Joindre un fichier (<u>facultatif</u>) : <strong>gif, jpg, png | 2mo maxi</strong></label>
			<input type="file" name="PJTicket" /> 
		</div>
		<div class="field">
			<label>Message :</label>
			<textarea rows="7" cols="50" name="message" ><? echo stripslashes($_POST[message]);?></textarea>
		</div>
		<button type="submit" name="envoyer">Envoyer</button>
	</fieldset>
</form>

Quand je valide, votre code marche très bien, tout se vérouille, puis la page se refresh, et tout se dévéruille.

Je comprends pas, vous avez une idée ?

En tout cas merci pour toutes vos réponses, j'ai essayé chacune des soluces données et le problème est identique.

Ce que tu veux c'est que la personne ne puisse envoyer un document qu'une seule fois ?

Le script permet d'uploader une pièce jointe sur un message (comme un forum un peu).

Donc si la pièce jointe est supérieur a 1mo, ca met 30 / 50s, suivant les connexions, il faut donc que pendant ce laps de temps, le bouton de validation soit grisé, pour ne pas qu'il rappuie dessus en croyant que ça ne marche pas. Le public que je vise est purement novice, c'est le but justement :).

Donc ce code devrait suffire, mais je pense qu'on peut faire mieux comme le dit sebcap26

<form id="form1" name="form1" method="post" action="" onsubmit="document.getElementById('button').disabled='diabled'; ">
  <label for="salut">Salut</label>
  <input type="file" name="salut" id="salut" />
  <br />
  <input type="submit" name="button" id="button" value="Envoyer" />
</form>

Je viens de tester, oui ça marche techniquement le bouton se grise.

Mais toujours pareil, ça refresh la page, ça ne valide pas mon formulaire, aucune donnée n'est enregistré dans la base de données. Il n'y a même pas mon message d'avertissement disant que un champ est vide alors que j'ai testé en ne rien remplissant.

Depuis hier je fais des tests et ça revient exactement au même probleme, ce maudit refresh... Et si j'enlève le onsubmit dans le <form>, ça fonctionne très bien...

On peut avoir ton code en entier ?
Sa me parait bizarre...

Re -

C'est une page qui a l'origine fais + de 300 lignes et qui nécessite d'être inscrit etc. Donc j'ai viré le maximum que j'ai pu, toutes les requêtes bases de données, histoire de laisser que le PHP/JS/HTML concerné par le problème actuel.

On remarque bien que sans le onsubmit, l'erreur s'affiche bien si on valide en laissant tout vide. Or, avec le onsubmit, un pur refresh........

Merci d'avance ^^.

premier fichier, première ligne: $_POST[envoyer] => pas de ' !!!

C'est corrigé, d'habitude je les mets pas dans ce cas-là c'est vrai, car j'ai remarque que avec ou sans ça changeait rien..

Dans la page avec onsubmit, je l'ai corrigé à tous les $_POST, et apparament cela ne vient pas de là..

Pourquoi tu affiche quelquechose qui à été envoyé par l'utilisateur ?

Tu parles des echo $_POST[xx] dans les value des cases ? C'est au cas où il oublie de renseigner un champ, qu'il n'ai pas tout à retapper quoi.

Tout en haut, le if(empty($error)) a l'intérieur je fais un traitement qui stocke le message en bdd, la piece jointe, puis un petit header location pour aller sur une autre page.

Si tu ne parle pas de ça, je comprends pas, j'affiche rien de l'utilisatur

si si c'est de sa que je parlais.
Comment tu vérifie si sa a bien envoyé, tu peux faire une message (alert js)

Bon j'abandonne, merci quand même pour votre aide

Ca fait trop longtemps que je suis sur un si petit détail, j'ai mis une phrase disant de patienter après l'envoie, et puis voilà, s'ils le font pas tant pis pour eux ! Pour mon site ça changera rien il n'y aura pas de doublon :p.

Merci encore pour toute votre aide,

Je voulais te donner peut être qqc (mais j'avais pas mis au bon endroit )
tu peux essaier encore comme sa (j'ai corrigé 2-3 truc (avec un peu de chance )

Je n'y connais rien mais je viens plus chercher une réponse parce que ca me percute au yeux.

Voici ton code:

<form id="form1" name="form1" method="post" action="" onsubmit="document.getElementById('button').disabled='diabled'; ">
  <label for="salut">Salut</label>
  <input type="file" name="salut" id="salut" />
  <br />
  <input type="submit" name="button" id="button" value="Envoyer" />
</form>

Sur:

onsubmit="document.getElementById('button').disabled='diabled';

'diabled' me choc et je me demandais si c'est pas plutot 'disabled' ?

C'est une faute de frappa mais sa change rien car tant que disabled n'est pas null il devient indisponible