JS表單字段更新提交后

Question

我的表格需要當前的GPS lat和lon 。 這是一個移動應用程序，因此最好的方法是在提交時更新那些表單字段。 這是我在提交表單之前必須觸發該功能的JS：

$('#form2').submit(function(){
  setpos();
  });


function foundLocation(pos) {
    document.getElementById("s_tlat").value = pos.coords.latitude;
    document.getElementById("s_tlon").value = pos.coords.longitude;
    }

function noLocation() {
    document.getElementById("warning").innerHTML = "Could not find your location";
    }

function setpos() {
    navigator.geolocation.getCurrentPosition(updateForm, noLocation);
    };

function updateForm(pos) {
    document.getElementById("s_tlat").value = pos.coords.latitude;
    document.getElementById("s_tlon").value = pos.coords.longitude;
//  alert("129");
    };

經過幾次試驗，我目睹了表單被更新，然后接收post頁面接收到請求，並且完全沒有任何parameters 。 下一行是提供有關params反饋的疑難解答行，它顯示表單設計合理，並為表單中的字段發送空白：

params: {"s_tname"=>"", "s_tlat"=>"", "s_tlon"=>"", "form2Submit"=>"Post New Item"}


<form action="/dorko" method="post" id="form2" name="post_tree">
    blah
    <input name="form2Submit" id="form2Submit" type="submit" value="Post New Item">
</form>

在表單中手動輸入s_tname后，就可以很好地發送了。 lat和lon字段未通過。 我該如何工作？ 我在俯視什么？

Answer 1

getCurrentPosition是異步的。 您需要禁用默認的表單提交，並在更新字段后從回調顯式提交表單。

$('#form2').submit(function(e) {
  e.preventDefault();
  setpos();
});


function foundLocation(pos) {
  document.getElementById("s_tlat").value = pos.coords.latitude;
  document.getElementById("s_tlon").value = pos.coords.longitude;
}

function noLocation() {
  document.getElementById("warning").innerHTML = "Could not find your location";
}

function setpos(form) {
  navigator.geolocation.getCurrentPosition(updateForm, noLocation);
};

function updateForm(pos) {
  document.getElementById("s_tlat").value = pos.coords.latitude;
  document.getElementById("s_tlon").value = pos.coords.longitude;
  document.getElementById("form2").submit();
};