Comment récupérer une valeur en javascript

Résolu/Fermé
flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 - 29 juil. 2022 à 18:37
flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 - 29 juil. 2022 à 23:46

Bonjour a tous

Pour l'instant j'ai un bon de commande qui fonctionne a merveille avec mondial Relay

Dans lequel l'utilisateur rentre ses données avec ce formulaire 

	<div class="col-md-12 mt-3">
	     			<label for="nommr" style="color: #f51111;font-weight: bolder;background-color: #ffe512;">Nom du point mondial relay</label>
					
					<input class="form-control" type="text" name="cb_Nom" value="" id="cb_Nom" placeholder="Nom du point mondial relay" >
					
					<br>
					<label for="adressemr" style="color: #f51111;font-weight: bolder;background-color: #ffe512;">Adresse du point mondial relay</label>
					
					<input class="form-control" type="text" name="adresse_mondial" value="" id="adresse_mondial" placeholder="Adresse du point mondial relay" >
					
					<br>
					<label for="cpmr" style="color: #f51111;font-weight: bolder;background-color: #ffe512;">Code postal du point mondial relay</label>
					
					<input class="form-control" type="text" name="cp_mondial" value="" id="cp_mondial" placeholder="Code postal du point mondial relay" >
					
					<br>
					<label for="villemr" style="color: #f51111;font-weight: bolder;background-color: #ffe512;">Ville du point mondial relay</label>
					
					<input class="form-control" type="text" name="ville_mondial" value="" id="ville_mondial" placeholder="Ville du point mondial relay" >
					
					<br>
					<label for="paysmr" style="color: #f51111;font-weight: bolder;background-color: #ffe512;">Pays du point mondial relay</label>
					
					<input class=" form-control" type="text" name="pays_mondial" value="" id="pays_mondial" placeholder="Pays du point mondial relay" >
				</div>

Les erreurs et l'envois par mail sont traites de cette manière 

<script src=""></script>
<!-- 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;
	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>

Mais a présent je souhaiterais  intégrer le widjet de mondial relay dont le code est el suivant 

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

l'intégration après pas mal de difficultés fonctionnent  correctement 

je voudrais a a présent pouvoir utiliser les données de ce widjet qui sont donc le nom , l'adresse , la ville , le pays et l'id  

J'ai donc commencé avec le nom de mondial relay

j'ai mis en commentaire l'input du nom de mondial relay dans mon formulaire en commentaire pour pouvoir utiliser celui de mondial relay

Mais mon bon de commande ne s'envois plus 

Je n'ai aucune erreur dans la console 

Merci de l'aide 

3 réponses

flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 187
29 juil. 2022 à 22:04

Apres de nombreuses recherches j'ai enfin trouve quelques chose

pour le input par exemple pour le nom de mondial relay voici le code

<input type="text"  id="cb_Nom" value='<span id="cb_Nom"></span>' name="cb_Nom"> 

du cote de javascript 

      function(data) {
      
        //span
$("#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);
//input hidden
$("[name='ID']").val(data.ID);
$("[name='cb_Nom']").val(data.Nom);
$("[name='ADRESSE']").val(data.Adresse1 + ' ' + data.Adresse2);
$("[name='CP']").val(data.CP);
$("[name='VILLE']").val(data.Ville);
$("[name='PAYS']").val(data.Pays);
      }

Mais la valeur qui est retournée dans mon mail est 

nom de mondial_relay: undefined

Aucune erreur dans la console ...

1
flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 187
Modifié le 29 juil. 2022 à 19:19

apparemment ou cela coince c'est au niveau de mon formulaire ou j'ai besoin pour le traitement de mes données de l'attribut name

et que le widjet de mondial relay me donne une valeur de l'id

j'ai essaye de modifier ce code en remplaçant ID par name 

Mais cela ne fonctionne pas 

Lorsque je choisis un point mondial relay le champ reste vide

<div>data.Nom = <span name="cb_Nom"></span></div>
0
flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 187
29 juil. 2022 à 23:46

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

0