Comment passer une variable de php vers javascript
Résolu/Ferméflexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 - 13 août 2022 à 12:21
- Variable php dans javascript
- Telecharger javascript - Télécharger - Langages
- Easy php - Télécharger - Divers Web & Internet
- Php natif - Forum PHP
- A javascript error occurred in the main process - Forum Matériel & Système
- Variable objet ou variable de bloc with non définie - Forum VB / VBA
15 réponses
11 août 2022 à 13:52
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/
11 août 2022 à 12:36
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>
11 août 2022 à 14:05
Le code que tu donnes comme exemple contient un formulaire qui semble plutôt destiné à être envoyé à du PHP. Est-ce intentionnel, ou un indice de confusion?
Pour récupérer dans la variable flex du JavaScript la donnée dans le formulaire:
flex = document.getElementById("test").value
11 août 2022 à 14:12
Merci pour la reponse
comme je ne sais pas comment faire j'ai écris ce code de manière intentionnel tout en sachant que cela n'est pas bon et effectivement c'est pour passer du html vers le php
ce que je souhaite c'est transmettre les données a panier .js
ce que je désire ce n'est pas d'afficher les données sur la page html , mais de les transmettre a panier.js pour les traiter
11 août 2022 à 15:47
La ligne de code suggérée permet à panier.js de traiter la donnée.
11 août 2022 à 15:53
Merci de ton aide
Mais le code suggéré doit être placé en javascript alors , pour que je puisse faire passer l'id dans flex ?
flex = document.getElementById("test").value
Mais dans mon formulaire lorsque je vais l'envoyer ma page html va se recharger?
Modifié le 11 août 2022 à 14:07
bonjour
Merci pour la réponse
je vais voir cela
11 août 2022 à 14:32
Merci pour l'exemple , mais ce que je souhaite c'est envoyer des données de html vers panier.js
11 août 2022 à 16:04
En réalité, panier.js contient des instructions. Tu dois donc, un moment, exécuter ces instructions. Ces instructions peuvent lire les données html.
Qu'est-ce qui déclenche l'exécution des instructions? Qui fera que panier.js ira lire les données.
Modifié le 11 août 2022 à 16:20
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;
11 août 2022 à 16:59
Parlons de page, pas de fichier.
A un moment donné, le navigateur traite une page, qui contient du code html, qui peut include du code javascript. Les éléments de cette page peuvent être dans des fichiers incus, ou pas.
Ton premier exemple montre comment le code javascript peut modifier un élément de la page. Le second montre comment le code javascript peut lire un élément de la page.
L'exemple donné en #2 contenait les deux actions.
Ce qui te manques, je pense, c'est la compréhension de quand le code javascript est exécuté. Dans l'exemple en #2, il est exécuté quand on clique le bouton du formulaire.
Dans les exemples que tu donnes, tu n'expliques pas "quand", et tu ne montres pas les instructions qui permettent de comprendre le "quand".
Ta vraie question, probablement, c'est: "Comment déclencher l'éxécution d'instructions javascript?".
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre questionModifié le 11 août 2022 à 20:40
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
Modifié le 11 août 2022 à 22:00
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>"
}
12 août 2022 à 06:57
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;
}
12 août 2022 à 10:31
Peux-tu alors marquer la discussion comme résolue?
12 août 2022 à 14:56
pas encore car je n'arrive pas a le faire fonctionner dans ma page panier.js
Modifié le 12 août 2022 à 15:47
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();
12 août 2022 à 16:32
Merci de partager le message d'erreur complet, avec, au minimum, le numéro de la ligne en erreur. A quel moment obtiens-tu cette erreur?
Je ne comprends pas ce que tu essaies de réaliser.
Cela n'a de sens de partager ton code javascript que si tu partages également le code source HTML de ta page (à obtenir via le navigateur).
Je recommande fortement que tu continues plutôt sur un exemple plus simple, comme celui que j'ai partagé en #2. Tu peux le modifier, de façon à comprendre les principes de base. Quand tu seras à l'aise, tu pourras appliquer tes connaissances sur ton programme complexe.
12 août 2022 à 16:58
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
12 août 2022 à 17:16
La place correcte de ce code est, en effet, en dehors de toute déclaration de fonction. Donc, par exemple, avant la dernière ligne.
Moi je ferais plutôt ainsi, toujours au même endroit, avant la dernière ligne:
function getValueInput() {
let inputValue = document.getElementById("domTextElement").value;
document.getElementById("valueInput").innerHTML = inputValue;
}
Toutefois, je ne comprends toujours pas à quoi sert le nouveau bouton, "click me!!". Il n'est pas nécessaire d'ajouter un bouton pour faire des calculs complémentaires suivant ce que l'utilisateur a entré comme donnée. Toutes ces données sont directement accessible par le code.
Tu peux écrire, directement:
if (Livraison == 2)
{
let inputValue = document.getElementById("domTextElement").value;
}
Il est nécessaire que tu expliques, du point de vue de l'utilisateur, pas du point de vue du code, à quoi sert ce nouveau bouton.
Modifié le 12 août 2022 à 20:05
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>";
}
}
12 août 2022 à 20:18
Quel est la valeur de inputValue qui est affichée dans le message?
Es-tu certain qu'au moment où le message apparait, l'utilisateur a déjà encodé le code dans le champ, tenant compte du fait que le bouton "click me!" ne sert à rien?
13 août 2022 à 10:50
Même si comme on me l'as expliqué l'utilisateur pourrait voir les codes promo dans le code
Pour éviter cela, tu peux, dans le code JavaScript, faire un appel Ajax, envoyer le code à une page PHP, qui vérifie le code et te répond "ok" ou "bof".
13 août 2022 à 12:03
Bonjour yg_be
c'est gentil
Mais je vais déjà assimiler tout cela
Ce bon de commande n'est donne que si on me demande
On verra plus tard comment faire
Je vais digérer tout cela avant hihi
13 août 2022 à 12:11
Plus généralement, tout ce qui est fait en JavaScript peut facilement être modifié par l'utilisateur.
Tous ce qui est sensible ou important doit être fait en PHP.
13 août 2022 à 12:21
ah ok
C'est vrai que je remarque que javascript c'est un langage magique et le lien que tu m'as donné est remplit d'exemple
12 août 2022 à 21:16
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
12 août 2022 à 22:10
Tu n'as ni montré, ni expliqué, ce que tu avais modifié dans ton code javascript. Je peux deviner ce que tu as fait, et il est préférable que tu m'en informes. Je peux deviner que le bouton recopie le code encodé dans une zone vers une autre zone, ce qui est totalement stérile.
Il est nécessaire que tu expliques, du point de vue de l'utilisateur, pas du point de vue du programme, à quoi servirait ce nouveau bouton.
J'ai l'impression que tu souhaites que l'utilisateur puisse rentrer un code, et ensuite décider de déclencher un nouveau calcul, pour adapter un calcul qui a été fait avant.
De nouveau, sans une vue d'ensemble sur la globalité, que tu choisis de nous cacher, difficile de t'aider.
Modifié le 12 août 2022 à 22:55
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
Modifié le 12 août 2022 à 23:16
Si tu souhaites que le bouton déclenche "si le code est bon , comme tu l'as deviné j'enclenche un nouveau calcul".
.
Alors:
- dans le programme du bouton, vérifie si le code est bon
- si il est bon, déclenche un nouveau calcul
.
Pour le moment, tu fais tout à l'envers:
- tu ne fais rien d'utile dans le programme du bouton
- tu vérifies si le code est bon au moment de faire le calcul
.
Cela résulte de ton incompréhension des principes de fonctionnement d'un programme javascript, et de ton ignorance du fonctionnement du code que tu utilises.
.
Je recommande fortement que tu continues plutôt sur un exemple plus simple, comme celui que j'ai partagé en #2. Tu peux le modifier, de façon à comprendre les principes de base. Quand tu seras à l'aise, tu pourras appliquer tes connaissances sur ton programme complexe. Sinon, tu vas continuer à faire des changements sans comprendre, donc sans apprendre ni progresser.
13 août 2022 à 00:44
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
13 août 2022 à 12:04
Voila je confirme ce code fonctionne a merveille
un super grand merci
