Javascript 如何在onsubmit函数完成之前防止表单提交？_Javascript_Html

Javascript 如何在onsubmit函数完成之前防止表单提交？

javascript html

Javascript 如何在onsubmit函数完成之前防止表单提交？,javascript,html,Javascript,Html,对于我的onsubmit函数，我有一个函数请求用户的位置，并将其位置添加到表单的输入值中。但是，当用户单击“提交”按钮并出现一个弹出窗口，要求用户允许浏览器知道其位置时，我的表单总是在用户回答弹出窗口之前提交。这使得函数未完成，输入值未定义在我的onsubmit函数结束之前，我一直尝试添加一个“return true；”语句，但表单仍然在提交之前提交。我还尝试在函数完成之前添加“e.preventDefault（）；”。到目前为止，没有一种方法有效我的表格：登录 onsubmit函数

对于我的

onsubmit

函数，我有一个函数请求用户的位置，并将其位置添加到表单的输入值中。但是，当用户单击“提交”按钮并出现一个弹出窗口，要求用户允许浏览器知道其位置时，我的表单总是在用户回答弹出窗口之前提交。这使得函数未完成，输入值未定义

在我的

onsubmit

函数结束之前，我一直尝试添加一个“return true；”语句，但表单仍然在提交之前提交。我还尝试在函数完成之前添加“e.preventDefault（）；”。到目前为止，没有一种方法有效

我的表格：


登录

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);
}

使用id和事件侦听器，防止提交时出现默认值，将函数包装为承诺，并且仅在结果为真时提交：

函数getLocation（e）{ //创造新的承诺返回新承诺（解决=>{ if（导航器.地理位置）{ //由于getCurrentPosition是异步的，请在onsuccess回调中解析。 navigator.geolocation.getCurrentPosition( 位置=>{ onGeoSuccess（职位）； //在此处解析将返回到。然后（）解决（）； }, 错误=>{ 错误；解决（）； } ); }否则{ 警报（“此浏览器不支持地理位置”）； //返回到解决（）； } }); } 功能onGeoSuccess（位置）{ document.getElementById（“currentUserLattitude”）.value= 位置坐标纬度； document.getElementById（“CurrentUserLength”）.value= 位置、坐标、经度； } 函数onGeoError（err）{ 警报（“错误代码”+错误代码+”+错误消息）； } document.getElementById（“表单”）.addEventListener（“提交”，e=>{ //阻止屈服 e、预防默认值（）； //调用函数并等待响应 getLocation（）。然后（（）=>{ //提交表格返回e.target.submit（）； }); });


登录

从使用onSubmit更改为onComplete

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

<body onload="getLocation()">

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

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

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

将您的功能应用于“提交”按钮，然后执行“提交”按钮。form.submit（）仅在完成时才执行？

返回true

将使提交操作成功，从而继续。但是由于

getCurrentPosition

是异步的，因此调用会在您得到响应之前完成。这与OP的实现有什么不同

getCurrentPosition

是异步的，因此

getLocation

将在

onGeoSuccess

或

onGeoError

运行之前达到

返回true

。而且

getLocation（）==true

充其量是多余的。我没有意识到它是异步的，我现在就修复它。这段代码似乎适合我。我在我的浏览器中测试了它——我的兄弟问我是否允许定位，我单击“是”，然后将值发送到正文中。我点击了“否”，但没有收到任何提示。@Kobe我现在开始工作了，safari，非常感谢！由于某种原因，该代码在chrome上不起作用，没有弹出窗口，但数据确实可以通过。尽管如此，您是否可以对代码进行更多的阐述？即使用户拒绝位置请求，我如何允许表单仍然被提交？非常感谢你的帮助，伙计！！没问题！我将立即添加评论，并编辑评论，使其始终提交：）

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