Erreur [object HTMLInputElement]

Version imprimable

21/11/2012, 13h26
mikl86

Erreur [object HTMLInputElement]
Bonjour à tous,
Je débute seul en js & php , je suis en train de réaliser ma 1ère appli.

J'essaye de récuperer une valeur javascript et de la mettre dans un input lors d'un clic sur image.
Je parviens à récuperer cette valeur et la placer dans le input, mais pas lors du clic car j'obtiens [object HTMLInputElement] comme value en input.

Plusieurs boutons permettent de remplir l'input en question.

Voici le bout de code qui permet de recuperer la valeur et de remplir mon champs input :
Code:

1 2 3 4 5 6 <script type="text/javascript"> function remplirgeoloc(id,txt) { document.getElementById(id).value = geoloc_input; } </script>
Que signifie [object HTMLInputElement] ?
Quelle pourrait être la cause du probleme ?

Merci d'avance
21/11/2012, 13h34
vermine

Bonjour,

Cela signifie que vous avez récupéré un élément HTML <input>. D'où viennent les paramètres id et txt, ainsi que la variable geoloc_input ?
21/11/2012, 13h43
mikl86

Geoloc_input est une fonction que j'ai créée plus haut dans le code entre <head> et </head>

Code:

document.getElementById("geoloc_input").value = " " + latitude + "+ " + longitude;

J'ai testé cette fonction en placant le input suivant. Celle ci fonctionne puisque les valeurs sont correctement récupérées :

Code:

<input type="text" name="adressegeo" id="geoloc_input" maxlength="8" size="8" value="" />

Mais plusieurs événements doivent pouvoir remplir le input, je ne peux donc pas lui donner l'id geoloc_input.
Par exemple, si l'utilisateur clique sur un bouton représentant sa maison, l'adresse qu'il a saisie lors de son inscription remplira le champs.

id est censé représente le champs à remplir (villedepart), mais si je met villedepart à la place de "id" , cela ne fonctionne plus du tout.
Et txt, je pensais que cela représentait la valeur. Ce parametre est peut etre inutile alors.

Ce que je ne comprends pas, c'est pourquoi le navigateur m'informe qu'un input à été récupéré au lieu d'afficher son contenu .
21/11/2012, 13h51
vermine
Il y a confusion, je pense.

Ici :
Code:

1 2 3 function remplirgeoloc(id,txt) { document.getElementById(id).value = geoloc_input; }
C'est une fonction que vous appelez en lui précisant deux paramètres (id et txt). L'id vous sert à récupérer un champ dont vous voulez modifier la valeur (.value). Par contre vous lui donner comme valeur geoloc_input ?! Et ce dernier est une... fonction ? :?

Reprenons les bases :
- getElementById('id') va chercher un élément selon un 'id'. Cet id est une chaine de caractères mais elle peut être une variable contenant une chaine de caractères ;
- Element.value renvoie la valeur de l'élément pour peu que celui-ci ait une value ;
- document.getElementById('id').value = 'valeur'; donne la valeur 'valeur' au champ d'id 'id'.
21/11/2012, 14h14
mikl86

Et bien en faite c'est la que typiquement tout n'est pas clair pour moi.
Merci énormément pour ces explications.

Par exemple, si je fais :

Code:

<span id="geoloc_input"></span>

Je récupère bien les valeurs attendues (longitude + latitude)

Mais je ne comprends pas comment inclure le résultat d'une fonction dans une fonction effectivement. Puisque l'objectif est de remplir un champs input donc en utilisant une fonction javascript avec le produit d'une fonction javascript (geoloc)
21/11/2012, 14h23
vermine

Pourriez-vous nous donner tout le code, je suis un peu perdu.

Merci une nouvelle fois pour votre aide.
Je met le code allégé, sinon il fait 3 km ;-)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<html>
<head>
<title>geoloc</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function getGeoloc() {
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(
			function(position){
				var latitude = position.coords.latitude;
				var longitude = position.coords.longitude;
				var accuracy = Math.round(position.coords.accuracy);
				document.getElementById("geoloc").innerHTML = " " + latitude + "<br />" + "+ " + longitude  + "<br />";
	            document.getElementById("geoloc_input").value = " " + latitude +  "+ " + longitude;
				document.getElementById("map").innerHTML = "<img src='http://maps.google.com/maps/api/staticmap?
 
center="+latitude+","+longitude+"&zoom=14&size=280x300&markers=color:purple|"+latitude+","+longitude+"&sensor=true'>";
				document.getElementById("geo_input").value = latitude;
				},
 
				function(error) {
				var msg="Erreur de géolocalisation";
				if (error.code==error.TIMEOUT) {msg="Délai dépassé";}
				if (error.code==error.POSITION_UNAVAILABLE) {msg="Position inconnue";}
				if (error.code==error.PERMISSION_DENIED) {msg="Vous avez refusé la géolocalisation";}
				document.getElementById('geoloc').innerHTML = msg;
			       			} 
		);
	} else {
		document.getElementById('geoloc').innerHTML = "Le navigateur n'est pas compatible avec la géolocalisation";
	}
}
</script>
 
<script type="text/javascript">
function remplirgeoloc(id) {
document.getElementById(id).value = geoloc_input;
}
</script>
 
<script type="text/javascript">
function remplirInput(id,txt) {
  document.getElementById(id).value = '<?php echo $donnees['adresse'];?>  <?php echo $donnees['codepostal'];?>  <?php echo $donnees['ville'];?>';
}
</script>
 
</head>
<body onload="initialize()">
<?php include("inc/header.php"); ?>
<form action='traitement' method='POST'>
 
<p> <a href="javascript:getGeoloc()" onclick="document.form.adressedepart.value=this.innerHTML;return false;">
<img src="img/position.jpg" class="alignement" onclick="remplirgeoloc('villedepart');"/></a>
 
<a href="#" onclick="document.form.adressedepart.value=this.innerHTML;return false;"><img src="img/bureau.jpg" onclick="remplirInput('villedepart');"/></a></p>
 
<p><b>Adresse de départ :</b> <span class="legende">(format : adresse code postal ville)</span> <br />
 
<input type='text' name='adressedepart' maxlength='32' size='32' id='villedepart'  value='' onchange="addressChange('villedepart','villearrive')" />
 
<p><b>Adresse d'arrivé :</b> <span class="legende">(format : adresse code postal ville)</span> <br />
<input type='text' name='adressearrive' maxlength='32' size='32' id='villearrive' value= '' onclick="this.value='';" onchange="addressChange('villedepart','villearrive')" /></span></p>
 
 
<p><b>Distance :</b>
<input type="text" name="distancetrajet" id="distance_parcourue_input" maxlength="8" size="8" value="" />km
</p> 
<div align="center"><input type="image" src="img/valider.gif" alt="valider"></div>
 
</form>
</div>
<script type="text/javascript">
addressChange('villedepart','villearrive');
</script>
 
 
</body>
</html>