Change value of input form in real time not in on click

hi
i have below code


<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>

</head>

<body>
<form name="myform" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" >

<input type="text" name="lat" value="lat">
<input type="text" name="lng"  value="lng">
<input type="submit" value="submit">
</form>
<div id="googleMap" style="width:500px;height:380px;"></div>



<script>
var map;
var myCenter=new google.maps.LatLng(30.71350399035497,51.57257080078125);
var i;
var j;
function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:10,
  mapTypeId:google.maps.MapTypeId.HYBRID
  };

  map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

  google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng);
  });
}

var i;
var j;
function placeMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map,
  });
  var infowindow = new google.maps.InfoWindow({
    content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
  });
  infowindow.open(map,marker);
  i = location.lat();
  j = location.lng();

  
}
 
google.maps.event.addDomListener(window, 'load', initialize);


</script>
<script>

oFormObject = document.forms['myform'];

oFormObject.elements["lat"].value = i;
oFormObject.elements["lng"].value = j;
myobj=document.forms["myform"];

</script>
</body>
</html>





i wana show last location of markers in inputs.but its undefined,

and i wana change input with name of “lat” in a time=i and input with name of lng with variable j…but its show undefined… i know i should call a function on some event,but i know to do it with click event,but i need when user click on map…values of two input show last var i and var j,
var i and j is good,but how to put their last value in inputs valu is may problem,can any one correct my code,

how to do it?

some thing like onload event,but how to do it in inputs???

onChange()

1 Like

thanks,

but i done my problem with put onchange=“myfunction”; on div element thatcontain google map,for future problems like this,

below code place last i and j on inputs,



<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>

<script>
var map;
var myCenter=new google.maps.LatLng(30.71350399035497,51.57257080078125);
var i;
var j;
function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:10,
  mapTypeId:google.maps.MapTypeId.HYBRID
  };

  map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

  google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng);
  });
}

var i;
var j;
function placeMarker(location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map,
  });
  var infowindow = new google.maps.InfoWindow({
    content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
  });
  infowindow.open(map,marker);
  i = location.lat();
  j = location.lng();

  
}
 
google.maps.event.addDomListener(window, 'load', initialize);


</script>
<script>
 function myFunction() {
oFormObject = document.forms['myform'];
oFormObject.elements["lat"].value = i;
oFormObject.elements["lng"].value = j;
myobj=document.forms["myform"];
}



</script>
</head>

<body>
<form name="myform" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>"  >

<input type="text" name="lat" value="lat" >
<input type="text" name="lng"  value="lng">
<input type="submit" value="submit">
</form>
<div id="googleMap" style="width:500px;height:380px;" onclick="myFunction()"></div>
<div id="lat">here</div>
<br>
<br>
<br>
<br>    


</body>
</html>



thanks

@pr0c3ss thanks so much for your valuable time

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.