2013-12-22 162 views
0

我是PHP/HTML5的新手。我發現以下HTML5示例可以獲取設備的經度和緯度。但這只是一個通過單擊按鈕顯示經緯度的例子。PHP/HTML5:將Latitude Shiftcher分配給變量

問題: 我需要的是,當用戶提交表單時,我會將該值插入到MySQL中。 在這一刻,我想獲得設備經緯度並將其作爲變量進行賦值,這樣我就可以同時將這些變量用於INSERT到MySQL中。我已經在我的數據庫中準備了拉特和長的桌子。

請給我一些提示,指導,提示給我,以實現我所需要的。幫助將非常感激。謝謝。

代碼:

<!DOCTYPE html> 
<html> 
<body> 
<p id="demo">Click the button to get your coordinates:</p> 
<button onclick="getLocation()">Try It</button> 
<script> 
var x=document.getElementById("demo"); 
function getLocation() 
    { 
    if (navigator.geolocation) 
    { 
    navigator.geolocation.getCurrentPosition(showPosition); 
    } 
    else{x.innerHTML="Geolocation is not supported by this browser.";} 
    } 
function showPosition(position) 
    { 
    x.innerHTML="Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;  
    } 
</script> 
</body> 
</html> 

形式:

<form id="form1" name="form1" method="post" action="'; 
echo $_SERVER['PHP_SELF']; 
echo '"> 
    <p>Please complete this form and I will contact you as soon as possible. Thank you.</p> 
    <p> 
    <label for="name">Your Name</label> 
    <input type="text" name="name" id="name" /> 
    <label for="phone">Contact Number</label> 
    <input type="text" name="phone" id="phone" /> 
    <label for="message">Message to Owner</label> 
    <textarea name="message" id="message" cols="45" rows="5"></textarea> 
    <input type="submit" name="submit" id="submit" value="Submit Info" /> 
    </p> 
</form> 

新的更簡單的形式與示例的推薦代碼

<!DOCTYPE html> 
<html> 
    <head> 
    <title>FurkidTag.com</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css"> 
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script> 
<title>Sample Form</title> 
</head> 

<body> 

<script> 
$(function() { 

    $("input[name='latitude']").val(position.coords.latitude); 
    $("input[name='longitude']").val(position.coords.longitude) 
}); 
</script> 

<?php 
if(isset($_POST['submit'])) 
{ 
    $name = $_POST['name']; 
    $lat = $_POST['latitude']; 
    $lon = $_POST['longitude']; 
    echo "User Has submitted the form and entered this name : <b> $name </b>"; 
    echo "<br>Latitude: $lat."; 
    echo "<br>Longitude: $lon."; 
} 
?> 
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> 
    <input type='hidden' value='' name='latitude'/> 
    <input type='hidden' value='' name='longitude'/> 
    <input type="text" name="name"><br> 
    <input type="submit" name="submit" value="Submit Form"><br> 
</form> 
</body> 
</html> 

回答

0

你需要使用AJAX將值傳遞給另一個PHP頁面,在這個例子中,我使用Jquery,使Ajax請求

$(function() { 
    $.get('getPosition.php', { 
    Latitude: position.coords.latitude, 
    Longitude: position.coords.longitude 
    } 
}); 

在你getPosition.php你必須得到這樣的價值觀:

$latitude = (isset($_GET['latitude']) && is_numeric($_GET['latitude']) ? $_GET['latitude'] : NULL; 
$longitude = (isset($_GET['longitude']) && is_numeric($_GET['longitude']) ? $_GET['longitude'] : NULL; 

,讓你的SQL東西

UPDATE 要將值綁定到你的輸入表單

$(function() { 

    $("input[name='latitude']").val(position.coords.latitude); 
    $("input[name='longitude']").val(position.coords.longitude) 
}); 

在你的窗體添加兩個開關輸入型隱藏

<input type='hidden' value='' name='latitude'/> 
<input type='hidden' value='' name='longitude'/> 

更新2

<?php 
if (isset($_POST['submit'])) { 
    $name = $_POST['name']; 
    $lat = $_POST['latitude']; 
    $lon = $_POST['longitude']; 
    echo "User Has submitted the form and entered this name : <b> $name </b>"; 
    echo "<br>Latitude: $lat."; 
    echo "<br>Longitude: $lon."; 
} 
?> 
<!DOCTYPE html> 
<html> 
    <head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script> 
     var x = document.getElementById("demo"); 
     function getLocation() 
     { 
     if (navigator.geolocation) 
     { 
      navigator.geolocation.getCurrentPosition(bindPosition); 
     } 
     else { 
      x.innerHTML = "Geolocation is not supported by this browser."; 
     } 
     } 
     function bindPosition(position) { 
     $("input[name='latitude']").val(position.coords.latitude); 
     $("input[name='longitude']").val(position.coords.longitude); 
     } 
    </script> 
    </head> 
    <body onload="getLocation()"> 


    <form id="form1" name="form1" method="post" action=""> 
     <p>Please complete this form and I will contact you as soon as possible. Thank you.</p> 
     <p> 
     <label for="name">Your Name</label> 
     <input type="text" name="name" id="name" /> 
     <label for="phone">Contact Number</label> 
     <input type="text" name="phone" id="phone" /> 
     <label for="message">Message to Owner</label> 
     <textarea name="message" id="message" cols="45" rows="5"></textarea> 
     <input type='hidden' value='' name='latitude'/> 
     <input type='hidden' value='' name='longitude'/> 
     <input type="submit" name="submit" id="submit" value="Submit Info" /> 
     </p> 
    </form> 

    </body> 
</html> 
+0

嗨@EmilioGort,謝謝你這麼多的例子。但是我的表單操作是_SELF。所以我假設我需要在提交表單時同時POST/GET值。 – MarkZ

+0

您可以在提交表單時提供POST/GET lat/long值的一些示例嗎? – MarkZ

+0

我已編輯添加了表單的帖子。 – MarkZ