11498 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Données de carte cliquable jquery pour champ de formulaire

Bonjour,

J'essaye de trouver le bon code jquery pour intégrer les valeurs d'une carte cliquable dans le champ d'un formulaire sur la même page.

Le but est de cliquer sur un ou plusieurs départements sur la carte de france et que pour chaque clic le numéro du département en question se retrouve dans le champ texte juste en dessous de la carte.

Pour le moment le Onclick ouvre un popup avec le nom du département et le numéro. Je souhaite juste modifier ce onclick pour qu'il remplisse mon champ "Département".

Dans mon <head> j'ai ce bout de javascript :

<script type="text/javascript">
jQuery(document).ready(function() {
		jQuery('#francemap').vectorMap({
		    map: 'france_fr',
			enableZoom: true,
			hoverOpacity: 0.5,
			hoverColor: true,
			backgroundColor: "#ffffff",
			borderColor: "#000000",
			selectedColor: "red",
			showTooltip: true,
		    onRegionClick: function(element, code, region)
		    {
		        var message = 'D&eacute;partement : "'
		            + region 
		            + '" || Code : "'
		            + code
					+ '"';
             
		        alert(message);
		    }
		});
	});
</script>


Et je voudrait que les numéros de départements apparaissent dans ce champ, séparés par une virgule :

<div class="controls form-inline">
<input class="ff_elem inputbox" type="text" name="ff_nm_departements[]" value="" id="ff_elem622"/>
<label class="control-label" id="bfLabel622" for="ff_elem622" style="margin-left: 10px;">Départements</label>
</div>


Est ce que c'est réalisable ?

Merci pour votre temps Smiley smile
Modifié par io21 (20 Oct 2015 - 15:28)
$( "ff_elem622").val(element +", "+  code +", "+  region);


à la place du contenu dans onRegionClick
Modifié par JENCAL (20 Oct 2015 - 12:13)
Merci pour votre réponse.

Dois-je remplacer $ par jQuery ?

Pouvez vous me préciser ce que vous entendez par "contenu" ? est ce ce qu'il y a entre les { } ?

Cordialement
		    onRegionClick: function(element, code, region)
		    {
		        var message = 'D&eacute;partement : "'
		            + region 
		            + '" || Code : "'
		            + code
					+ '"';
             
		        alert(message);
		    }


devient

		    onRegionClick: function(element, code, region)
		    {
                       $( "#ff_elem622").val(element +", "+  code +", "+  region); // j'avais oublier le # avant.
		    }


le $ ou jQuery c'est la même chose;
Génial !! merci pour votre réactivité.

J'ai adapté votre code à mes besoins, c'est à dire juste le numéro du département.

Par contre si il y a plusieurs départements, comment peut on faire pour qu'ils s'ajoutent à la suite ?

Par exemple : 21, 89, 67
peut être quelque chose comme cela mais c'est un peu sale;

var temp = $("#ff_elem622").val();
temp += ", " code;
$("#ff_elem622").val(temp);

Modifié par JENCAL (20 Oct 2015 - 14:54)
Ok

Du coup j'en suis là :

<script type="text/javascript">
	jQuery(document).ready(function() {
		jQuery('#francemap').vectorMap({
		    map: 'france_fr',
			enableZoom: true,
			hoverOpacity: 0.5,
			hoverColor: true,
			backgroundColor: "#ffffff",
			borderColor: "#000000",
			selectedColor: "red",
			showTooltip: true,
		    onRegionClick: function(element, code, region)
		    {
                     			  var temp = jQuery("#ff_elem622").val();
					  temp += ", " code;
					  jQuery("#ff_elem622").val(temp);
		    }
		});
	});
	</script>


Mais ma carte n'apparait plus du tout...
Modifié par io21 (20 Oct 2015 - 15:03)
mais ça fera pas ce que tu demande,

je vais pas te faire ton code non plus. maintenant tu as les clefs pour

prendre la valeur, l'ajouter, la concaténer, reste à faire ta boucle pour les code départements.
Voici le code final qui fonctionne

<script type="text/javascript">
	jQuery(document).ready(function() {
		jQuery('#francemap').vectorMap({
		    map: 'france_fr',
			enableZoom: true,
			hoverOpacity: 0.5,
			hoverColor: true,
			backgroundColor: "#ffffff",
			borderColor: "#000000",
			selectedColor: "red",
			showTooltip: true,
		    onRegionClick: function(element, code, region)
		    {
                    var temp = jQuery("#ff_elem622").val();
					temp += code + ", ";
					jQuery("#ff_elem622").val(temp);
		    }
		});
	});
	</script>


Merci beaucoup pour le temps que vous m'avez permis de gagner.
Modifié par io21 (20 Oct 2015 - 15:31)
Sujet clos
Aller à