Formulário para php com caixa de textos exibindo resultados Javascript

Por favor me ajudem passar as coordenada do JAVASCRIPT  Latitude e Longitude para as respectivas caixas do formulário

<h1>Adicionar local de atendimento</h1>

<p id="demo">Clique no botão para receber as coordenadas:</p>
<script>
var x=document.getElementById("demo");
function getLocation()
 {
 if (navigator.geolocation)
 {
 navigator.geolocation.getCurrentPosition(showPosition,showError);
 }
 else{x.innerHTML="Seu browser não suporta Geolocalização.";}
 }
 </script>
<script>
function showPosition(position)
 {

 x.innerHTML="Latitude: " + position.coords.latitude +
 "<br>Longitude: " + position.coords.longitude;
document.getElementById( "caixaTexto" ).value = html;
 }
function showError(error)
 {
 switch(error.code)
 {
 case error.PERMISSION_DENIED:
 x.innerHTML="Usuário rejeitou a solicitação de Geolocalização."
 break;
 case error.POSITION_UNAVAILABLE:
 x.innerHTML="Localização indisponível."
 break;
 case error.TIMEOUT:
 x.innerHTML="A requisição expirou."
 break;
 case error.UNKNOWN_ERROR:
 x.innerHTML="Algum erro desconhecido aconteceu."
 break;
 }
 }
</script>
<form id="form1" name="form1" method="post" action="?">
 <label for="UF">UF:</label>
 <input type="text" name="UF" id="UF" />
 <label for="cidade">Cidede:</label>
 <input type="text" name="cidade" id="Cidade" />
 <label for="bairro">Bairro:</label>
 <input type="text" name="bairro" id="bairro" />
 <label for="rua">Rua:</label>
 <input type="text" name="rua" id="rua" />
 <label for="latutude">Latitude:</label>
 <input type="text" name="latitude" id="latitude" />
 <label for="longitude">Logitude</label>
 <input type="text" name="longitude" id="longitude" />
 <input name="add_local" type="hidden" id="add_local" value="1" />
 <input type="submit" name="button" id="button" value="cadastrar" />
</form>
<p>&nbsp;</p>
</body>
</html>