comment recuperer la valeur d un bouton radio

Eléphant du PHP | 474 Messages

05 janv. 2022, 13:52

bonjour a tous
je viens de récupérer un script pour ajouter un panier a mon site

celui ci fonctionne parfaitement bien
mais j aurais souhaiter changer le mode de livraison et laisser un choix a l utilisateur
mais je ne parviens pas a récupérer la valeur du bouton radio
lorsque je change le mode de livraison
j'ai toujours la valeur du bouton coche par défaut

voici le code modifie html

Code : Tout sélectionner

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="Comment créer un panier en JavaScript"> <meta name="author" content="1FORMATIK.com"> <title>Comment créer un panier en JavaScript</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> </head> <body> <div class="container bg-light rounded"> <div class="row"> <div class="col-md-12 mt-3"> <div class="row mt-3"> <div class="col-md-4"> </div> <div class="container"> <div class="row"> <div class="col-sm"> <img src="https://phil.pecheperle.be/image-perles/perle-verre-peche-gardon-2002.JPG" style ="width: 150px; height: 150px;" alt="canard"/> </div> </div> <div class="row"> <div class="col-sm"> <p>Produit 01 (8.00 €)</p> </div> </div> <div class="row"> <div class="col-sm"> <div class="col-md-4 text-end"> <a style="cursor:pointer;" data-nom="Produit 01" data-prix="8.00" data-select="01" data-checkbox="produit_001" class="btn btn-primary ajouter-panier">ajouter au panier</a> </div> </div> </div> </div> </div> <div class="row mt-3"> <div class="col-md-4"> <p>Produit 02 (15.00 €)</p> </div> <div class="col-md-2"> <select class="form-control" id="02"> <option value="XS">XS</option> <option value="S">S</option> <option value="M">M</option> <option value="L">L</option> <option value="XL">XL</option> <option value="2XL">2XL</option> <option value="3XL">3XL</option> <option value="4XL">4XL</option> </select> </div> <div class="col-md-6 text-end"> <a style="cursor:pointer;" data-nom="Produit 02" data-prix="15.00" data-select="02" class="btn btn-primary ajouter-panier">ajouter au panier</a> </div> </div> <div class="row mt-4"> <div class="col-md-4"> <p>Produit 03 (12.00 €)</p> </div> <div class="col-md-8 text-end"> <a style="cursor:pointer;" data-nom="Produit 03" data-prix="12.00" class="btn btn-primary ajouter-panier">ajouter au panier</a> </div> </div> </div> </div> <div class="row"> <div class="col-md-12 mt-3"> <h4>Votre commande</h4> </div> </div> <div class="row"> <div class="col-md-12 mt-3"> Nombre de produit(s) dans le panier : <span class="total-count"></span> <br /><br /> <table width="100%" class="show-panier" id="macommande"></table> <br /> <br /> <p>Select un mode de livraison :</p> <div> <input type="radio" id="mondial_relay_belgique" name="envois" value="2" > <label for="mondial_relay_belgique">Envois par mondial relay belgique 5 euros</label> </div> <div> <input type="radio" id="poste_belgique" name="envois" value="3" > <label for="poste_belgique">envois par poste belgique 4 euros</label> </div> <div> <input type="radio" id="mondial_relay_france" name="envois" value="4" checked="checked"> <label for="mondial_relay_france">Envois par mondial relay france 3 euros</label> </div> <div> <input type="radio" id="poste_france" name="envois" value="5"> <label for="poste_france">envois par poste france 2 euros</label> </div> <div>*Prix total: <b><span class="total-panier" id="prix_total">0.00</span> euros</b></div> <br /> <i id="livraison-detail">*Livraison incluse</i> <div class="text-end"><button class="clear-panier btn btn-danger">Vider le panier</button></div> </div> </div> <div class="row"> <div class="col-md-12 mt-3"> <h4>Adresse de livraison</h4> </div> </div> <div class="row"> <div class="col-md-12 mt-3"> <input class="form-control" type="text" name="nom" value="" id="nom" placeholder="Nom"> <br> <input class="form-control" type="text" name="prenom" value="" id="prenom" placeholder="Prénom"> <br> <input class="form-control" type="text" name="cp" value="" id="cp" placeholder="Code postal"> <br> <input class="form-control" type="text" name="ville" value="" id="ville" placeholder="Ville"> <br> <input class="form-control" type="text" name="email" value="" id="email" placeholder="e-Mail"> <br> <textarea class="form-control" id="message" placeholder="Message Optionnel"></textarea> <br> <div class="text-end"><button type="button" class="btn btn-success" id="commander">Commander</button></div> <br> <div id="qte_minimum_report"></div> </div> </div> <div class="modal" id="mymodal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Commande confirmée</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <div id="commande_report">Merci de votre commande</div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button> </div> </div> </div> </div> <div class="modal" id="mymodal_erreur" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Erreur de commande</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <div id="commande_report">Une erreur est survenue</div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <script src="panier.js"></script> <script> function commander(nom,prenom,cp,email,commande,prix_total,message,ville){ $.ajax({ url : 'mail.php', type : 'GET', data : 'nom=' + nom + '&prenom=' + prenom + '&cp=' + cp + '&email=' + email + '&commande=' + commande + '&prix_total=' + prix_total + '&message=' + message + '&ville=' + ville, dataType : 'html', success : function(reponse){ if (reponse == "1"){ MonPanier.clearpanier(); afficherpanier(); document.body.scrollTop = 0; document.documentElement.scrollTop = 0; $('#mymodal').modal('show'); } if (reponse == "0"){$('#mymodal_erreur').modal('show');} } }); } $('#commander').click( function(){ var nom = document.getElementById("nom").value; var prenom = document.getElementById("prenom").value; var cp = document.getElementById("cp").value; var ville = document.getElementById("ville").value; var email = document.getElementById("email").value; var commande = JSON.stringify(panier); var prix_total = document.getElementById("prix_total").innerHTML; var message = encodeURIComponent(document.getElementById("message").value); commander(nom,prenom,cp,email,commande,prix_total,message,ville); }); </script> </body> </html>
et le code du panier

Code : Tout sélectionner

// Mon petit panier JS // https://www.1formatik.com // 0 pour désactiver les commandes par lot // 1 pour activer la fonctionnalité de commande par lot var Qte_Minimum = 0; // Nombre de produits minimum par lot var Qte_Minimum_Valeur = 6; // 0 pour désactiver l'ajout du prix de la livraison // 1 pour activer la fonctionnalité de modification du prix total pour inclure le prix de la livraison selon un pourcentage du prix total // 2/3/4/5 pour activer la fonctionnalité de modification du prix total pour inclure le prix de la livraison selon un forfait fixe //var Livraison = document.getElementById("poste_france").value; //if (document.getElementById('r1').checked) { //rate_value = document.getElementById('r1').value; //if(document.getElementById("mondial_relay_belgique").checked) { //var Livraison = document.getElementById("mondial_relay_belgique").value; //} //else if(document.getElementById('poste_belgique').checked) { // var Livraison = document.getElementById("poste_belgique").value; //} //else if(document.getElementById('mondial_relay_france').checked) { // var Livraison = document.getElementById("mondial_relay_france").value; //} //else if(document.getElementById('poste_france').checked) { // var Livraison = document.getElementById("poste_france").value; //} var Livraison= document.querySelector('input[name="envois"]:checked').value; console.log(Livraison); //var Livraison = document.querySelector('input[name="envois"]:checked').value; // % du prix total total correspondant au prix de la livraison var Poucentage_Livraison = 25; // Forfait de la livraison en euro var Forfait_Livraison_mondial_relay_belgique = 5; // Forfait de la livraison en euro var Forfait_Livraison_poste_belgique = 4; // Forfait de la livraison en euro var Forfait_Livraison_mondial_relay_france= 3; // Forfait de la livraison en euro var Forfait_Livraison_poste_france= 2; // les messages concernant la fonctionnalité de commande par lot var txt_qte_minimum_bad = "<font color='red'>Attention les quantités ne sont pas correctes, les commandes se font par lot de " + Qte_Minimum_Valeur + " produits</font>"; var txt_qte_minimum_ok = "<font color='green'>Le nombre de produits est correcte</font>"; var txt_qte_minimum_defaut = "Les commandes se font par lot de " + Qte_Minimum_Valeur + " produits"; // ne pas modifier la suite sauf si vous désirez modifier le code var MonPanier = (function() { panier = []; function Item(nom, prix, quantite) { this.nom = nom; this.prix = prix; this.quantite = quantite; } function savepanier() { sessionStorage.setItem('MonPanier', JSON.stringify(panier)); } function loadpanier() { panier = JSON.parse(sessionStorage.getItem('MonPanier')); } if (sessionStorage.getItem("MonPanier") != null) { loadpanier(); } var obj = {}; obj.ajouter_produit_dans_panier = function(nom, prix, quantite) { for(var item in panier) { if(panier[item].nom === nom) { panier[item].quantite ++; savepanier(); return; } } var item = new Item(nom, prix, quantite); panier.push(item); savepanier(); } obj.setquantiteForItem = function(nom, quantite) { for(var i in panier) { if (panier[i].nom === nom) { panier[i].quantite = quantite; break; } } }; obj.enlever_produit_de_panier = function(nom) { for(var item in panier) { if(panier[item].nom === nom) { panier[item].quantite --; if(panier[item].quantite === 0) { panier.splice(item, 1); } break; } } savepanier(); } obj.enlever_produit_de_panier_tous = function(nom) { for(var item in panier) { if(panier[item].nom === nom) { panier.splice(item, 1); break; } } savepanier(); } obj.clearpanier = function() { panier = []; savepanier(); } obj.totalquantite = function() { var totalquantite = 0; for(var item in panier) { totalquantite += panier[item].quantite; } return totalquantite; } obj.totalpanier = function() { var totalpanier = 0; for(var item in panier) { totalpanier += panier[item].prix * panier[item].quantite; } return Number(totalpanier.toFixed(2)); } obj.listpanier = function() { var panierCopy = []; for(i in panier) { item = panier[i]; itemCopy = {}; for(p in item) { itemCopy[p] = item[p]; } itemCopy.total = Number(item.prix * item.quantite).toFixed(2); panierCopy.push(itemCopy) } return panierCopy; } return obj; })(); $('.ajouter-panier').click(function(event) { event.preventDefault(); var nom_option = ""; var prix_option = 0; var option_checkbox = $(this).data('checkbox'); if (option_checkbox != "") { var checkboxes = document.getElementsByClassName(option_checkbox); for(var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].checked == true) { var nom_option = nom_option + " (" + $(checkboxes[i]).data('nom') +")"; var prix_option = prix_option + Number($(checkboxes[i]).data('prix')); } } } if ($(this).data('select')) { var nom = $(this).data('nom') + " (" + document.getElementById(""+$(this).data('select')+"").value + ")" + nom_option; } else var nom = $(this).data('nom'); var prix = Number($(this).data('prix')) + prix_option; MonPanier.ajouter_produit_dans_panier(nom, prix, 1); afficherpanier(); }); $('.clear-panier').click(function() { MonPanier.clearpanier(); afficherpanier(); }); function afficherpanier() { var panierArray = MonPanier.listpanier(); var output = ""; for(var i in panierArray) { output += "<tr>" + "<td>" + panierArray[i].nom + "</td>" + "<td>(" + panierArray[i].prix.toFixed(2) + ")</td>" + "<td class='form-inline'><div class='input-group'><button class='btn btn-primary moins-item' data-nom='" + panierArray[i].nom + "'>-</button>" + "<input type='number' min='1' class='form-control item-quantite' data-nom='" + panierArray[i].nom + "' value='" + panierArray[i].quantite + "'>" + "<button class='btn btn-primary plus-item' data-nom='" + panierArray[i].nom + "'>+</button></div></td>" + "<td><button class='btn btn-danger effacer-item' data-nom='" + panierArray[i].nom + "'>X</button></td>" + " = " + "<td>" + panierArray[i].total + "</td>" + "</tr>"; } $('.show-panier').html(output); if (Livraison == 1) { $('.total-panier').html(((MonPanier.totalpanier()) + (MonPanier.totalpanier()/(100/Poucentage_Livraison))).toFixed(2)); document.getElementById('livraison-detail').innerHTML = "Livraison incluse: " + Poucentage_Livraison +"% du prix total."; } if (Livraison == 2) { $('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison_mondial_relay_belgique ).toFixed(2)); document.getElementById('livraison-detail').innerHTML = "Livraison incluse avec mondial relay belgique: " + Forfait_Livraison_mondial_relay_belgique +" euros."; } if (Livraison == 3) { $('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison_poste_belgique).toFixed(3)); document.getElementById('livraison-detail').innerHTML = "Livraison incluse avec la poste de belgique: " + Forfait_Livraison_poste_belgique +" euros."; } if (Livraison == 4) { $('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison_mondial_relay_france).toFixed(4)); document.getElementById('livraison-detail').innerHTML = "Livraison incluse avec mondial relay france: " + Forfait_Livraison_mondial_relay_france +" euros."; } if (Livraison == 5) { $('.total-panier').html((MonPanier.totalpanier() + Forfait_Livraison_poste_france).toFixed(5)); document.getElementById('livraison-detail').innerHTML = "Livraison incluse avec la poste francaise: " + Forfait_Livraison_poste_france +" euros."; } if (Livraison == 0) { $('.total-panier').html(((MonPanier.totalpanier())).toFixed(2)); } $('.total-panier-modal').html(MonPanier.totalpanier()); $('.total-quantite').html(MonPanier.totalquantite()); if ((Qte_Minimum == 1) && (Number.isInteger(MonPanier.totalquantite() / Qte_Minimum_Valeur) == false) && (MonPanier.totalquantite() != 0)) { document.getElementById('qte_minimum_report').innerHTML = txt_qte_minimum_bad; } else if ((Qte_Minimum == 1) && (Number.isInteger(MonPanier.totalquantite() / Qte_Minimum_Valeur) == true) && (MonPanier.totalquantite() != 0)) { document.getElementById('qte_minimum_report').innerHTML = txt_qte_minimum_ok; } else if (Qte_Minimum == 1) { document.getElementById('qte_minimum_report').innerHTML = txt_qte_minimum_defaut; } else if (Qte_Minimum == 0) { document.getElementById('qte_minimum_report').innerHTML = ""; } } $('.show-panier').on("click", ".effacer-item", function(event) { var nom = $(this).data('nom') MonPanier.enlever_produit_de_panier_tous(nom); afficherpanier(); }) $('.show-panier').on("click", ".moins-item", function(event) { var nom = $(this).data('nom') MonPanier.enlever_produit_de_panier(nom); afficherpanier(); }) $('.show-panier').on("click", ".plus-item", function(event) { var nom = $(this).data('nom') MonPanier.ajouter_produit_dans_panier(nom); afficherpanier(); }) $('.show-panier').on("change", ".item-quantite", function(event) { var nom = $(this).data('nom'); var quantite = Number($(this).val()); MonPanier.setquantiteForItem(nom, quantite); afficherpanier(); }); afficherpanier();