[RESOLU] comment faire passer des variables de javascript vers le html

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : [RESOLU] comment faire passer des variables de javascript vers le html

Re: comment faire passer des variables de javascript vers le html

par flexi2202 » 29 juil. 2022, 23:47

c'est réglé il y avait deux fois le même id

Re: comment faire passer des variables de javascript vers le html

par flexi2202 » 29 juil. 2022, 23:06

Merci pour la reponse
en fait je viens de trouver comment faire en javascript
je reposte donc ma demande car ce que j'ai défini m'indique dans un log que ce n'est pas défini
pour l'instant je ne m'occupe que du nom de mondial relay (cb_Nom)

voici le code de mondial relay sans modification

Code : Tout sélectionner

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Exemple commenté</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="robots" content="noindex, nofollow"> <meta name="googlebot" content="noindex, nofollow"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <title>Exemple commenté d'une implémentation du Widget Mondial Relay</title> <!-- Librairie jQuery, facilitant la programmation de scripts côté client. Cette librairie est requise par le widget Mondial Relay, elle doit être appellée avant la librairie du Widget Mondial Relay. Le symbole "$" commençant une instruction javascript est caractéristique de l'utilisation de jQuery. --> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!-- Librairie de Cartographie : Leaflet. --> <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet/dist/leaflet.css" /> <!-- Widget MR --> <script src="https://widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js"></script> </head> <body> <!-- Zone dans laquelle le Widget est chargé --> <div id="Zone_Widget"></div> <div style="padding:8px; overflow:auto;"> <div style="background:#edffb2; border:solid 1px #a5f913; padding:5px; font-family:verdana; font-size:10px;"> <em>Cette zone n'est pas située dans le Widget mais bien dans la page appelante.</em><br/><br/> <div style="display:inline-block; vertical-align:top;"> <!-- La balise ayant pour id "TargetDisplay_Widget" a été paramétrée pour reçevoir l'ID du Point Relais sélectionné --> Point Relais Selectionné : <input type="text" id="TargetDisplay_Widget" /><br/> <!-- Balise HTML avec id "Target_Widget", paramétrée pour reçevoir l'ID du Point Relais sélectionné --> Hidden : <input type="text" id="Target_Widget" /><br/> <!--Balise HTML avec id "TargetDisplayInfoPR_Widget" paramétrée pour recevoir l'adresse du Point Relais sélectionné --> InfosPR : <span id="TargetDisplayInfoPR_Widget"></span> </div> <hr /> <div style="display:inline-block;"> <!-- Balises HTML utilisées dans la fonction de CallBack pour reçevoir des données à afficher --> <div style="font-weight:bold;text-decoration:underline;">Callback zone</div><br/> <div>data.ID = <span id="cb_ID"></span></div> <div>data.Nom = <span id="cb_Nom"></span></div> <div>data.Adresse = <span id="cb_Adresse"></span></div> <div>data.CP = <span id="cb_CP"></span></div> <div>data.Ville = <span id="cb_Ville"></span></div> <div>data.Pays = <span id="cb_Pays"></span></div> </div> </div> </div> </body> </html> <script type="text/javascript">//<![CDATA[ // Initialiser le widget après le chargement complet de la page $(document).ready(function() { // Charge le widget dans la DIV d'id "Zone_Widget" avec les paramètres indiqués $("#Zone_Widget").MR_ParcelShopPicker({ // // Paramétrage de la liaison avec la page. // // Selecteur de l'élément dans lequel est envoyé l'ID du Point Relais (ex: input hidden) Target: "#Target_Widget", // Selecteur de l'élément dans lequel est envoyé l'ID du Point Relais pour affichage TargetDisplay: "#TargetDisplay_Widget", // Selecteur de l'élément dans lequel sont envoysé les coordonnées complètes du point relais TargetDisplayInfoPR: "#TargetDisplayInfoPR_Widget", // // Paramétrage du widget pour obtention des point relais. // // Le code client Mondial Relay, sur 8 caractères (ajouter des espaces à droite) // BDTEST est utilisé pour les tests => un message d'avertissement apparaît Brand: "BDTEST ", // Pays utilisé pour la recherche: code ISO 2 lettres. Country: "FR", // Code postal pour lancer une recherche par défaut PostCode: "59000", // Mode de livraison (Standard [24R], XL [24L], XXL [24X], Drive [DRI]) ColLivMod: "24R", // Nombre de Point Relais à afficher NbResults: "7", // // Paramétrage d'affichage du widget. // // Afficher les résultats sur une carte? ShowResultsOnMap: true, // Afficher les informations du point relais à la sélection sur la carte? DisplayMapInfo: true, // Fonction de callback déclenché lors de la selection d'un Point Relais OnParcelShopSelected: // Fonction de traitement à la sélection du point relais. // Remplace les données de cette page par le contenu de la variable data. // data: les informations du Point Relais function(data) { $("#cb_ID").html(data.ID); $("#cb_Nom").html(data.Nom); $("#cb_Adresse").html(data.Adresse1 + ' ' + data.Adresse2); $("#cb_CP").html(data.CP); $("#cb_Ville").html(data.Ville); $("#cb_Pays").html(data.Pays); } // // Autres paramétrages. // // Filtrer les Points Relais selon le Poids (en grammes) du colis à livrer // Weight: "", // Spécifier le nombre de jours entre la recherche et la dépose du colis dans notre réseau // SearchDelay: "3", // Limiter la recherche des Points Relais à une distance maximum // SearchFar: "", // Liste des pays selectionnable par l'utilisateur pour la recherche: codes ISO 2 lettres // AllowedCountries: "FR,ES", // Force l'utilisation de Google Map si la librairie est présente? // EnableGmap: true, // Activer la recherche de la position lorsque le navigateur de l'utilisateur le supporte? // EnableGeolocalisatedSearch: "true", // Spécifier l'utilisation de votre feuille de style CSS lorsque vous lui donnez la valeur "0" // CSS: "1", // Activer le zoom on scroll sur la carte des résultats? //,MapScrollWheel: "false", // Activer le mode Street View sur la carte des résultats (attention aux quotas imposés par Google) // MapStreetView: "false" }); }); //]]></script> <script> // tell the embed parent frame the height of the content if (window.parent && window.parent.parent){ window.parent.parent.postMessage(["resultsFrame", { height: document.body.getBoundingClientRect().height, slug: "a9mxhow5" }], "*") } // always overwrite window.name, in case users try to set it manually window.name = "result" </script> </body> </html>
voici ce que j'ai modifie

Code : Tout sélectionner

//span $("#cb_ID").html(data.ID); $("#cb_Nom").html(data.Nom);<br>$("#cb_Adresse").html(data.Adresse1 + ' ' + data.Adresse2); $("#cb_CP").html(data.CP); $("#cb_Ville").html(data.Ville);<br>$("#cb_Pays").html(data.Pays); //input hidden $("[name='ID']").val(data.ID); $("[name='NOM']").val(data.Nom);<br>$("[name='ADRESSE']").val(data.Adresse1 + ' ' + data.Adresse2); $("[name='CP']").val(data.CP); $("[name='VILLE']").val(data.Ville);<br>$("[name='PAYS']").val(data.Pays);
a présent voici comment l'utilisateur devait entrer les données manuellement je prends l'exemple du champ du nom de mondial relay(cb_Nom)

Code : Tout sélectionner

<input class="form-control" type="text" name="cb_Nom" value="" id="cb_Nom" placeholder="Adresse du point mondial relay" >
que j'ai modifie de cette facon

Code : Tout sélectionner

<input type="text" id="cb_Nom" value='<span id="cb_Nom"></span>' name="cb_Nom">
et le traitement des données du formulaire pour l'envois par mail c'est la ou ca coince et ou j'ai undefined pour la variable nom du point mondial (cb_Nom)

Code : Tout sélectionner

<!-- pour envoyer les infos vers mail.php --> <script> function commander(nom,prenom,adresse,cp,email,adressepoint,cppoint,villepoint,commande,prix_total,remise,nouveau_prix,prix_depart,total_qte_bas,message,ville,pays,detail_livraison,cb_Nom, adresse_mondial,cp_mondial,ville_mondial,pays_mondial){ $.ajax({ url : 'mail.php', type : 'POST', data : 'nom=' + nom + '&prenom=' + prenom + '&adresse=' + adresse + '&cp=' + cp + '&email=' + email + '&adressepoint=' + adressepoint + '&cppoint=' + cppoint + '&villepoint=' + villepoint +'&commande=' + commande + '&prix_total=' + prix_total +'&remise=' + remise + '&nouveau_prix=' + nouveau_prix + '&prix_depart=' + prix_depart + '&total_qte_bas=' + total_qte_bas + '&message=' + message + '&ville=' + ville + '&pays=' + pays + '&livraison=' + detail_livraison + '&cb_Nom=' + cb_Nom + '&adresse_mondial=' + adresse_mondial + '&cp_mondial=' + cp_mondial + '&ville_mondial=' + ville_mondial + '&pays_mondial=' + pays_mondial, dataType : 'html', success : function(reponse){ if (reponse == "1"){ //MonPanier.clearpanier(); afficherpanier(); document.body.scrollTop = 0; document.documentElement.scrollTop = 0; $('#mymodal').modal('show'); } if (reponse == "0-1") { $('#mymodal_erreur_1').modal('show'); } if (reponse == "0-2") { $('#mymodal_erreur_2').modal('show'); } if (reponse == "0-3") { $('#mymodal_erreur_3').modal('show'); } if (reponse == "0-4") { $('#mymodal_erreur_4').modal('show'); } if (reponse == "0-5") { $('#mymodal_erreur_5').modal('show'); } if (reponse == "0-6") { $('#mymodal_erreur_6').modal('show'); } if (reponse == "0-7") { $('#mymodal_erreur_7').modal('show'); } if (reponse == "0-8") { $('#mymodal_erreur_8').modal('show'); } if (reponse == "0-9") { $('#mymodal_erreur_9').modal('show'); } if (reponse == "0-10") { $('#mymodal_erreur_10').modal('show'); } if (reponse == "0-11") { $('#mymodal_erreur_11').modal('show'); } if (reponse == "0-12") { $('#mymodal_erreur_12').modal('show'); } if (reponse == "0-13") { $('#mymodal_erreur_13').modal('show'); } if (reponse == "0-14") { $('#mymodal_erreur_14').modal('show'); } if (reponse == "0-15") { $('#mymodal_erreur_15').modal('show'); } if (reponse == "0-16") { $('#mymodal_erreur_16').modal('show'); } if (reponse == "0-17") { $('#mymodal_erreur_17').modal('show'); } if (reponse == "0"){ $('#mymodal_erreur').modal('show'); } } }); } $('#commander').click( function(){ var nom = document.getElementById("nom").value; var prenom = document.getElementById("prenom").value; var adresse = document.getElementById("adresse").value; var cp = document.getElementById("cp").value; var ville = document.getElementById("ville").value; var pays = document.getElementById("pays").value; var email = document.getElementById("email").value; var adressepoint = document.getElementById("adressepoint").value; var cppoint = document.getElementById("cppoint").value; var villepoint = document.getElementById("villepoint").value; var commande = JSON.stringify(panier); var detail_livraison = document.getElementById("livraison-detail").innerHTML; var prix_total = document.getElementById("prix_total").innerHTML; var remise = document.getElementById("remise").innerHTML; var nouveau_prix = document.getElementById("nouveau_prix").innerHTML; var prix_depart = document.getElementById("prix_depart").innerHTML; var total_qte_bas = document.getElementById("total_qte_bas").innerHTML; var message = encodeURIComponent(document.getElementById("message").value); var cb_Nom = document.getElementById("cb_Nom").value; var adresse_mondial = document.getElementById("adresse_mondial").value; var cp_mondial = document.getElementById("cp_mondial").value; var ville_mondial = document.getElementById("ville_mondial").value; var pays_mondial = document.getElementById("pays_mondial").value; console.log(cb_Nom ); commander(nom,prenom,adresse,cp,email,adressepoint,cppoint,villepoint,commande,prix_total,remise,nouveau_prix,prix_depart,total_qte_bas,message,ville,pays,detail_livraison,cb_Nom,adresse_mondial, cp_mondial,ville_mondial,pays_mondial); }); </script>

je ne vois pas pourquoi il me dit que cette variable n'est pas définie

Re: comment faire passer des variables de javascript vers le html

par or 1 » 29 juil. 2022, 22:52

https://www.w3schools.com/jquery/html_val.asp pour changer la valeur de l'attribut value de
<input class="form-control" type="text" name="nom_mondial" value="" id="nom_mondial" placeholder="Nom du point mondial relay" >

comment faire passer des variables de javascript vers le html

par flexi2202 » 29 juil. 2022, 17:50

Bonjour a tous
Pour l'instant j'ai un formulaire avec des champs que l'utilisateur doit remplir pour mondial relay de ce style

Code : Tout sélectionner

<input class="form-control" type="text" name="nom_mondial" value="" id="nom_mondial" placeholder="Nom du point mondial relay" >
Ce qui est important pour moi c'est du récupérer le name="nom_mondial" pour la suite du traitement du formulaire

Je souhaiterais a présent remplacer les champs que l'utilisateur doit remplir avec le widjet de mondial relay
dont voici le code

Mon problème c'est que ce widjet donne une valeur a lID et moi ce qui m'intéresserais c'est que cette valeur soit donnée a
name

j'ai essaye de modifie le code de cette façon pour le nom par exemple

Code : Tout sélectionner

$("#cb_Nom").html(data.Nom);
par

Code : Tout sélectionner

$("#cb_nom_mondial").html(data.nom_mondial);
et ensuite

Code : Tout sélectionner

<div>data.Nom= <span id="cb_Nom"></span></div>
par

Code : Tout sélectionner

<div>data.nom_mondial= <span name="cb_nom_mondial"></span></div>
Mais lorsque je choisi un point relais, rien n'est retourné pour ce champ

Code : Tout sélectionner

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Exemple commenté</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="robots" content="noindex, nofollow"> <meta name="googlebot" content="noindex, nofollow"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <title>Exemple commenté d'une implémentation du Widget Mondial Relay</title> <!-- Librairie jQuery, facilitant la programmation de scripts côté client. Cette librairie est requise par le widget Mondial Relay, elle doit être appellée avant la librairie du Widget Mondial Relay. Le symbole "$" commençant une instruction javascript est caractéristique de l'utilisation de jQuery. --> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!-- Librairie de Cartographie : Leaflet. --> <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet/dist/leaflet.css" /> <!-- Widget MR --> <script src="https://widget.mondialrelay.com/parcelshop-picker/jquery.plugin.mondialrelay.parcelshoppicker.min.js"></script> </head> <body> <!-- Zone dans laquelle le Widget est chargé --> <div id="Zone_Widget"></div> <div style="padding:8px; overflow:auto;"> <div style="background:#edffb2; border:solid 1px #a5f913; padding:5px; font-family:verdana; font-size:10px;"> <em>Cette zone n'est pas située dans le Widget mais bien dans la page appelante.</em><br/><br/> <div style="display:inline-block; vertical-align:top;"> <!-- La balise ayant pour id "TargetDisplay_Widget" a été paramétrée pour reçevoir l'ID du Point Relais sélectionné --> Point Relais Selectionné : <input type="text" id="TargetDisplay_Widget" /><br/> <!-- Balise HTML avec id "Target_Widget", paramétrée pour reçevoir l'ID du Point Relais sélectionné --> Hidden : <input type="text" id="Target_Widget" /><br/> <!--Balise HTML avec id "TargetDisplayInfoPR_Widget" paramétrée pour recevoir l'adresse du Point Relais sélectionné --> InfosPR : <span id="TargetDisplayInfoPR_Widget"></span> </div> <hr /> <div style="display:inline-block;"> <!-- Balises HTML utilisées dans la fonction de CallBack pour reçevoir des données à afficher --> <div style="font-weight:bold;text-decoration:underline;">Callback zone</div><br/> <div>data.ID = <span id="cb_ID"></span></div> <div>data.Nom = <span id="cb_Nom"></span></div> <div>data.Adresse = <span id="cb_Adresse"></span></div> <div>data.CP = <span id="cb_CP"></span></div> <div>data.Ville = <span id="cb_Ville"></span></div> <div>data.Pays = <span id="cb_Pays"></span></div> </div> </div> </div> </body> </html> <script type="text/javascript">//<![CDATA[ // Initialiser le widget après le chargement complet de la page $(document).ready(function() { // Charge le widget dans la DIV d'id "Zone_Widget" avec les paramètres indiqués $("#Zone_Widget").MR_ParcelShopPicker({ // // Paramétrage de la liaison avec la page. // // Selecteur de l'élément dans lequel est envoyé l'ID du Point Relais (ex: input hidden) Target: "#Target_Widget", // Selecteur de l'élément dans lequel est envoyé l'ID du Point Relais pour affichage TargetDisplay: "#TargetDisplay_Widget", // Selecteur de l'élément dans lequel sont envoysé les coordonnées complètes du point relais TargetDisplayInfoPR: "#TargetDisplayInfoPR_Widget", // // Paramétrage du widget pour obtention des point relais. // // Le code client Mondial Relay, sur 8 caractères (ajouter des espaces à droite) // BDTEST est utilisé pour les tests => un message d'avertissement apparaît Brand: "BDTEST ", // Pays utilisé pour la recherche: code ISO 2 lettres. Country: "FR", // Code postal pour lancer une recherche par défaut PostCode: "59000", // Mode de livraison (Standard [24R], XL [24L], XXL [24X], Drive [DRI]) ColLivMod: "24R", // Nombre de Point Relais à afficher NbResults: "7", // // Paramétrage d'affichage du widget. // // Afficher les résultats sur une carte? ShowResultsOnMap: true, // Afficher les informations du point relais à la sélection sur la carte? DisplayMapInfo: true, // Fonction de callback déclenché lors de la selection d'un Point Relais OnParcelShopSelected: // Fonction de traitement à la sélection du point relais. // Remplace les données de cette page par le contenu de la variable data. // data: les informations du Point Relais function(data) { $("#cb_ID").html(data.ID); $("#cb_Nom").html(data.Nom); $("#cb_Adresse").html(data.Adresse1 + ' ' + data.Adresse2); $("#cb_CP").html(data.CP); $("#cb_Ville").html(data.Ville); $("#cb_Pays").html(data.Pays); } // // Autres paramétrages. // // Filtrer les Points Relais selon le Poids (en grammes) du colis à livrer // Weight: "", // Spécifier le nombre de jours entre la recherche et la dépose du colis dans notre réseau // SearchDelay: "3", // Limiter la recherche des Points Relais à une distance maximum // SearchFar: "", // Liste des pays selectionnable par l'utilisateur pour la recherche: codes ISO 2 lettres // AllowedCountries: "FR,ES", // Force l'utilisation de Google Map si la librairie est présente? // EnableGmap: true, // Activer la recherche de la position lorsque le navigateur de l'utilisateur le supporte? // EnableGeolocalisatedSearch: "true", // Spécifier l'utilisation de votre feuille de style CSS lorsque vous lui donnez la valeur "0" // CSS: "1", // Activer le zoom on scroll sur la carte des résultats? //,MapScrollWheel: "false", // Activer le mode Street View sur la carte des résultats (attention aux quotas imposés par Google) // MapStreetView: "false" }); }); //]]></script> <script> // tell the embed parent frame the height of the content if (window.parent && window.parent.parent){ window.parent.parent.postMessage(["resultsFrame", { height: document.body.getBoundingClientRect().height, slug: "a9mxhow5" }], "*") } // always overwrite window.name, in case users try to set it manually window.name = "result" </script> </body> </html>