Problème lors du traitement d'un input

Fermé
Lib76 Messages postés 12 Date d'inscription dimanche 24 mars 2019 Statut Membre Dernière intervention 18 juin 2020 - 18 juin 2020 à 15:13
jordane45 Messages postés 38269 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 novembre 2024 - 18 juin 2020 à 16:46
Bonjour à tous,

Je viens vers vous car je rencontre un petit problème. Je souhaite que l’utilisateur puisse modifier la quantité d’un objet dans son panier s’il le souhaite, via un input tout simple fait avec bootstrap (cf capture d’écran). Je vous poste le code que je vais expliquer ensuite.

public function updateItem()
    {
        $cartsTable = new CartsTable();
        $cart = $cartsTable->getCart(Auth::getUserId());

        foreach ($cart as $key => $value) {
            $_POST['quantity'] = $key;
            if ($_POST['down'] != $key || $_POST['up'] != $key) {
                array_slice($cart, $_POST['quantity']);
            }
        }
        $cart = serialize($cart);

        $carts = new Carts();
        $carts
            ->setUsers_Id(Auth::getUserId())
            ->setItems($cart);

        $cartsTable->updateCart($carts);
    }


Dans un premier temps, je récupère le panier de l’utilisateur que je déserialize pour ensuite mettre en place le changement de quantité via l’input. Si la valeur est différente, je met à jour le panier après la condition. Sauf qu’il ne se passe absolument rien lors du traitement, la page se recharge, mais la quantité reste la même, je n’ai pas de messages d’erreur, j’ai l’impression que tout le code n’est pas pris en compte. Je vous met ci-dessous le formulaire

{% for item_id, item in cart %}
                        <tr>
                                <td>{{ product_name(item_id) }}</td>
                                <td>
                                    {{ form.start() }}
                                    <div class="def-number-input number-input safari_only">
                                        <button name="down" onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
                                            <i class="fa fa-minus"></i>
                                        </button>
                                        <input class="quantity" min="0" name="quantity" value="{{ item.quantity }}" type="number">
                                        <button name="up" onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
                                            <i class="fa fa-plus"></i>
                                        </button>
                                    </div>
                                    {{ form.end() }}
                                </td>
                                <td>
                                    {{ form.start({action:generate('technicien_cart_item_delete')}) }}
                                        {{ tag.input({type:'hidden', name:'product_id', value:item_id}) }}
                                        <button type="submit" class="btn btn-danger"><i class="fas fa-trash"></i></button>
                                    {{ form.end() }}
                                </td>
                        </tr>
                    {% endfor %}

Je ne sais pas vraiment d’ou peut venir le problème, car la logique me paraissait bonne. Si quelqu’un peut jeter un oeil et me dire ou est-ce que cela cloche, je lui en serait très reconnaissant ! Merci d’avance :)

2 réponses

jordane45 Messages postés 38269 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 novembre 2024 4 694
18 juin 2020 à 15:30
Bonjour;

Fais donc un var_dump de $_POST et montres nous ce qu'il contient

Il serait bien également d'avoir le code source généré de ta page ( CTRL + u dans ton navigateur lorsque tu affiches ta page)

A noter que ton input quantity est en dehors du FORM où se trouve le submit ... donc à mon avis il ne remonte pas...
Tu n'as pas non plus d'input down ou up .. donc pas de variable POST correspondant....

Je ne comprend pas non plus à quoi sert ta boucle .... (sais tu manipuler les array associatifs ? )
Ni même pourquoi tu compares la quantity à une clé de ton cart ....
La quantity.. c'est la quantité de ton article .. pas son identifiant...

Je pense que cette class ( qui utilise les sessions mais que tu pourrais réadapter à tes besoins.. ou au moins comprendre la logique...) devrait t'aider :
https://codes-sources.commentcamarche.net/source/102874-php-panier-caddi-virtuel-en-session

0
Lib76 Messages postés 12 Date d'inscription dimanche 24 mars 2019 Statut Membre Dernière intervention 18 juin 2020
Modifié le 18 juin 2020 à 15:52
Le var_dump ne passe même pas, je n'ai aucun retour, ce qui m'indique que le code entier n'est pas pris en compte.

Voici le code source de la page :

<!DOCTYPE html>
<html>

<head>
    <base href="http://stockapp2.local/">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>SB Admin 2 - Dashboard 2</title>

    <!-- Custom fonts for this template-->
    <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
    <link href="vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css">
    <link href="vendor/datatables/buttons/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css">
    <link href="vendor/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" type="text/css">

    <!-- Custom styles for this template-->
    <link href="css/sb-admin-2.min.css" rel="stylesheet" type="text/css" />
    <link href="css/style.css" rel="stylesheet" type="text/css">

</head>

<body id="page-top">

    <!-- Page Wrapper -->
    <div id="wrapper">

                    <!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">

    <!-- Sidebar - Brand -->
    <a class="sidebar-brand d-flex align-items-center justify-content-center" href="/">
        <div class="sidebar-brand-icon rotate-n-15">
            <i class="fas fa-laugh-wink"></i>
        </div>
        <div class="sidebar-brand-text mx-3">StockApp
            <sup>4</sup>
        </div>
    </a>

    <!-- Divider -->
    <hr class="sidebar-divider my-0">

    <!-- Nav Item - Dashboard -->
    <li class="nav-item active">
        <a class="nav-link" href="/">
            <i class="fas fa-fw fa-tachometer-alt"></i>
            <span>Dashboard</span>
        </a>
    </li>

        <!-- Divider -->
    <hr class="sidebar-divider">
    
<!-- Heading -->
<div class="sidebar-heading">
    Technicien
</div>

<!-- Nav Item - Stock -->

<li class="nav-item">
    <a class="nav-link" href="/technicien/stocks">
        <i class="fas fa-fw fa-chart-area"></i>
        <span>Stocks</span>
    </a>
</li>



<li class="nav-item">
    <a class="nav-link" href="/technicien/stocks/box">
        <i class="fas fa-fw fa-chart-area"></i>
        <span>Stocks box</span>
    </a>
</li>



<!-- Nav Group - Commandes -->

<li class="nav-item">
    <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseCommandes" aria-expanded="true" ara-controls="collapseCommandes">
        <i class="fas fa-fw fa-chart-area"></i>
        <span>Commandes</span>
    </a>
    <div id="collapseCommandes" class="collapse" aria-labelledby="headingCommandes" data-parent="#accordionSidebar">
        <div class="bg-white py-2 collapse-inner rounded">
                                            <h6 class="collapse-header">Gestion des commandes</h6>
                                                            <a class="collapse-item" href="/technicien/order">Commander</a>
                                                            <a class="collapse-item" href="/technicien/commandes">Liste des commandes</a>
                                    </div>
    </div>
</li>


<!-- Nav Item - Reception -->

<li class="nav-item">
    <a class="nav-link" href="/technicien/reception">
        <i class="fas fa-fw fa-chart-area"></i>
        <span>Réception</span>
    </a>
</li>




    <!-- Divider -->
    <hr class="sidebar-divider">
    
<!-- Heading -->
<div class="sidebar-heading">
    Logistique
</div>

<!-- Nav Group Items - Stocks -->
<li class="nav-item">
    <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseStocks" aria-expanded="true" ara-controls="collapseStocks">
        <i class="fas fa-fw fa-chart-area"></i>
        <span>Stocks</span>
    </a>
    <div id="collapseStocks" class="collapse" aria-labelledby="headingStocks" data-parent="#accordionSidebar">
        <div class="bg-white py-2 collapse-inner rounded">
                                            <h6 class="collapse-header">Gestion des stocks</h6>
                                                            <a class="collapse-item" href="/logistique/stocks">Niveau de stock</a>
                                                            <a class="collapse-item" href="/logistique/movements/in">Entrées de stock</a>
                                                            <a class="collapse-item" href="/logistique/movements/out">Sorties de stock</a>
                                                            <a class="collapse-item" href="/logistique/stocks/mouvement">Mouvements de stock</a>
                                                            <a class="collapse-item" href="/logistique/stocks/sdr">Seuil de réaprovisionnement</a>
                                    </div>
    </div>
</li>


<!-- Nav Item - Produits -->

<li class="nav-item">
    <a class="nav-link" href="/logistique/produits">
        <i class="fas fa-fw fa-chart-area"></i>
        <span>Produits</span>
    </a>
</li>



<!-- Nav Item - Catégories -->

<li class="nav-item">
    <a class="nav-link" href="/logistique/categories">
        <i class="fas fa-fw fa-chart-area"></i>
        <span>Catégories</span>
    </a>
</li>



<!-- Nav Item - Stockages -->

<li class="nav-item">
    <a class="nav-link" href="/logistique/stockages">
        <i class="fas fa-fw fa-chart-area"></i>
        <span>Stockages</span>
    </a>
</li>





    <!-- Divider -->
    <hr class="sidebar-divider">
    
<!-- Heading -->
<div class="sidebar-heading">
    Administration
</div>

<!-- Nav Item - Users -->

<li class="nav-item">
    <a class="nav-link" href="/admin/users">
        <i class="fas fa-fw fa-chart-area"></i>
        <span>Utilisateurs</span>
    </a>
</li>




    <!-- Divider -->
    <hr class="sidebar-divider d-none d-md-block">

    <!-- Sidebar Toggler (Sidebar) -->
    <div class="text-center d-none d-md-inline">
        <button class="rounded-circle border-0" id="sidebarToggle"></button>
    </div>

</ul>
<!-- End of Sidebar -->
        
        <!-- Content Wrapper -->
        <div id="content-wrapper" class="d-flex flex-column">

            <!-- Main Content -->
            <div id="content">

                                    <!-- Topbar -->
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

    <!-- Sidebar Toggle (Topbar) -->
    <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
        <i class="fa fa-bars"></i>
    </button>

    <!-- Topbar Search -->
    <form
        class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
        <div class="input-group">
            <input type="text" class="form-control bg-light border-0 small" placeholder="Search for..."
                aria-label="Search" aria-describedby="basic-addon2">
            <div class="input-group-append">
                <button class="btn btn-primary" type="button">
                    <i class="fas fa-search fa-sm"></i>
                </button>
            </div>
        </div>
    </form>

    <!-- Topbar Navbar -->
    <ul class="navbar-nav ml-auto">

        <!-- Nav Item - Search Dropdown (Visible Only XS) -->
        <li class="nav-item dropdown no-arrow d-sm-none">
            <a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button"
                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-search fa-fw"></i>
            </a>
            <!-- Dropdown - Messages -->
            <div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in"
                aria-labelledby="searchDropdown">
                <form class="form-inline mr-auto w-100 navbar-search">
                    <div class="input-group">
                        <input type="text" class="form-control bg-light border-0 small"
                            placeholder="Search for..." aria-label="Search"
                            aria-describedby="basic-addon2">
                        <div class="input-group-append">
                            <button class="btn btn-primary" type="button">
                                <i class="fas fa-search fa-sm"></i>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </li>

        <!-- Nav Item - Alerts -->
        <li class="nav-item dropdown no-arrow mx-1">
            <a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button"
                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-bell fa-fw"></i>
                <!-- Counter - Alerts -->
                <span class="badge badge-danger badge-counter">3+</span>
            </a>
            <!-- Dropdown - Alerts -->
            <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in"
                aria-labelledby="alertsDropdown">
                <h6 class="dropdown-header">
                    Alerts Center
                </h6>
                <a class="dropdown-item d-flex align-items-center" href="#">
                    <div class="mr-3">
                        <div class="icon-circle bg-primary">
                            <i class="fas fa-file-alt text-white"></i>
                        </div>
                    </div>
                    <div>
                        <div class="small text-gray-500">December 12, 2019</div>
                        <span class="font-weight-bold">A new monthly report is ready to download!</span>
                    </div>
                </a>
                <a class="dropdown-item d-flex align-items-center" href="#">
                    <div class="mr-3">
                        <div class="icon-circle bg-success">
                            <i class="fas fa-donate text-white"></i>
                        </div>
                    </div>
                    <div>
                        <div class="small text-gray-500">December 7, 2019</div>
                        $290.29 has been deposited into your account!
                    </div>
                </a>
                <a class="dropdown-item d-flex align-items-center" href="#">
                    <div class="mr-3">
                        <div class="icon-circle bg-warning">
                            <i class="fas fa-exclamation-triangle text-white"></i>
                        </div>
                    </div>
                    <div>
                        <div class="small text-gray-500">December 2, 2019</div>
                        Spending Alert: We've noticed unusually high spending for your account.
                    </div>
                </a>
                <a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>
            </div>
        </li>

        <!-- Nav Item - Messages -->
        <li class="nav-item dropdown no-arrow mx-1">
            <a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button"
                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-envelope fa-fw"></i>
                <!-- Counter - Messages -->
                <span class="badge badge-danger badge-counter">7</span>
            </a>
            <!-- Dropdown - Messages -->
            <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in"
                aria-labelledby="messagesDropdown">
                <h6 class="dropdown-header">
                    Message Center
                </h6>
                <a class="dropdown-item d-flex align-items-center" href="#">
                    <div class="dropdown-list-image mr-3">
                        <img class="rounded-circle" src="https://source.unsplash.com/fn_BT9fwg_E/60x60"
                            alt="">
                        <div class="status-indicator bg-success"></div>
                    </div>
                    <div class="font-weight-bold">
                        <div class="text-truncate">Hi there! I am wondering if you can help me with a
                            problem I've been having.</div>
                        <div class="small text-gray-500">Emily Fowler · 58m</div>
                    </div>
                </a>
                <a class="dropdown-item d-flex align-items-center" href="#">
                    <div class="dropdown-list-image mr-3">
                        <img class="rounded-circle" src="https://source.unsplash.com/AU4VPcFN4LE/60x60"
                            alt="">
                        <div class="status-indicator"></div>
                    </div>
                    <div>
                        <div class="text-truncate">I have the photos that you ordered last month, how
                            would you like them sent to you?</div>
                        <div class="small text-gray-500">Jae Chun · 1d</div>
                    </div>
                </a>
                <a class="dropdown-item d-flex align-items-center" href="#">
                    <div class="dropdown-list-image mr-3">
                        <img class="rounded-circle" src="https://source.unsplash.com/CS2uCrpNzJY/60x60"
                            alt="">
                        <div class="status-indicator bg-warning"></div>
                    </div>
                    <div>
                        <div class="text-truncate">Last month's report looks great, I am very happy with
                            the progress so far, keep up the good work!</div>
                        <div class="small text-gray-500">Morgan Alvarez · 2d</div>
                    </div>
                </a>
                <a class="dropdown-item d-flex align-items-center" href="#">
                    <div class="dropdown-list-image mr-3">
                        <img class="rounded-circle" src="https://source.unsplash.com/Mv9hjnEUHR4/60x60"
                            alt="">
                        <div class="status-indicator bg-success"></div>
                    </div>
                    <div>
                        <div class="text-truncate">Am I a good boy? The reason I ask is because someone
                            told me that people say this to all dogs, even if they aren't good...</div>
                        <div class="small text-gray-500">Chicken the Dog · 2w</div>
                    </div>
                </a>
                <a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
            </div>
        </li>

        <!-- Nav Item - Messages -->
        <li class="nav-item no-arrow mx-1">
            <a class="nav-link" href="/technicien/panier" role="button">
                <i class="fas fa-shopping-cart"></i>
                <!-- Counter - Produits dans le panier -->
                <span class="badge badge-danger badge-counter">1</span>
            </a>
        </li>

        <div class="topbar-divider d-none d-sm-block"></div>

        <!-- Nav Item - User Information -->
        <li class="nav-item dropdown no-arrow">
            <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="mr-2 d-none d-lg-inline text-gray-600 small">John Doe</span>
                <img class="img-profile rounded-circle" src="https://source.unsplash.com/QAB-WJcbgJk/60x60">
            </a>
            <!-- Dropdown - User Information -->
            <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
                aria-labelledby="userDropdown">
                <a class="dropdown-item" href="/users/profile">
                    <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
                    Profile
                </a>
                <a class="dropdown-item" href="#">
                    <i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
                    Settings
                </a>
                <a class="dropdown-item" href="/users/activitylog">
                    <i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
                    Journal d'activité
                </a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="/logout">
                    <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                    Se déconnecter
                </a>
            </div>
        </li>

    </ul>

</nav>
<!-- End of Topbar -->
                
                <!-- Begin Page Content -->
                <div class="container-fluid">

                    

                    <!-- Page Heading -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="d-sm-flex align-items-center justify-content-between mb-4">
                                <h1 class="h3 mb-2 text-gray-800 float-left">    <a href="/technicien/order" class="text-secondary">
        <i class="fas fa-arrow-circle-left"></i></a> Liste de vos commandes (0)
</h1>
                                                            </div>
                        </div>
                    </div>

                    
    <div class="card-subtitle">
        <div class="form-group row">
            <label for="inputEmail3" class="col-md-3 col-xl-2 col-form-label">1 commande passée</label>
            <div class="col-md-4 col-xl-3">
                <select id="date" class="form-control">
                    <option >dans le mois en cours</option>
                    <option> dans les 6 derniers mois</option>
                    <option> en 2020</option>
                </select>
            </div>
        </div>
    </div>

    <div class="card shadow mb-4">
        <div class="card-body">
            <div class="table-responsive">
                <table id="table" class="table table-hover">
                    <thead>
                    <tr>
                        <th>Date de la commande</th>
                        <th>Numéro de la commande</th>
                        <th>Statut de la commande</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>25/05/2020</td>
                        <td>25052020122745</td>
                        <td>En cours de traitement</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

                </div>
                <!-- /.container-fluid -->
            </div>
            <!-- End of Main Content -->

            <!-- Footer -->
            <footer class="sticky-footer bg-white">
                <div class="container my-auto">
                    <div class="copyright text-center my-auto">
                        <span>Copyright © StockApp 2020</span>
                    </div>
                </div>
            </footer>
            <!-- End of Footer -->

        </div>
        <!-- End of Content Wrapper -->

    </div>
    <!-- End of Page Wrapper -->

        <a class="scroll-to-top rounded" href="#page-top">
        <i class="fas fa-angle-up"></i>
    </a>


        <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

        <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

        <script>
        window.setTimeout(function() {
            $(".alert").fadeTo(500, 0).slideUp(500, function(){
                $(this).remove();
            });
        }, 2000);
    </script>

    
    
        <script src="js/sb-admin-2.min.js"></script>

</body>
</html>


EDIT : Ajout du LANGAGE dans les balises de code (jordane)

Les opérateur + et - font office de submit, que je récupère ensuite dans mon traitement. Pour les tableaux associatifs, j'ai appris justement dans l'optique de réaliser cet exercice, mais il est vrai que je ne suis pas complètement à l'aise avec, la doc m'aide beaucoup.

Pour la boucle, je parcours le panier, j'indique que $key récupère la quantité du produit, que je compare avec la quantité initiale pour ensuite la mettre à jour.

Merci pour l'exemple envoyé, je vais étudier ça, je pense que cela va m'aider en effet !
0
jordane45 Messages postés 38269 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 novembre 2024 4 694
18 juin 2020 à 15:53
Je ne sais pas quel code tu nous as donné... mais je n'y retrouve pas tes bouton up et down ...

PS: Précise, dans les balises de code, que c'est le langage HTML afin que l'on ait la coloration syntaxique ( j'ai corrigé ton précédent message )
0
Lib76 Messages postés 12 Date d'inscription dimanche 24 mars 2019 Statut Membre Dernière intervention 18 juin 2020 > jordane45 Messages postés 38269 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 novembre 2024
18 juin 2020 à 16:05
Effectivement, les boutons up et down n'apparaissent pas ... Pourtant ils sont bien présent dans mon code :

<div class="def-number-input number-input safari_only">
                                        <button name="down" type="submit" onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
                                            <i class="fa fa-minus"></i>
                                        </button>
                                        <input class="quantity" min="0" name="quantity" value="{{ item.quantity }}" type="number">
                                        <button name="up" type="submit" onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
                                            <i class="fa fa-plus"></i>
                                        </button>
                                    </div>


Pardon, j'ai fais une erreur dans le sélection de la balise pour poster le code.
0
jordane45 Messages postés 38269 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 novembre 2024 4 694 > Lib76 Messages postés 12 Date d'inscription dimanche 24 mars 2019 Statut Membre Dernière intervention 18 juin 2020
18 juin 2020 à 16:46
Le code que tu viens de nous poster est celui issu de ton twig ... pas le code généré de ta page web....

Il faut que tu nous postes le code généré ( CTRL + u ) de ta page lorsque tu l'affiches ( et que tu as bien tes boutons up et down présents.... )
0