11484 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Comment envoyer une donnée vers javascript sans recharger la

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 

<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 maniere
$('.testphil').click(function() {
	const cases = document.querySelectorAll('input[name="testphil"]');
	for (const x of cases) {
		if (x.checked) {
		afficherpanier();
	}}
});

et aussi avec 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;

			}
		}

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
Modifié par flexi2202 (11 Aug 2022 - 15:46)
Bonjour,

Avant tout je vois une grande confusion :
flexi2202 a écrit :
J'ai donc 3 pages :
- la première index.html
- la deuxième mail.php
- la troisième panier .js

Ce ne sont pas des pages, ce sont des fichiers :
- le fichier en .html peut rendre une page sans qu'il soit besoin de l’interpréter (il est déjà écrit en html),
- le fichier .php contient du code dynamique qui peut éventuellement être interprété en html pour rendre une page,
- mais pas le fichier en .js qui n'est pas ici un langage serveur (sauf sous un autre environnement comme avec Node.js, mais ici ce n'est pas le cas).

Par contre, un fichier php ou html peut rendre une page contenant du javascript à destination du front, ou contenant un lien pointant vers une ressource javascript pour le front. C'est complètement différent.
Modifié par Olivier C (11 Aug 2022 - 15:07)
Bonjour
Merci pour la reponse
c'est vrai que j'ai fait une erreur d'interprétation donc en effet ce sont bien 3 fichiers
Si c'est juste une erreur de vocabulaire ok. Il faut donc juste récupérer la valeur de l'input, au déclenchement d'un événement :
document.querySelectorAll('input[name="testphil"]').value

Modifié par Olivier C (11 Aug 2022 - 18:10)
Merci pour l'aide
donc dans le panier.js
je dois juste écrire
var azerty=document.querySelectorAll('input[name="testphil"]').value
Cette méthode permet à javascript d'avoir accès à la valeur. Ici tu mets le résultat dans une variable et c'est ok. Bien sûr, nature comme cela ça se contentera de prendre la valeur du champ au chargement de la page et c'est rarement ce que l'on veut, c'est pourquoi on associe ce sélecteur à un événement onclick ou addEventListener().

Voici un des mes exemples en ligne exploitant ce concept pour des validations de formulaire : Regex form validation. Dans cet exemple on voit que le sélecteur + valeur de l'imput est associé à
.addEventListener + keyup ou à .addEventListener + change.
Un très grand merci pour l'aide et le code
je venais juste de trouver une solution avec ce code
la partie 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="test-envois.js"></script>
   <p style ="  font-size: 45px;"id="deux"></p>

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

//function affichepanier(val)
function affichepanier(val)
{
    var testaz =10;
  var variableOfFunction1 = val;
 var total=(testaz+val);
  
  
 // var total=Number(testaz)+Number(val);
  
  if (val == 'promo') {
  document.getElementById("deux").innerHTML ="<div class='col' style='text-align:right;background-color: #78b8df;'> " + total + " bravo votre code est bon </div>";
} else {
   document.getElementById("deux").innerHTML ="<div class='col' style='text-align:right;background-color: #78b8df;'> " + total + " votre code est mauvais </div>";
}
  
  
  
 }


cela semble fonctionner comme on le voit sur cette page
https://phil.pecheperle.be/panier/test-envois2.php
Mais lorsque j'essaye d'intégrer cela dans mes fichiers cela ne fonctionne plus
je posterais le code du fichier javascript dans lequel je désire mettre ces fonctions
Modifié par flexi2202 (11 Aug 2022 - 23:36)
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é 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

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 mon code html que je place dans mon fichier html
<label for="domTextElement">Name: </label>
<input type="text" id="domTextElement" >
<button type="button" onclick="getValueInput()">
click me!!
</button>

Modifié par flexi2202 (12 Aug 2022 - 17:13)
Je suis désolé, je ne suis pas doué en revue de code, surtout en ligne comme ça et lorsque ce n'est pas le mien. Je passe la main...
Ouh là ! effectivement je ne risquais pas de t'aider car je n'y étais pas du tout :
delftstack.com a écrit :
La méthode `document.forms` prend l’attribut `name` pour localiser le formulaire et son élément.

Modifié par Olivier C (13 Aug 2022 - 09:25)
Prévenir un modérateur
Répondre au sujet
Aller à