Question

对于我的onsubmit函数，我有一个请求用户位置并将其位置添加到表单输入值的函数。但是，当用户单击“提交”按钮并出现一个弹出窗口并要求用户允许浏览器知道其位置时，我的表单总是在用户可以回答弹出窗口之前提交。这样会使函数无法完成，并且输入值变得不确定。

我尝试添加“ return true”；语句，直到我的onsubmit函数结束为止，但该表单仍要事先提交。我也尝试添加“ e.preventDefault（）;”在我的功能完成之前。到目前为止，没有一种方法有效……

我的表单：

<form action="/login" onsubmit="getLocation()" method="POST">
    <button type="submit" class="btn btn-dark">Login</button>
    <input id="currentUserLattitude" type=hidden name="currentLocation" value="placeholder">
    <input id="currentUserLongitude" type=hidden name="currentLocation" value="placeholder">
</form>

onsubmit函数：

function getLocation(e) {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(onGeoSuccess, onGeoError);
        return true;
    } else {
        alert("Geolocation is not supported by this browser.");
    }
}

function onGeoSuccess(position) {
    document.getElementById("currentUserLattitude").value = position.coords.latitude;
    document.getElementById("currentUserLongitude").value = position.coords.longitude;
}

function onGeoError(err) {
    alert("Error code " + err.code + ". " + err.message);
}

Answer 1

使用ID和事件侦听器，防止默认提交，将函数包装在Promise中，仅在结果为true时提交：

function getLocation(e) {
  // Create new promise
  return new Promise(resolve => {
    if (navigator.geolocation) {
      // Since getCurrentPosition is asynchronous, resolve in the onsuccess callback.
      navigator.geolocation.getCurrentPosition(
        position => {
          onGeoSuccess(position);
          // Resolving here will return back to the .then()
          resolve();
        },
        error => {
          onGeoError(error);
          resolve();
        }
      );
    } else {
      alert("Geolocation is not supported by this browser.");
      // Return to the .then()
      resolve();
    }
  });
}

function onGeoSuccess(position) {
  document.getElementById("currentUserLattitude").value =
    position.coords.latitude;
  document.getElementById("currentUserLongitude").value =
    position.coords.longitude;
}

function onGeoError(err) {
  alert("Error code " + err.code + ". " + err.message);
}

document.getElementById("form").addEventListener("submit", e => {
  // Prevent submission
  e.preventDefault();
  // Call your function and wait for a response
  getLocation().then(() => {
    // Submit the form
    return e.target.submit();
  });
});

<form id="form" action="/login" onsubmit="getLocation()" method="POST">

  <button type="submit" class="btn btn-dark">Login</button>
  <input id="currentUserLattitude" type=hidden name="currentLocation" value="placeholder">
  <input id="currentUserLongitude" type=hidden name="currentLocation" value="placeholder">

</form>

Answer 2

首先，您应该请求页面加载权限：

<body onload="getLocation()">

第二，您应该使用一个标志（变量）来跟踪地理位置成功的状态。最后，如果没有错误，则可以提交表单了。

var anErrorOccured = true;

function getLocation ()
{
    if (navigator.geolocation)
    {
        navigator.geolocation.getCurrentPosition (onGeoSuccess);
    }
}

function onGeoSuccess(position)
{
    document.getElementById("currentUserLattitude").value = position.coords.latitude;
    document.getElementById("currentUserLongitude").value = position.coords.longitude;

    anErrorOccured = false;
}

function submitData ()
{
    if (anErrorOccured)
    {
        return false;
    }
    else
    {
        return true;
    }
}

基本上，anErrorOccured变量设置为true，只有成功设置位置后，您才将其标记为false。并且在将某些函数附加到onsubmit事件上时，不要忘记使用'return'：

<form action="/login" onsubmit="return submitData()" method="POST">

您还可以基于此标志禁用提交按钮，以更加方便用户使用。

Answer 3

从使用onSubmit更改为onComplete

在onsubmit功能完成之前，如何防止表单提交？

3 个答案: