使用 javascript 设置变量并提交表单

Question

我在一个表单上有三个隐藏变量。我必须使用 javascript 函数设置这些变量，然后我必须重新加载页面，以便我可以将表单变量与一些 php 代码一起使用。

我遇到的问题是，首先，我不知道什么时候应该调用 javascript 函数。我在提交表单后设法调用了它，但随后无法刷新页面。因此，当页面首次加载时，我让 javascript 函数运行但后来我认为隐藏字段的变量设置不正确。

这是我的 javascript 代码，第一个版本。在这个版本中，我有一个 gps 函数，一旦提交表单就会调用它。

<script>

function gps(){
    if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(GetLocation, showError);
    }
    else {
      alert('Geolocation is not supported for this Browser/OS version yet.');
    }

}

function GetLocation(location) {

    document.getElementById("latitude").value=location.coords.latitude;
    document.getElementById("longitude").value=location.coords.longitude;
    document.getElementById("accuracy").value=location.coords.accuracy;

}

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}
</script>

这是我简化的表单代码

<form id="emoteForm" action="" onsubmit="gps(); return false;" target="_top" method="post" name="emote">

<input hidden="true" type="text" id="latitude" name="latitude">
<input hidden="true" type="text" id="longitude" name="longitude">
<input hidden="true" type="text" id="accuracy" name="accuracy">

<h4><input id="but" class="btn btn-primary btn-lg" role="button" value="Submit" type="submit" name="submit" onclick="show('form'); return FALSE;"></h4>

</form>

现在这是本页 html 代码之前的 php 代码，我必须在提交表单后运行。

<?PHP

session_start();

if(!isset($latitude)){
    echo "Do something";
}

if(postvar("submit")=="Submit"){
     echo "Submitting";
}

?>

因此，当我第一次加载页面时，我得到了 "Do something" 文本，这很好，因为纬度变量仍未设置。当我点击提交按钮时，我被要求允许获取我的 GPS 位置，因为它正在调用 gps() 函数。在此函数中，设置了变量纬度、经度和精度。但是随后页面没有重新加载。

然后我如何做这两件事，在提交时设置变量值，然后重新加载页面并保留这些值，以便我可以将它们与我的 php 代码一起使用。有什么想法吗？

编辑 1：

添加了代码来控制位置是否已设置

<script>

function gps(){
    if (navigator.geolocation) {
      if (typeof localStorage['authorizedGeoLocation'] == "undefined" || localStorage['authorizedGeoLocation'] == "0") {
      navigator.geolocation.getCurrentPosition(GetLocation, showError);
      return false;
      }else{
      return true;}
    }
    else {
      alert('Geolocation is not supported for this Browser/OS version yet.');
    }

}

function GetLocation(location) {

    document.getElementById("latitude").value=location.coords.latitude;
    document.getElementById("longitude").value=location.coords.longitude;
    document.getElementById("accuracy").value=location.coords.accuracy;

    localStorage['authorizedGeoLocation'] = 1;

    document.getElementById("emoteForm").submit();

}

}

function showError(error) {
    localStorage['authorizedGeoLocation'] = 0;
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}
</script>

Answer 1

您在使用 onsubmit="gps(); return false;" 时取消了表单提交，这是正确的； getCurrentPosition() 是异步的，所以你必须等到它完成，你不能马上提交表单。

getCurrentPosition() 完成后，将调用 GetLocation() 函数并填写变量。现在您可以提交表单，以便向服务器发出包含新设置的请求值：

function GetLocation(location) {

    document.getElementById("latitude").value=location.coords.latitude;
    document.getElementById("longitude").value=location.coords.longitude;
    document.getElementById("accuracy").value=location.coords.accuracy;

    // submit the form
    document.getElementById('emoteForm').submit();

}

请注意，这可能需要一些时间，因此您可能应该向访问者显示一条消息，表明正在提交表单、禁用提交按钮等。

Answer 2

我终于设法通过在提交表单之前获取位置数据来解决这个问题。于是去掉了gps()功能，正常提交表单。像这样。

<script>

if (navigator.geolocation) {
  document.getElementById("but").disabled = true;
  document.getElementById("but").value = "GPS information is loading";
  navigator.geolocation.getCurrentPosition(GetLocation, showError);
}
else {
  document.getElementById("but").disabled = true;
  document.getElementById("but").value = "No GPS information";
  alert('Geolocation is not supported for this Browser/OS version yet.');
}

function GetLocation(location) {

    document.getElementById("latitude").value=location.coords.latitude;
    document.getElementById("longitude").value=location.coords.longitude;
    document.getElementById("accuracy").value=location.coords.accuracy;

    document.getElementById("but").disabled = false;  
    document.getElementById("but").value = "Submit";
}

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}
</script>

使用 javascript 设置变量并提交表单

Setting a variable with javascript submit with form

html

javascript

php

forms

submit