javascript - 提交后更新 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 页面收到请求并且根本没有参数。下一行是故障排除行，提供有关 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();
};