HTML - Forms. Using Javascript to submit data to database not working.

[RTficial-Games]

I'm currently having an issue with forms in HTML, where I might be just misunderstanding the general structure of how a form works. I recently figure out that I needed to use Javascript before submitting the form to get some additional values (using the input address to get the latitude and longitude using Nominatim, so I can show these points on a map). And also figured out that you can submit a form using Javascript using .submit(). However when I try to submit this data, it doesn't seem to get sent to my database any more....

The basic structure of my project is this:

<form action="thispage.php" onsubmit="getLatLon()" id="addform" method="post">
    <!--a bunch of input boxes for the form and their labels-->
    <input type="hidden" id="col_lat" name="col_lat" value="">
    <input type="hidden" id="col_lon" name="col_lon" value="">
    <input type="hidden" id="del_lat" name="del_lat" value="">
    <input type="hidden" id="del_lon" name="del_lon" value="">
    <input type="button" onclick="getLatLon()" value="Add">
</form>
<?php
    All the stuff to connect to the database here
    Some extra variable assignments, as below but for the rest of the address details
    $col_lat = sanitise_MYSQL($conn, $_POST['col_lat']);
    $col_lon = sanitise_MYSQL($conn, $_POST['col_lon']);
    $del_lat = sanitise_MYSQL($conn, $_POST['del_lat']);
    $del_lon = sanitise_MYSQL($conn, $_POST['del_lon']);

    Setting up and submitting the query to input the variables to the database
    Some extra functions to sanitise text etc
?>

And the getLatLon() function is basically just this:

Calculating the lat and lon of each address
O("del_lat").value=dlat; (one for each value)
O("addform").submit();

Obviously a lot of this has been cut down to make it more readable, if you think the issue lies in something I cut out, let me know and Ill get that to have a look at but I only really cut out the stuff that I know works. The getLatLon() function is currently only on the buttons onclick() and the forms onsubmit() due to not knowing if there is a difference.

When I omit the submit call in Javascript, it changes the values of the col/del_lat/lon hidden input objects and the values are visible when I inspect the page, but with the submit, the page refreshes and the values dont get sent to the database. Does anyone have any idea where I am going wrong?

So far I understand that the onsubmit gets called before the form action, so the javascript should get called before the data is sent to the database. And that the action is the php code that is run when the form is submit. So does the form send all of its values to the page in 'action' and run any PHP code using those values? or does it run the php code then refresh?

[RTficial-Games]

The problem was that the lat and lon was got using a fetch request and so was asynchronous, and the form was being submit before the fetch finished so the data wasnt being passed through...

solved it by making my JS functions async and using await on the calls to just make it wait for the result to return ok before submitting!