cela a été réglé grâce a ce lien

https://www.delftstack.com/fr/howto/javascript/get-html-form-value/

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

[code]if (Livraison == 2)

{
//test
const getValueInput =() =>{
let inputValue = document.getElementById("domTextElement").value;
document.getElementById("valueInput").innerHTML = inputValue;
}
//suite du traitement de la condition[/code]
Ce morceau de code en test ne fonctionne pas (rien n'est retourné lorsque je clic sur envoyer du formulaire html) 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

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

et voici la partie html que je place dans mon fichier index
[code]<label for="domTextElement">Name: </label>
<input type="text" id="domTextElement" >
<button type="button" onclick="getValueInput()">
click me!!
</button>[/code]

j'ai trouvé un autre exemple
en html
[code]<!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="testenbois5.js"></script>
<p id="valueInput"></p>
<script>
</script>
</body>
</html>[/code]
dans le fichier testenbois5.js
[code] const getValueInput =() =>{
let inputValue = document.getElementById("domTextElement").value;
document.getElementById("valueInput").innerHTML = inputValue;
}[/code]

je pense avoir trouvé

voici la page en php

[code]<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>[/code]

et la page en javascript

[code]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>"
}[/code]

merci pour la reponse
Mais cela serait sympa avec un exemple

Il n'y a jamais besoin de recharger la page pour récupérer des valeurs html en javascript.
tu peux les récupérer en jQuery ou non (document.getElement... ou querySelector) pour garder de la cohérence mais tu dois modifier ton bouton si tu ne veux pas que le formulaire recharge la page. tu dois écouter ce bouton et agir en conséquence

Bonjour a tous

dans un but purement éducatif j'essaye de comprendre le passage des données de html vers le javascript ajax
j'ai donc un bon de commande dont je pense avoir compris son fonctionnement depuis le temps que je suis dessus

Mais il y a un point qui reste en interrogation
c'est la passage des données de html vers javascript

j'ai donc 3 pages
la première index.html
la deuxième mail.php
La troisième panier .js

J'ai bien compris comment passer les données de html vers php pour ensuite réaliser la mise en base de données et l'envois par mail

Par contre pour récupérer des informations de html vers la page javascript cela est encore un peu flou

dans mon exemple j'ai ce morceau de code qui sert de test

[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>[/code]

et je traite dans ma page panier.js de cette manière
[code]$('.testphil').click(function() {
const cases = document.querySelectorAll('input[name="testphil"]');
for (const x of cases) {
if (x.checked) {
afficherpanier();
}}
});[/code]
et aussi avec ce code
[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;

}
}[/code]

tout ce passe bien
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