[RESOLU] Comment envoyer une donnée vers javascript sans recharger la page

11 août 2022, 12:58

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 : Tout sélectionner

<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>

et je traite dans ma page panier.js de cette manière

Code : Tout sélectionner

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

et aussi avec ce code

Code : Tout sélectionner

	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;

			}
		}

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

11 août 2022, 14:12

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

11 août 2022, 14:25

merci pour la reponse
Mais cela serait sympa avec un exemple

11 août 2022, 22:01

je pense avoir trouvé

voici la page en php

Code : Tout sélectionner

<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 la page en javascript

Code : Tout sélectionner

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>"
 }

12 août 2022, 07:43

j'ai trouvé un autre exemple
en html

Code : Tout sélectionner

<!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>

dans le fichier testenbois5.js

Code : Tout sélectionner

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

12 août 2022, 17:04

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 : Tout sélectionner

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é 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 : Tout sélectionner

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

et voici la partie html que je place dans mon fichier index

Code : Tout sélectionner

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

13 août 2022, 09:06

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

https://www.delftstack.com/fr/howto/jav ... orm-value/

[RESOLU] Comment envoyer une donnée vers javascript sans recharger la page

Qui est en ligne