CODEWITHSUNDEEP
javascriptphpjqueryhtmlforms
Karthik Malla
Karthik Malla

Reputation: 5800

JavaScript check if value exits and then submit form

I am using the following code to find the browser location and post it to the next page, but the issue is JavaScript is taking little time to find the browser location and form is posting before the browser location is found, how can I make the form submit only after finding the browser location?

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'];
?>

Upvotes: 0

Views: 315

Answers (3)

HTTP
HTTP

Reputation: 1724

Base from your posted code and with your problem, i think the simplest approach here is to wait for the DOM to be ready afterall the form will not submit until someone clicks the button because of the onclick. I recommend you to wrap your code into document ready.

Upvotes: 0

jeroen
jeroen

Reputation: 91744

geolocation.getCurrentPosition is asynchronous so if you want to wait for things to happen when it is finished, you should put these things in the callback function - showPosition() in your case.

You would have to rewrite what you have a little bit and you should not call your submit function automatically, I assume you only want it when the form is submitted:

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

You can probably clean this up a bit, you tagged your question jQuery but you don't seem to be using it much and your function names and inline event-handlers could be improved / removed.

Upvotes: 0

ynnus
ynnus

Reputation: 241

You could make the submit button disabled by default and remove the disable attribute in case the position was found successfully. So you prevent the form from being submitted before a position is found. But the better way would be to trigger the calculation just by the button and wait for the success response and than do an ajax request with the lan and lon values if needed or just manipulate the dom to display the position without any reload. If your php script is just printing variables which are send by javascript there is no need for the php script. Just print the variables values on the html page using javascript.

Upvotes: 1

Related Questions