Question

我使用ASP.NET网页创建了一个简单的网站（使用Razor标记）。我有一个包含两个隐藏字段的表单：latitude和longitude。在我的JS脚本中，我使用HTML5 Geolocation API来获取以度（纬度和经度）表示的用户位置，然后尝试将这些值分配给表单中的两个隐藏字段，然后再将它们发送到服务器。

问题是我使用getElementById().value方法来分配这些值，但它似乎不起作用！我可以使用简单的alert()消息在脚本中的相同位置打印出值，因此我很确定它是getElementById().value不起作用。

以下是我的表单代码：

<form  id="locationForm" method="post" action="" onsubmit="return getLocation()">
Search for cinema showings in my area<br />
<input type="hidden" name="latitude" id="latitude" value="" />
<input type="hidden" name="longitude" id="longitude" value=""/>
<input type="submit" value="Submit" class="submit"/>
</form>

这是我脚本的代码：

<script>
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    }
    else {
        alert("Geolocation is not supported by this browser.");

    }
}
function showPosition(position) {

    var lat = position.coords.latitude;
    alert("lat is: " + lat);

    document.getElementById('latitude').value = position.coords.latitude;

    document.getElementById("longitude").value = position.coords.longitude;
}

Answer 1

我为我的英语道歉......我的母语是葡萄牙语/巴西语。

我有同样的问题。我必须在许多浏览器和Windows版本中检查我的代码。

文件。 GetElementById（HIDDENFormVariable）。 value ='string'不在...中运行。

IE 11 Windows 7：不运行
Mozila Windows 7：不运行
Chrome 37.0.2062.124 Vista Business：不运行
Chrome 38.0.2125 Windows 7：无法运行
Chrome 38.0.2125 Windows XP：无法运行
IE 9 Windows Vista Business：运行
IE 7 Windows XP：运行

但是......

在Windows资源管理器11中，如果您更改[Tools] > [Compatibility View Settings]并将您的站点包含在列表中，它将在Windows 7中使用IE 11运行Ok。然后不是错误，但它已被IE更改。 Chrome不接受更改 - 我已检查过的任何Windows或旧版本中的隐藏输入。

我从另一个方面解决了这个问题

我在哪里 <input type="HIDDEN">

我改为

<DIV STYLE="visibility:hidden"> <input type="TEXT"> </DIV>

文本输入可以通过javascript更改，在DIV内部不需要在屏幕上显示。

Answer 2

问题是javascript异步运行。因此，表单提交处理程序不会等待geolocation.getCurrentPosition()方法完成并执行它的成功回调 - 您将值分配给输入字段。相反，它继续执行，即：

您已在内联事件处理程序中指定了onsubmit="return getLocation()"，但您没有返回任何内容 - 因此该函数将立即返回undefined并提交<form>，无论其状态如何geolocation方法。

您可以通过阻止使用event.preventDefault()提交表单并在getCurrentPosition()成功回调中手动提交表单来解决此问题，如下所示：

HTML：

<form id="locationForm" method="post" action="">Search for cinema showings in my area
    <br />
    <input type="text" name="latitude" id="latitude" value="" />
    <input type="text" name="longitude" id="longitude" value="" />
    <input type="submit" value="Submit" class="submit" />
</form>

JS：

var form = document.getElementById("locationForm");
form.addEventListener("submit", getLocation);

function getLocation(event) {
    event.preventDefault(); // prevent the form submission
    if (navigator.geolocation) 
        navigator.geolocation.getCurrentPosition(success, error);
     else {
        alert("Geolocation is not supported by this browser");
};

function success(position) {
    var lat = position.coords.latitude,
        long = position.coords.longitude;

    alert("lat is: " + lat + "long is: " + long);
    document.getElementById("latitude").value = lat;
    document.getElementById("longitude").value = long;
    form.submit(); // successfully set the values, submitting the form
}

function error(){
    alert("Unable to retrieve you location");
}

Demo

Answer 3

好的，我解决了这个问题，虽然它可以被认为是一个“黑客”。我创建了一个单独的按钮，调用相同的getLocation函数来更改纬度和经度字段的值，并使用以下方式提交表单：

document.locationForm.submit();

然后在页面加载中我使用jQuery来隐藏提交按钮：

<script>
$(document).ready(function(){
$(".submit").hide();
});
</script>

我注意到，旧脚本确实改变了隐藏字段的值，只是没有将它们发布到服务器上。如果有人发现是什么导致这不起作用是受欢迎的，但现在感谢所有的答案！

Answer 4

如果我没有弄错，那么在表单提交时会触发onsubmit。尝试通过提交按钮onclick

调用该功能

Answer 5

好的我尝试了另一种方法。在表单中添加名称，例如name="geoform"

现在，在showPosition函数中，将最后一行更改为：

document.geoform.latitude.value = position.coords.latitude;
document.geoform.longitude.value = position.coords.longitude;

document.getElementById（）。value在窗体的隐藏字段asp.net网页中不起作用

5 个答案:

Demo