Enviar informa��o de uma DIV Javascript para um FORM POST PHP

16/12/2014

Estou desenvolvendo um sistema de registro de ocorr�ncias, em que o usu�rio seleciona um ponto no mapa (utilizando geocode maps google api v3), e preciso enviar atrav�s de um formul�rio POST para tratar via PHP as informa��es de latitude e longitude que s�o geradas em um campo Javascript DIV <div name="info" id="info">:

Segue p�gina de exemplo:

http://www.usp.br/pusp-p/teste2.php

Segue c�digo:



<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'pt-BR'}
</script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();

function geocodePosition(pos) {
  geocoder.geocode({
    latLng: pos
  }, function(responses) {
    if (responses && responses.length > 0) {
      updateMarkerAddress(responses[0].formatted_address);
    } else {
      updateMarkerAddress('Cannot determine address at this location.');
    }
  });
}

function updateMarkerStatus(str) {
  document.getElementById('markerStatus').innerHTML = str;
}

function updateMarkerPosition(latLng) {
  document.getElementById('info').innerHTML = [
    latLng.lat(),
    latLng.lng()
  ].join(', ');
}

function updateMarkerAddress(str) {
  document.getElementById('address').innerHTML = str;
}

function initialize() {
  var latLng = new google.maps.LatLng(-21.960008529500104, -47.46620631086728);
  var latLngCen = new google.maps.LatLng(-21.960008529500104, -47.46620631086728);
  var map = new google.maps.Map(document.getElementById('mapCanvas'), {
    zoom: 17,
    center: latLngCen,
    mapTypeId: google.maps.MapTypeId.HYBRID
  });
  var marker = new google.maps.Marker({
    position: latLng,
    title: 'Arraste-me at� o local desejado',
    map: map,
    draggable: true
  });
  
  // Update current position info.
  updateMarkerPosition(latLng);
  geocodePosition(latLng);
  
  var geo= geocodePosition(latLng);
   
  // Add dragging event listeners.
  google.maps.event.addListener(marker, 'dragstart', function() {
    updateMarkerAddress('Arrastando...');
  });
  
  google.maps.event.addListener(marker, 'drag', function() {
    updateMarkerStatus('Arrastando...');
    updateMarkerPosition(marker.getPosition());
  });
  
  google.maps.event.addListener(marker, 'dragend', function() {
    updateMarkerStatus('Inativo');
    geocodePosition(marker.getPosition());
  });
}

// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>

<script type="text/javascript">
window.___gcfg = {lang: 'pt-br'};
(function() 
{var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();</script>
</head>

<body>
<form action="" method="post" enctype="multipart/form-data" name="" id=""  onSubmit="return validar()">

<h1 class="titulo1">Registro de Ocorr�ncias - PUSP-P</h1>
<p class="texto_site"><b>1. Local da Ocorr�ncia:<br />
  <br />
</b><i>Clique e arraste o marcador.<br />
</i>
  <style>
  #mapCanvas {
    width: 320px;
    height: 280px;
    float: left;
  }
  #infoPanel {
    float: left;
    margin-left: 10px;
	width:200px;
	height:500px;
  }
  #infoPanel div {
    margin-bottom: 5px;
  }
        </style><br>
</p>
<div id="mapCanvas"></div>
<div id="infoPanel">
  <div id="markerStatus"></div>
  <p class="texto_site"><b>Posi��o Atual:</b>
   <div name="info" id="info">
  </p>
  <p class="texto_site"> </p>
  <div name="info" id="info"></div>
  
</div>
<p>

</p>
<p>
  <input name="enviar" type="submit" id="enviar" value="Enviar" />
</p>
</form>
</body>
</html>

Renato Pimazzoni

Curtir t�pico + 0

Responder

Posts

16/12/2014

Wander Santos

Cria um input hidden e passa eles valores nela e da um submit depois

Responder

Gostei + 0

19/12/2014

Renato Pimazzoni

A solu��o foi acrescentar:

function updateMarkerPosition(latLng) {
  document.getElementById('info').innerHTML = [
    latLng.lat(),
    latLng.lng()
  ].join(', ');
document.all("coordenadas").value = "" + latLng.lat() + "," + latLng.lng();
}

e depois:

<input type=hidden name=coordenadas value="coordenadas" />

RESOLVIDO!

Responder

Gostei + 0