Comment passer une variable de php vers javascript

bonjour,

La complexité de ton code t'empêche de comprendre ce qu'il fait en réalité.  Si tu veux comprendre le principe, laisse de côté ton code complexe, et crée un petit code simple, exemple: https://www.delftstack.com/fr/howto/javascript/get-html-form-value/

je suis parvenu a faire passer de html vers javascript et récupérer value et name sur le html

avec ce code en html

<div class="container">
  <div class="row " style="background: #ECE9E7;margin-bottom:10px;border-color: #000;border-style : solid;border-width : 5px;">
    <div class="col-sm ">
      <input type="radio" name="testphil" class="testphil" data-nom="essai1" data-lang="be" value="3"> essai1
    </div>
  </div>
</div>
<span style="color:#f50813;" id="azerty"></span>
<span style="color:#f50813;" id="azerty111"></span>

en javascript dans la page panier.js

je traite cela de cette manière

$('.testphil').click(function() {
	const cases = document.querySelectorAll('input[name="testphil"]');
	for (const x of cases) {
		if (x.checked) {
		afficherpanier();
	}}
});

 et ce code

		const essai = document.querySelectorAll('input[name="testphil"]');
		for (const x of essai) {
			if (x.checked) {
				let test = x.dataset.nom;
				let test2 = x.value;
				
document.getElementById('azerty').innerHTML =test2;
document.getElementById('azerty111').innerHTML =test;

			}
		}

Mais comment réaliser cela avec un formulaire dans lequel l'utilisateur entre une donnée qui sera récupérée sur la page panier.js sans rafraichir index.html

avec ce code par exemple

	<form action="" method="post">
			<TR><TD>test</TD><TD><INPUT Type="Text" name="testphil" class="testphil" value="5" ID="test"></INPUT></TD></TR>
					<input type="submit" value="Envoyer" />
		</form>

bonjour

Merci pour la réponse

je vais voir cela

Merci pour la patience et l'aide

en fait javascript va se servir de l'id du fichier en html pour lui donner une valeur 

Comme cet exemple

document.getElementById("prix_depart").innerHTML  = prix_choix_livraison;  

il retournera au fichier html grâce a l id prix_depart la variable  prix_choix_livraison

Mais cette variable a été récupérée grâce a un bouton radio en html

	const cases = document.querySelectorAll('input[name="choix_livraison"]');
		for (const x of cases) {
			if (x.checked) {
				let nom_choix_livraison = x.dataset.nom;
				let prix_choix_livraison = x.value;

Merci pour cette explication mais le code 1 et 2 sont semblables(peut être 

Voici comme se déroule le fonctionnement de mon formulaire

La première étape je rentre des articles dans mon panier a chaque exécution du bouton d'un article en html

il y a un objet article qui s'ajoute au précèdent ou qui est effacer ect...grâce au code javascript qui le matérialise pour le traiter 

Ensuite il y a le traitement  du choix de la livraison 

Lorsque un utilisateur clic sur un des boutons radio l y a un évènement qui est déclencher en javascript 

Qui récupère le data nom et le value afin de pouvoir créer 2 nouvelles variables  

qui serviront aux différentes actions exécutées en javascript et affichée sur la page html

Suivront par la suite le remplissage des coordonnées de l'utilisateur 

Une fois que tout est ok 

On appuie sur le bouton commander 

qui de par son action va récupérer toutes les variables en php que cela soit au niveaux des articles 

du moyen de livraison

des coordonnées postal

de mondial relay

et passer toutes ces variables dans la page Mail.php qui seront traitées afin de pouvoir être insérée dans la base de donnée et envoyer par mail 

Alors non le code de livraison ne s'exécute pas quand on clic sur le bouton du formulaire mais bien lorsque on choisit un mode de livraison 

Donc lors du choix du moyen de livraison par un utilisateur 

ce mécanisme se mets en fonctionnement dans la page panier.js

		const cases = document.querySelectorAll('input[name="choix_livraison"]');
		for (const x of cases) {
			if (x.checked) {
				let nom_choix_livraison = x.dataset.nom;
				let prix_choix_livraison = x.value;
				let prix_et_livraison = (( (MonPanier.totalpanier()))) + Number(prix_choix_livraison)  ;
				//let test= ((( (MonPanier.totalpanier()))) + Number(prix_choix_livraison) ).toFixed(2);
let test= MonPanier.totalpanier();
document.getElementById('amount').value = prix_et_livraison ;

$('.total-panier').html(prix_et_livraison.toFixed(decimal));
document.getElementById('livraison-detail').innerHTML ="(" + nom_choix_livraison + ")" + prix_choix_livraison + " euro(s)";
document.getElementById('modal_erreur').innerHTML =nom_choix_livraison ;
document.getElementById('modal_erreur_mondial').innerHTML =nom_choix_livraison ;
document.getElementById('nouveau_prix_total_haut').innerHTML =((( (MonPanier.totalpanier()))) ) .toFixed(2) ;
document.getElementById("prix_depart_haut").innerHTML  = MonPanier.totalpanier(); 
document.getElementById("prix_depart").innerHTML  = MonPanier.totalpanier(); 
break;
			}
		}

avec ce morceau de code en plus sur la page panier.js

$('.choix_livraison').click(function() {
	const cases = document.querySelectorAll('input[name="choix_livraison"]');
	for (const x of cases) {
		if (x.checked) {
		afficherpanier();
	}}
});

j'ai réalisé un petit morceau de code que j'ai inséré pour bien comprendre comment tout cela était géré

en réalisant ceci dans la page panier.js

Encore une fois je voulais être sur de bien comprendre le fonctionnement entre html et javascript

$('.testphil').click(function() {
	const cases = document.querySelectorAll('input[name="testphil"]');
	for (const x of cases) {
		if (x.checked) {
		afficherpanier();
	}}
});

et  ceci toujours dans la page panier.js

		const essai = document.querySelectorAll('input[name="testphil"]');
		for (const x of essai) {
			if (x.checked) {
				let test = x.dataset.nom;
				let test2 = x.value;
				
document.getElementById('azerty').innerHTML =test2;
document.getElementById('azerty111').innerHTML =test;

			}
		}

en html j'ai inséré ce code 

<div class="container">
  <div class="row " style="background: #ECE9E7;margin-bottom:10px;border-color: #000;border-style : solid;border-width : 5px;">
    <div class="col-sm ">
      <input type="radio" name="testphil" class="testphil" data-nom="essai1" data-lang="be" value="3"> essai1
    </div>
  </div>
</div>
<span style="color:#f50813;" id="azerty"></span>
<span style="color:#f50813;" id="azerty111"></span>

donc cela fonctionne parfaitement 

Mais ce n'est pas ce que je désire

Je désire  que l'utilisateur puisse avoir un champs a remplir avec un bouton et que lors de l'actionnement du bouton sur la page html

une variable puisse être crée sur la page javscript sans recharger le html et qu'ensuite cette variable puisse être utilisée

pour effectuer des calculs 

je pense avoir trouve ce que je cherchais

voici la page php

<form class="form">
<label>Entre ton nom</label>
<input type="text" id="nom" name="Nom" placeholder="Nom" value="" class="form-control">
<input type="button" name="Envoyer" class="btn btn-default" value="Envoyer" onclick="myFunction();">
</form>
 <script src="""></script>
   <p style ="  font-size: 45px;"id="deux"></p>

et voici la page de test-envois.js

function myFunction(){
  var x = document.getElementById("nom").value;
  //document.getElementById("demo").innerHTML =x ;
affichepanier(x);
 
}

function affichepanier(val)
{
  var variableOfFunction1 = val;
  document.getElementById("deux").innerHTML ="<div class='col' style='text-align:right;background-color: #78b8df;'> " + variableOfFunction1 + " euro(s)</div>"
 }

cela semble fonctionner aussi

<!DOCTYPE html> 
<html> 
  <body> 
    <h4> 
      Change the text of the text field  
      ,and then click the button. 
  </h4> 
  <label for="domTextElement">Name: </label>
  <input type="text" id="domTextElement" > 
   <button type="button"  onclick="getValueInput()"> 
      click me!! 
  </button> 
   <script src=""></script>
   <p id="valueInput"></p> 
</body> 
</html> 

et ce code sur la deuxième page

    const getValueInput =() =>{
      let inputValue = document.getElementById("domTextElement").value; 
      document.getElementById("valueInput").innerHTML = inputValue; 
    }

pas encore car je n'arrive pas a le faire fonctionner  dans ma page panier.js

voila je viens d'effectuer des tests 

si j'insère mon code de test  dans la condition de livraison=2 juste après l'accolade 

	if (Livraison == 2)
	
	{
	    	//test
  const getValueInput =() =>{
      let inputValue = document.getElementById("domTextElement").value; 
      document.getElementById("valueInput").innerHTML = inputValue; 
    }
//suite du traitement de la condition

Ce morceau de code en test ne fonctionne pas (rien n'est retourné) et m'indique cette erreur

Uncaught ReferenceError: getValueInput is not defined

Par contre si je l'insère juste avant la toute dernière  ligne qui est afficherpanier();cela fonctionne  ...

j'ai donc bien la valeur de l'input qui est affichée

voici le code complet de panier.js qui ne fonctionne pas et m'indique l'erreur  Uncaught ReferenceError: getValueInput is not defined

var Livraison = 2;

// Comment affiche-t-on les prix du panier et du total
// Pour rappel, les prix des produits sont à modifier via les attributs HTML data-prix dans le fichier index.php
// 0 pour aficher aucune décimale : 19 euros
// 2 pour afficher deux décimales : 19.00 euros
var decimal = 2;

// Ne pas modifier la suite sauf si vous désirez modifier le code
var MonPanier = (function() {
	panier = [];
	
	function Item(nom, prix, quantite,url) {
		this.nom = nom;
		this.prix = prix;
		this.quantite = quantite;
		this.url = url;
			 //console.log(url);
		}

	function savepanier() {
		sessionStorage.setItem('MonPanier', JSON.stringify(panier));
	//	console.log(setItem);
	//	console.log(JSON.stringify(panier));
	//console.log(('MonPanier', JSON.stringify(panier)));
		//console.log(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,url) {
		for(var item in panier) {
			if(panier[item].nom === nom) {
				if(quantite)
				{
					panier[item].quantite = Number(quantite);
				}
				else 
				{
					panier[item].quantite ++;
				}
				savepanier();
				return;
				
			}
		}
		var item = new Item(nom, prix, quantite,url);
		//console.log(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 += Number(panier[item].quantite);
	}
		return Number(totalquantite);
	}
//prix total panier
	obj.totalpanier = function() {
		var totalpanier = 0;
		for(var item in panier) {
			totalpanier += panier[item].prix * panier[item].quantite;
		}
	return Number(totalpanier.toFixed(decimal));
	}

	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(decimal);
			panierCopy.push(itemCopy)
		}
	return panierCopy;
	}

	return obj;
})();

function changeQte(element){
	var qte = element.value;
	var t = $(element);
	var label = t.attr("aria-label");
    $("[data-nom='"+ label +"']").attr('data-qte', qte);
}


$('.ajouter-panier').click(function(event) {
	event.preventDefault(); 
	var nom_option = "";
	var prix_option = 0;
	var url= $(this).data('url');
	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);
	if ($(this).attr('data-qte'))
	{
		var qte_option = $(this).attr('data-qte');
		MonPanier.ajouter_produit_dans_panier(nom, prix, qte_option,url);
	}
	else MonPanier.ajouter_produit_dans_panier(nom, prix, 1,url);
	afficherpanier();
});

$('.clear-panier').click(function() {
    MonPanier.clearpanier();
	afficherpanier();
});

$('.choix_livraison').click(function() {
	const cases = document.querySelectorAll('input[name="choix_livraison"]');
	for (const x of cases) {
		if (x.checked) {
		afficherpanier();
	}}
});

function afficherpanier() {
	var panierArray = MonPanier.listpanier();
	var output = "";
	 var countart=0;
    var countart2=0;
    var count=0;
	for(var i in panierArray) {
		output += "<div class='row' style='border-style: ridge;  border-width: 1px; border-color: #8ebf42; background-color: #d9d9d9;margin-bottom:5px;'>"
		+ "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'><button class='btn btn-danger effacer-item' data-nom='" + panierArray[i].nom + "'>X</button></div>"
		 + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + " <a class='example-image-link' href='"+ panierArray[i].url +"'data-lightbox='example-set'><img src=""""  style='width:100px;height:100px;'></a>" + "</div>"
		  + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].nom + "</div>" 
		  + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].prix.toFixed(0) + "  euro</div>"
		  
		 + "<div class='form-inline col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'><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' style='width:55px !important' data-nom='" + panierArray[i].nom + "' value='" + panierArray[i].quantite + "'>"
			 
		 + "<button class='btn btn-primary plus-item' data-nom='" + panierArray[i].nom + "'>+</button></div></div>"
		  
		  + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].total + " euros</div>" 
       +  "</div>";
       count++;
       countart += panierArray[i].quantite;  // somme des unités d'articles
       countart2 = countart
       //console.log(panierArray[i].quantite );
       //console.log(countart );
       //console.log(panierArray[i].quantite );
	}
	$('.show-panier').html(output);

	if (Livraison == 2)
	
	{
	    	//test
  const getValueInput =() =>{
      let inputValue = document.getElementById("domTextElement").value; 
      document.getElementById("valueInput").innerHTML = inputValue; 
    }

	//test
		const cases = document.querySelectorAll('input[name="choix_livraison"]');
		for (const x of cases) {
			if (x.checked) {
				let nom_choix_livraison = x.dataset.nom;
				let prix_choix_livraison = x.value;
				let prix_et_livraison = (( (MonPanier.totalpanier()))) + Number(prix_choix_livraison)  ;
				//let test= ((( (MonPanier.totalpanier()))) + Number(prix_choix_livraison) ).toFixed(2);
let test= MonPanier.totalpanier();
document.getElementById('amount').value = prix_et_livraison ;

$('.total-panier').html(prix_et_livraison.toFixed(decimal));

document.getElementById('livraison-detail').innerHTML ="(" + nom_choix_livraison + ")" + prix_choix_livraison + " euro(s)";



document.getElementById('modal_erreur').innerHTML =nom_choix_livraison ;
document.getElementById('modal_erreur_mondial').innerHTML =nom_choix_livraison ;
document.getElementById('nouveau_prix_total_haut').innerHTML =((( (MonPanier.totalpanier()))) ) .toFixed(2) ;
document.getElementById("prix_depart_haut").innerHTML  = MonPanier.totalpanier(); 
document.getElementById("prix_depart").innerHTML  = MonPanier.totalpanier(); 
break;
			}
		}
	}
	
	$('.total-panier-modal').html(MonPanier.totalpanier());
	$('.total-quantite').html(MonPanier.totalquantite());
	if ((Qte_Minimum == 1) && (Math.sign(MonPanier.totalquantite() - Qte_Minimum_Valeur) == -1) && (MonPanier.totalquantite() != 0))
	{
		//document.getElementById('qte_minimum_report').innerHTML = txt_qte_minimum_bad;
	}
	else if ((Qte_Minimum == 1) && ((Math.sign(MonPanier.totalquantite() - Qte_Minimum_Valeur) == 1) || (Math.sign(MonPanier.totalquantite() - Qte_Minimum_Valeur) == 0)) && (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 = "";
	} 
	//document.getElementById('total_qte_haut').innerHTML = MonPanier.totalquantite();
	document.getElementById('total_qte').innerHTML = MonPanier.totalquantite();
	document.getElementById('total_qte_bas').innerHTML = MonPanier.totalquantite();
	document.getElementById('total_qte_modal').innerHTML = MonPanier.totalquantite();
}

$('.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();

Merci pour ton aide et la réponse

voici le message d'erreur complet

j'obtiens ce message lorsque je rentre un nom dans le  champ et input et que je clic sur envoyer

je souhaiterais juste pouvoir récupérer la valeur que je vais rentrer en html afin de me permettre de faire des calculs complémentaires suivant ce que l'utilisateur entrera comme donnée,   dans la condition de la livraison 

Partager le code html cela n'est pas possible il y a près de 18000 lignes 

Mais que je place ce code ou je veux dans le fichier html et que je mette le test code de javasscript juste avant la dernière ligne de mon fichier javascript cela fonctionne

<label for="domTextElement">Name: </label>
  <input type="text" id="domTextElement" > 
   <button type="button"  onclick="getValueInput()"> 
      click me!! 
  </button> 

Avec un exemple simple cela fonctionne correctement ou encore une fois ci ce morceau de code est place juste avant la dernière ligne de la page panier.js

En fait voici ce que je souhaiterais faire 

lorsque je souhaite qu'un client puisse bénéficier d'une promo je lui donne un code par exemple "azerty789"

Ce code je le compare avec ce qu'il va entrer dans le champ si le code est bon la ristourne se réalise

si le code est mauvais il n'y pas de remise  

C'est pour cela que j'en ai besoin pour le calcul dans la condition de livraison 2

Même si comme on me l'as expliqué l'utilisateur pourrait voir les codes promo dans le code

Je viens d'essayer ton exemple mais malheureusement avec la condition j'ai toujours le message qui est retourne "votre code est mauvais"

	if (Livraison == 2)
	
	{
	    
	  
      let inputValue = document.getElementById("domTextElement").value; 
      
       if (inputValue == 'azerty') {
 document.getElementById("valueInput").innerHTML ="<div class='col' style='text-align:right;background-color: #78b8df;'> " + inputValue + " bravo votre code est bon </div>";
} else {
  document.getElementById("valueInput").innerHTML ="<div class='col' style='text-align:right;background-color: #78b8df;'> " + inputValue + " votre code est mauvais </div>";
  }
	 }

merci pour la réponse et l'aide

C'est super sympa

je suis occupé a réaliser diffèrent tests

Pour l'instant avant que l'utilisateur rentre quoi que ce soit 

il est bien affiché" le code est mauvais" ce qui est logique puisque c'est bien ma condition 

je devrais ajouter une condition en mentionnant que si la variable est vide on affiche rien 

Ensuite l'utilisateur entre un code il click sur le bouton

que le code entré  soit bon ou mauvais plus aucun message indiquant que le code est bon ou mauvais s'affiche juste 

la valeur de ce qu'il a entrer

apparaît a l'écran 

Merci pour la reponse

voici donc le nouveau code adapte avec ce que tu m'as demandé de modifier 

var Livraison = 2;

// Comment affiche-t-on les prix du panier et du total
// Pour rappel, les prix des produits sont à modifier via les attributs HTML data-prix dans le fichier index.php
// 0 pour aficher aucune décimale : 19 euros
// 2 pour afficher deux décimales : 19.00 euros
var decimal = 2;

// Ne pas modifier la suite sauf si vous désirez modifier le code
var MonPanier = (function() {
	panier = [];
	
	function Item(nom, prix, quantite,url) {
		this.nom = nom;
		this.prix = prix;
		this.quantite = quantite;
		this.url = url;
			 //console.log(url);
		}

	function savepanier() {
		sessionStorage.setItem('MonPanier', JSON.stringify(panier));
	//	console.log(setItem);
	//	console.log(JSON.stringify(panier));
	//console.log(('MonPanier', JSON.stringify(panier)));
		//console.log(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,url) {
		for(var item in panier) {
			if(panier[item].nom === nom) {
				if(quantite)
				{
					panier[item].quantite = Number(quantite);
				}
				else 
				{
					panier[item].quantite ++;
				}
				savepanier();
				return;
				
			}
		}
		var item = new Item(nom, prix, quantite,url);
		//console.log(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 += Number(panier[item].quantite);
	}
		return Number(totalquantite);
	}
//prix total panier
	obj.totalpanier = function() {
		var totalpanier = 0;
		for(var item in panier) {
			totalpanier += panier[item].prix * panier[item].quantite;
		}
	return Number(totalpanier.toFixed(decimal));
	}

	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(decimal);
			panierCopy.push(itemCopy)
		}
	return panierCopy;
	}

	return obj;
})();

function changeQte(element){
	var qte = element.value;
	var t = $(element);
	var label = t.attr("aria-label");
    $("[data-nom='"+ label +"']").attr('data-qte', qte);
}


$('.ajouter-panier').click(function(event) {
	event.preventDefault(); 
	var nom_option = "";
	var prix_option = 0;
	var url= $(this).data('url');
	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);
	if ($(this).attr('data-qte'))
	{
		var qte_option = $(this).attr('data-qte');
		MonPanier.ajouter_produit_dans_panier(nom, prix, qte_option,url);
	}
	else MonPanier.ajouter_produit_dans_panier(nom, prix, 1,url);
	afficherpanier();
});

$('.clear-panier').click(function() {
    MonPanier.clearpanier();
	afficherpanier();
});

$('.choix_livraison').click(function() {
	const cases = document.querySelectorAll('input[name="choix_livraison"]');
	for (const x of cases) {
		if (x.checked) {
		afficherpanier();
	}}
});

function afficherpanier() {
	var panierArray = MonPanier.listpanier();
	var output = "";
	 var countart=0;
    var countart2=0;
    var count=0;
	for(var i in panierArray) {
		output += "<div class='row' style='border-style: ridge;  border-width: 1px; border-color: #8ebf42; background-color: #d9d9d9;margin-bottom:5px;'>"
		+ "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'><button class='btn btn-danger effacer-item' data-nom='" + panierArray[i].nom + "'>X</button></div>"
		 + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + " <a class='example-image-link' href='"+ panierArray[i].url +"'data-lightbox='example-set'><img src=""""""  style='width:100px;height:100px;'></a>" + "</div>"
		  + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].nom + "</div>" 
		  + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].prix.toFixed(0) + "  euro</div>"
		  
		 + "<div class='form-inline col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'><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' style='width:55px !important' data-nom='" + panierArray[i].nom + "' value='" + panierArray[i].quantite + "'>"
			 
		 + "<button class='btn btn-primary plus-item' data-nom='" + panierArray[i].nom + "'>+</button></div></div>"
		  
		  + "<div class='col' style='text-align: center;border-left: solid;padding-left: 5px;padding-right: 5px;'>" + panierArray[i].total + " euros</div>" 
       +  "</div>";
       count++;
       countart += panierArray[i].quantite;  // somme des unités d'articles
       countart2 = countart
       //console.log(panierArray[i].quantite );
       //console.log(countart );
       //console.log(panierArray[i].quantite );
	}
	$('.show-panier').html(output);

	if (Livraison == 2)
	
	{
	    	//test
  {
      let inputValue = document.getElementById("domTextElement").value; 
    }

	//test
		const cases = document.querySelectorAll('input[name="choix_livraison"]');
		for (const x of cases) {
			if (x.checked) {
				let nom_choix_livraison = x.dataset.nom;
				let prix_choix_livraison = x.value;
				let prix_et_livraison = (( (MonPanier.totalpanier()))) + Number(prix_choix_livraison)  ;
				//let test= ((( (MonPanier.totalpanier()))) + Number(prix_choix_livraison) ).toFixed(2);
let test= MonPanier.totalpanier();
document.getElementById('amount').value = prix_et_livraison ;

$('.total-panier').html(prix_et_livraison.toFixed(decimal));

document.getElementById('livraison-detail').innerHTML ="(" + nom_choix_livraison + ")" + prix_choix_livraison + " euro(s)";



document.getElementById('modal_erreur').innerHTML =nom_choix_livraison ;
document.getElementById('modal_erreur_mondial').innerHTML =nom_choix_livraison ;
document.getElementById('nouveau_prix_total_haut').innerHTML =((( (MonPanier.totalpanier()))) ) .toFixed(2) ;
document.getElementById("prix_depart_haut").innerHTML  = MonPanier.totalpanier(); 
document.getElementById("prix_depart").innerHTML  = MonPanier.totalpanier(); 
break;
			}
		}
	}
	
	$('.total-panier-modal').html(MonPanier.totalpanier());
	$('.total-quantite').html(MonPanier.totalquantite());
	if ((Qte_Minimum == 1) && (Math.sign(MonPanier.totalquantite() - Qte_Minimum_Valeur) == -1) && (MonPanier.totalquantite() != 0))
	{
		//document.getElementById('qte_minimum_report').innerHTML = txt_qte_minimum_bad;
	}
	else if ((Qte_Minimum == 1) && ((Math.sign(MonPanier.totalquantite() - Qte_Minimum_Valeur) == 1) || (Math.sign(MonPanier.totalquantite() - Qte_Minimum_Valeur) == 0)) && (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 = "";
	} 
	//document.getElementById('total_qte_haut').innerHTML = MonPanier.totalquantite();
	document.getElementById('total_qte').innerHTML = MonPanier.totalquantite();
	document.getElementById('total_qte_bas').innerHTML = MonPanier.totalquantite();
	document.getElementById('total_qte_modal').innerHTML = MonPanier.totalquantite();
}

$('.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();
});

function getValueInput()  {
      let inputValue = document.getElementById("domTextElement").value; 
      document.getElementById("valueInput").innerHTML = inputValue; 
    }
afficherpanier();

Je peux deviner que le bouton recopie le code encodé dans une zone vers une autre zone, ce qui est totalement stérile.

Mais il ne devrait plus voir son code encode dans une autre zone , cela me sers juste pour les tests

Par la suite cela sera remplace par mes conditions

si le code est bon j'indique que le code est bon et je fais le calcul 

si le code est mauvais je ne fais pas de calcul et j'informe l'utilisateur que le code est mauvais 

A quoi va servir ce bouton 

Comme expliqué ici plus haut je souhaite donner a certains utilisateurs un code promotionnelle qui serait valable de tel date a tel date 

Ou par exemple un code promo qui ne dure qu'un jour ...

ect....

J'informe par exemple une partie mes utilisateurs qu'un code promo est valable jusque demain soir ..."promo147"

une fois le code promo est rentré je le teste

si le code est bon , comme tu l'as deviné j'enclenche un nouveau calcul et j'affiche en html et un message signalant que le code est bon , avec un nouveau montant a payer

Si le code est mauvais pas de nouveau calcul et j'envois un message pour informer l'utilisateur que le code est mauvais 

Et comme on peux le voir dans le code tout les calculs se déclenchent dans la condition livraison 2

Si j e parviens a faire fonctionner ce code dans ma condition livraison 2 je suis sauvé

let inputValue = document.getElementById("domTextElement").value; 

car grâce a la variable je vais pouvoir effectuer mes conditions 

Pfffff j'ai encore perdu un temps monstre

j'aurais du prendre ton exemple du post 2 (c'est la fatigue ...les gosses , le boulot )

j'avais trop la tête dans le guidon comme on dit

Ce sont les choses les plus simples que l'on ne voit pas 

Cela aurais été réglé depuis bien longtemps

Je vais mieux analyser cela demain 

Mais déjà un méga super grand merci ,tu es vraiment génial

Grace a toi j'ai encore épluché un peu plus ce code  

je pense que pour ce bon de commande cela est enfin fini

j'ai tout ce que je voulais ....

ne passe pas en resolu 

Je reviens demain confirmer

merci

merci

Voila je confirme ce code fonctionne a merveille 

un super grand merci