Enviar informação de uma DIV Javascript para um FORM POST PHP
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:
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
Curtidas 0
Respostas
Wander Santos
16/12/2014
Cria um input hidden e passa eles valores nela e da um submit depois
GOSTEI 0
Renato Pimazzoni
16/12/2014
A solução foi acrescentar:
e depois:
<input type=hidden name=coordenadas value="coordenadas" />
RESOLVIDO!
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!
GOSTEI 0