Array
(
)

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

Renato Pimazzoni
   - 16 dez 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:
#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>

Wander :)
   - 16 dez 2014

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

Renato Pimazzoni
   - 19 dez 2014

A solução foi acrescentar:

#Código
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!