Plusieurs boutons « submit » dans un formulaire

Dans quel cas aurions-nous besoin d’envoyer un formulaire via deux boutons « submit » différents ?

L’exemple typique est de définir une action « prévisualiser » et une action « envoyer » dans un formulaire de message d’un forum (ou un commentaire, etc.).

En effet, il est utile pour l’utilisateur de pouvoir prévisualiser son message avant de l’envoyer aux yeux de son public ce qui lui permet de voir le rendu de son message après traitement (BBcode, mot banni, etc.).

Il y a deux solutions, l’une utilisant JavaScript, l’autre en pur HTML. Par principe, nous préfèrerons utiliser la seconde solution, bien évidemment 😉

Structure HTML

<form action="/traiter-message.php" method="post">
    <fieldset>
        <p>
            <label>Votre message :</label>
            <textarea name="message"></textarea>
        <p>
        <p>
            <input type="submit" name="previsualiser" value="Previsualiser" />
            <input type="submit" name="envoyer" value="Envoyer" />
        </p>
    </fieldset>
</form>

La différence par rapport aux formulaires habituellement créés est le fait de donner un nom aux boutons via l’attribut « name ».

Traitement du formulaire avec PHP

Notre structure HTML étant prête, nous allons contrôler sur quel bouton l’utilisateur a cliqué.

Comme vous le savez, les données du formulaire sont envoyées et stockées dans une variable globale qui peut soit être « $_GET » soit être « $_POST ». Dans notre exemple, ce sera « $_POST ».

En théorie, nous aurions, pour notre formulaire, les valeurs définies comme suit :

$_POST = array(
    'message' => 'contenu de la zone de texte',
    'previsualiser' => 'Previsualiser',
    'envoyer' => 'Envoyer'
);

En réalité, nous n’aurons pas ces trois valeurs. En effet, lorsque vous cliquez sur un des deux boutons, seul la valeur du bouton cliqué est envoyée, le second bouton étant ignoré.

Voici les deux cas selon si l’on clique sur « Envoyer » ou sur « Prévisualiser » :

// j'ai cliqué sur « Envoyer »
$_POST = array(
    'message' => 'contenu de la zone de texte',
    'envoyer' => 'Envoyer'
);

// j'ai cliqué sur « Prévisualiser »
$_POST = array(
    'message' => 'contenu de la zone de texte',
    'previsualiser' => 'Previsualiser'
);

Conclusion

Pour terminer, voici comment contrôler le bouton cliqué :

if (isset($_POST['previsualiser'])) {

    // j'ai cliqué sur « Prévisualiser »

} elseif (isset($_POST['envoyer'])) {

    // j'ai cliqué sur « Prévisualiser »

} else {

    // comment t'es venu sur cette page ?

}

C’est donc extrêmement simple, et pas besoin de faire appel à du JavaScript pour si peu.

Précaution

Un formulaire peut-être envoyé par bien des façons (ex : JS ou envoi en étant dans un champ texte). Donc, sans cliquer sur un des boutons. Que se passe t-il, dans ce cas, au niveau des valeurs de « $_POST » ? Voici quelques indications :

  • Si le formulaire est envoyé sans cliquer sur un bouton, sur Chromium et Firefox, c’est le premier bouton qui est pris comme valeur. Sur Internet Explorer, aucune valeur n’est envoyée (on tombe dans le « else »).
  • Par contre, si on place le focus sur un des boutons, c’est bien sa valeur qui est envoyée lors de l’appui sur « Entrée ».
  • Sur IE (testé sur la 8), quand on place le focus sur le champ texte, le premier bouton change d’apparence, indiquant donc l’action provoquée lors de l’envoi du formulaire sans cliquer sur les boutons. Le problème, c’est que l’action n’est pas transmise, ce qui rend une fonctionnalité intéressante complètement inutile … (comme d’habitude avec IE)

Pour bien faire, il faudrait placer le bouton de l’action par défaut que vous souhaitez avoir en première position (vous pouvez si besoin inverser les positions en utilisant la propriété « float » du CSS). Pour IE, si aucune valeur n’est transmise, vous définissez alors votre action par défaut.

19 réflexions sur « Plusieurs boutons « submit » dans un formulaire »

  1. Dans le cas où l’utilisateur soumet le formulaire via son clavier ? Il est dans un champ et valide le formulaire entre appuyant sur la touche entré de son clavier ?

    Quel valeur retrouve-t-on dans le post ?

  2. Bonjour,

    L’inconvénient, de plusieurs submit pour 1 formulaire, c’est quand l’utilisateur appuie sur la touche entrée, et que le focus est encore dans le champ de saisie (et donc sur aucun des boutons) quel bouton sera pris en compte?

  3. Pour répondre à vos questions, il y a effectivement quelques cas particuliers.

    En bref :

    • Si le formulaire est envoyé sans cliquer sur un bouton, sur Chromium et Firefox, c’est le premier bouton qui est envoyé. Sur Internet Explorer, aucune valeur n’est envoyée (on tombe dans le « else »).
    • Par contre, si on place le focus sur un des boutons, c’est bien sa valeur qui est envoyée lors de l’appui sur « Entrée ».
    • Sur IE (testé sur la 8), quand on place le focus sur le champ texte, le premier bouton change d’apparence, indiquant donc l’action provoquée lors de l’envoi du formulaire sans cliquer sur les boutons.

    Je vais mettre à jour l’article.

  4. salut !
    mon problem est que je veux mettre des icones à la place des boutons d’envoie alore je remplace le type « submit » par type « image » ms le _POST ne récupere pas les valeur cliquées !!!sachant que qu’on je mets le type « submit » ca marche!! est ce y’en a une solution?? voilà mon code dans le formulaire:
    ‘;
    ‘;
    ‘;
    ‘;

  5. oups le code ne veut pas apparaitre dans le commentaire
    mais bon dans le type de input au lieu de mettre type=submit j’ai mis type=image et puis src= »imagea.png » par exemple pour que mes bouton soient des icones !!
    aidez moi SVP!!!
    et merci d’avance

  6. Bonjour,

    Pour le code dans les commentaire, ce n’est pas grave, j’ai compris.

    Je ne sais pas si c’est possible avec les boutons de type image. Par contre, tu peux styler le bouton submit pour faire comme si c’était une image. Tu appliques ces styles : padding: 0; text-indent: 1000px; overflow: hidden; border: none; et le ton image en background en prenant soin de fixer une largeur et une hauteur correspondant à ton image.

  7. en fait ça marche bien mais j’aimerai bien que les images soient cliquables pour que l’utilisateur distingue que y’en a une action qui va s’éffectuer lors du clique j essayé de mettre le input entre balise mais ca marche pas!!!
    autres idées SVP

  8. salut ! c’est encore moi 😀
    bon j’ai rencontré un autre probleme c’est que dans un ifelse ,c’est à dire entre les accolades d’une de mes ifelse dont j’ai mis la condition concernant le submit renvoyé apres le clique, j’ai un formulaire qui doit envoyé des champs d’inscription pour être affichée comme resultat au même page php!! et là qaund je clique pour l’envoyé, le resultat de ma premiere condition if du premier submit qui se traite et non pas celui de ifelse où se trouve mon formulaire !! j’ai essayé le onClick dont j’ai mis un include qui m’envoie à la page de traitement mais j’en veux pas que mon formulaire disparaitre alors c’est pour ça que je dois envoyé au même page php !!!! mais voilà mon probleme des suggestions SVPPPP
    et merci d’avance

  9. Salut salut!
    Voila mon problème: j’ai deux boutons submit et plusieurs input text à remplir. Le truc c’est que la touche entrée agit toujours comme si je cliquais sur le premier bouton et j’aimerais qu’elle agisse comme si je cliquais sur le deuxième, en fonction de l’input sur laquelle se trouve le focus. Est-ce possible?

  10. Bonjour !
    Comment peut-on faire lorsque les deux submits n’ont pas leur php dans la même page ? J’explique : j’ai une page de signup avec dedans un submit pour uploader un avatar, mais le traitement uploader agit sur une page indépendante du submit du formulaire total. (je ne sais pas si c’est très clair)
    D’avance merci…

Répondre à Smahane Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Notifiez-moi des commentaires à venir via email. Vous pouvez aussi vous abonner sans commenter.