Forum : comment recuperer la valeur d un bouton radio

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

<!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/bootstrap@5.0.1/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/popper.js@1.16.1/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>

// 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();

comment recuperer la valeur d un bouton radio

2 réponses