Masquer un formulaire après validation

Bonjour à tous,

Je vais essayer d'être le plus clair possible dans mes explications. J'ai une page de produits qui se présente sous la forme de cart bootstrap (cf capture d'écran). J'aimerais que quand l'utilisateur ajoute un produit dans le panier, la cart bootstrap correspondant à ce dernier soit désactivée, afin que l'utilisateur ne puisse pas ré ajouter le même produit.

J'ai tout d'abord pensé à le faire en javascript qui semblait tout indiqué pour ce genre de chose. Mais le problème, c'est que quand j'ajoute un produit, je ne veux pas avoir dans la base de données une ligne par produit. Du coup, j'ai fais en sorte que tout les produits qu'un utilisateur ajoute aille dans la base sur la même ligne dans un tableau que je serialize.
Je récupère l'id de l'utilisateur, et jusqu’à ce qu'il valide la commande, les produits s'ajoute sur la même ligne. Hors, la fonction en js que j'avais fais, cela ne fonctionnait plus et j'avais un produit par colonne dans la base.
Il aurait fallu que je fasse un système en Ajax qui évite le rechargement de page, mais je ne maîtrise absolument pas ce langage malheureusement ..

J'utilise du Twig pour le rendu, je vous poste ce que j'ai déjà produit jusqu'alors.

  {% for row in products|batch(4) %}
            <div class="card-deck">
                {% for product in row %}
                <div class="card mb-4">
                    <img src="{{ product.image_file }}" class="card-img-top" style="max-height: 250px;" alt=""/>
                    <div class="card-body">
                        <h5 class="card-title">{{ product.name }}</h5>
                        <p class="card-text">
                            {{ product.description }}
                        </p>
                    </div>
                    <div class="card-footer text-center">
                        {{ form.start({action:generate('technicien_carts_add')}) }}
                            {{ tag.input({type:'hidden', name:'product_id', value: product.id}) }}
                            {{ tag.input({type:'number', name:'quantity', class:'d-inline w-50'}) }}
                            <button type="submit" name="disableForm" class="btn btn-primary"><i class="fas fa-cart-plus"></i></button>
                        {{ form.end() }}
                       

                    </div>
                </div>
                {% endfor %}

Merci d'avance pour votre aide, en espérant avoir été assez clair dans mes explications.

Je viens de m'apercevoir que la capture d'écran n'est pas passée dans le premier message, je vous la remet ici, en m'excusant pour le double post.


Modifié par Mithrandyll (15 Jun 2020 - 11:28)

Et l'eau,

Perso, ça me parait louche d'indiquer à l'utilisateur qu'il ne peut pas acheter plus. Bref, ça doit être un truc comme :

window.addEventListener('DOMContentLoaded', function () {
    Array.prototype.slice.call(document.querySelectorAll('.card-deck .card')).forEach(function ($card) {
        $card.querySelector('form').addEventListener('submit', function (e) {
            e.preventDefault();
            var xhr = new XMLHttpRequest(),
                data = new FormData(),
                inputs = e.currentTarget.querySelectorAll('input');

            for(var i = 0; i < inputs.length; i++){
                data.append(inputs[i].name, inputs[i].value);
            }
            xhr.open("POST", e.currentTarget.action, true);
            xhr.addEventListener('readystatechange', function (response) {
                if (this.readyState == 4 && this.status == 200) {
                    e.currentTarget.querySelector('input[name="quantity"]').disabled = true;
               }
            })
            xhr.send(data);
        });
    });
});

* code fait de tête. Il se peut qu'il y ait des erreurs.

Je t'ai écrit ça à l'ancienne. Ne sachant pas quels sont les navigateurs supportés. Sinon fetch et es6 bien sûr ^^