[résolu] Contourner une requête POST en Javascript ?

Bonjour,
Sur un site que je développe, j'ai le fonctionnement suivant pour un upload de fichiers :
- un bouton "Sélectionner un fichier" (input de type submit)
- lorsqu'on clique dessus (envoi en POST), le site réaffiche la page en intégrant un champ de sélection (input type file) et deux boutons Valider/Annuler
- on sélectionne ensuite un fichier puis en valide ou on annule pour revenir à la page d'origine avec le bouton "Sélectionner un fichier"
C'est actuellement géré en PHP. Le but étant de simuler une boîte de dialogue pour sélectionner un fichier au besoin plutôt que de coller des inputs de type file énorme partout dans ma page.

Pour éviter de recharger la page à chaque fois que je veux afficher la boîte de dialogue, je voudrais rajouter un bout de JavaScript (j'utilise jQuery) qui s'occupe d'intégrer son code à la volée dans la page lorsqu'on clique sur le bouton "Sélectionner un fichier".

Le problème, c'est que lorsque je clique sur le bouton, ma fonction JS est bien exécutée, mais le submit d'origine aussi et je me retrouve avec un rechargement de page. En revanche, si dans la fonction JS je détruis le bouton avec un $(this).remove(), j'ai remarqué qu'il est supprimé avant que la requête POST soit envoyée et ma boîte de dialogue est bien affichée par JS sans rechargement de page. Sauf que je n'ai plus mon bouton, évidemment.

Comment contourner ce problème ? Faire en sorte dans ma fonction JS que la requête POST du bouton ne soit pas envoyée au serveur sans pour autant détruire le bouton en question ?
Modifié par terzag (12 Mar 2010 - 18:49)

Salut,

tu pourrais faire un return false; mais ça n'est pas génial.

une suggestion :

$(function() {
	$("#select_fichier").click(function(){
		$("#select_fichier").hide();
		$("#affich_fichier").show();
		return false;
	});
	$("#Annul").click(function(){  
		$("#affich_fichier").hide();
		$("#select_fichier").show();
		return false;
	});
}); 

<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post" enctype="multipart/form-data">
	<p>
		<input type="submit" id="select_fichier" value="Sélectionner un fichier" />
	</p>
	<p id="affich_fichier" style="display:none;">
		<input type="file" name="fichier" /> <input type="submit" value="Envoyer" /> <input type="submit" id="Annul" value="Annuler" />
	</p>
</form>

Modifié par Heyoan (12 Mar 2010 - 17:29)

Je suis pas sûr d'avoir tout compris mais un simple "return false;" ne suffirait pas ?

[EDIT] grilled. :o
Modifié par Skoua (12 Mar 2010 - 17:29)

Le hide/show ne marche pas (il me fait toujours la requête).

En revanche, le return false marche.

Mais je ne comprends pas bien le principe : en renvoyant false avec la fonction, le navigateur arrête net le traitement du bouton ?