Bouton d'envoi en dehors du formulaire

Question

J'ai une page de paiement qui est conçue comme ceci :

<!-- Checkout Info Section >
    <form>
        <!-- Address Info >
        <!-- Shipping Option >
        <!-- Payment Info >
        <!-- Totals >
        <!-- Place Order Button >
    </form>

<!-- Order Summary Section >
    <!-- Cart Item>
        <form>
            <!-- Id >
            <!-- Quantity >
        </form>

    <!-- Cart Item>
        <form>
            <!-- Id >
            <!-- Quantity >
        </form>

    etc.

Si la quantité d'un article du panier est modifiée, la quantité de cet article est mise à jour via AJAX.

Mon problème est que je voudrais que le bouton Passer la commande figure en bas de la page, sous la section Résumé de la commande. Cependant, le bouton Passer la commande doit se trouver à l'intérieur du formulaire d'information sur le paiement pour faire office de bouton d'envoi.

J'ai quelques options :

1. Je peux modifier l'ordre de la page de manière à ce que la section Résumé de la commande se trouve en haut et la section Informations de paiement en bas. C'est le moyen le plus simple d'obtenir le bouton "Passer la commande" en bas de la page, mais je n'aime pas l'aspect que cela donne.

2. Je peux faire en sorte que le bouton Passer la commande position: fixed de sorte qu'il reste toujours collé au bas de la page. Cependant, cela encombre l'écran des téléphones mobiles et est un peu déroutant car il s'affiche à tout moment, avant même que le client ait rempli les informations nécessaires à la commande.

3. Je peux créer un bouton factice en bas de la page qui n'est contenu dans aucun formulaire. Je peux ensuite utiliser Javascript pour écouter les clics sur ce bouton. Lorsqu'il est cliqué, il peut cliquer sur le bouton Passer la commande qui se trouve toujours dans le formulaire. Ce bouton, qui se trouve toujours à l'intérieur du formulaire, peut être masqué de sorte qu'un seul bouton "Passer commande" soit présent sur la page à un moment donné.

L'option 3 me semble la meilleure visuellement. Cependant, je m'inquiète de la fiabilité de cette solution. Si Javascript n'est pas activé ou si quelque chose empêche le déclenchement de l'événement de clic, le client peut ne pas être en mesure de passer sa commande. Est-ce une préoccupation valable ?

Quelqu'un a-t-il d'autres suggestions pour réaliser cette configuration avec le bouton Passer commande en bas de la page ?

Answer 1

Vous pouvez utiliser n'importe quel bouton pour soumettre le formulaire de votre choix.

<button onclick="document.myFormName.submit()">Checkout</button>

Ou en jQuery...

$('button#my-button').on('click', function() {
    $('form#checkout').trigger('submit');
});

Answer 2

Quelle quantité de contenu se trouve réellement sous le formulaire ? Est-il possible d'avoir une seule grande balise de formulaire qui englobe les différentes sections de la commande, ainsi que le bouton de paiement ?

Sinon, pouvez-vous essayer position:absolute pour positionner le bouton sous le pli en bas de la page, par opposition à position : fixed. De cette façon, il sera toujours en bas de la page et ne défilera pas avec elle.