JavaScript检查值是否存在,然后提交表单


JavaScript check if value exits and then submit form

我使用以下代码来查找浏览器位置并将其发布到下一页,但问题是JavaScript查找浏览器位置的时间很短,表单在找到浏览器位置之前就已经发布了,我如何才能在找到浏览器位置后才提交表单?

newtest1.php

<html>
<head>
<script>
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    }
}
function showPosition(position) {
    document.getElementById("getlat").value = position.coords.latitude;
    document.getElementById("getlon").value = position.coords.longitude;
}
getLocation();
</script>
</head>
<body>
<form id="myForm" method="post" action="newtest2.php">
<input type="text" id="getlat" name="getlat" /> 
<input type="text" id="getlon" name="getlon" />
<input type="button" name="myformer" onclick="myFunction();" />
</form>
<script>
function myFunction() {
    document.getElementById("myForm").submit();
}
myFunction();
</script>
</body>
</html>

newtest2.php

<?php
echo $_POST['getlat'];
echo $_POST['getlon'];
?>

您可以默认禁用提交按钮,并在成功找到位置的情况下删除disable属性。因此,您可以防止在找到职位之前提交表格。但更好的方法是只需按下按钮即可触发计算并等待成功响应,而不是在需要时使用lan和lon值执行ajax请求,或者只需操纵dom来显示位置而不进行任何重新加载。如果您的php脚本只是打印由javascript发送的变量,则不需要php脚本。只需使用javascript在html页面上打印变量值。

geolocation.getCurrentPosition是异步的,所以如果你想等待事情完成时发生,你应该把这些事情放在回调函数中——在你的情况下是showPosition()

你必须稍微重写一下你所拥有的,你不应该自动调用你的提交函数,我想你只需要在表单提交时使用它:

function myFunction() {
    document.getElementById("myForm").submit();
}
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    }
}
function showPosition(position) {
    document.getElementById("getlat").value = position.coords.latitude;
    document.getElementById("getlon").value = position.coords.longitude;
    // now submit the form as the position has been determined
    myFunction();
}
$('#myForm').on('submit', function(e) {
  e.preventDefault();
  getLocation();
});

你可能可以稍微清理一下,你标记了你的问题jQuery,但你似乎不怎么使用它,你的函数名和内联事件处理程序可以改进/删除。

根据您发布的代码和您的问题,我认为这里最简单的方法是等待DOM准备好,毕竟由于onclick的原因,只有有人点击按钮才能提交表单。我建议您将代码封装到document ready中。