CODEWITHSUNDEEP
javascript
John P
John P

Reputation: 1221

Javascript show loading icon until a textview is set value

I am using google maps api to load the current geo-location of the user. As it finishes loading, I set the 2 values to 2 hidden html forms:

document.getElementById("latitude").value = position.coords.latitude;
document.getElementById("longitude").value = position.coords.longitude;

If the user presses submit before the values are set, the app crashes. How can I make a loading element until the 2 elements on the page contain the information? Any link or suggestion? Thank you!

Upvotes: 0

Views: 40

Answers (1)

Halcyon
Halcyon

Reputation: 57719

You can stop the form from submitting by cancelling the submit event. Like so:

<form id="my_form">
    <input type="hidden" id="latitude" name="latitude" />
    <input type="hidden" id="longitude" name="longitude" />
    <input type="submit" />
</form>

<script>
document.getElementById("my_form").addEventListener("submit", function (e) {
    if (document.getElementById("latitude").value === "" ||
        document.getElementById("longitude").value === "") {
        e.peventDefault(); // stop the submit
        alert("Please wait for values");
    }
});
</script>

Upvotes: 1

Related Questions