Javascript two functions to be executed on one click but after getting values from first function

Question

I need help in creating a javascript logic for geo location and AJAX form submission. I have a search in my website which has a nearby search button.The problem here is I want to submit the keywords through AJAX but at the same time I want to get geo locations from user and send latitude and longitude values along with form but as I press the search Nearby button both the functions executes at same time (the form is submitted directly and the browser prompt the user to allow location but the form is submitted without lat and long values). So kindly help me implement the logic so the browser get the current position values first and then submit them along with keyword enter by user, also I want to execute these functions on one click but not on same time. Below is my code for js and form. Hope I am clear. Thanks in advance

    <form method="post" class="form-inline" onsubmit="download(this['searchQuery'].value, this['Latitude'].value)" id="simple-firm" action="#">
    <div class="form-group">
      <div id="divSample" class="hideClass">Latitude:
        <input type="text" id="Latitude" name="Latitude" value="">
        <br>
        <br>Longitude:
        <input type="text" id="Longitude" name="Longitude" value="">
        <br>
        <input type="text" id="Position1" name="Position1" value="Miami">
      </div>
      <input type="text" class="form-control search-term" placeholder="Keyword"  name="searchQuery" id="searchQuery"> 
      <input onclick="showLocation();" type="submit" class="search-btn" value="Search" id="simple-submit-button">
     </div>
   </form>

JAvascript for geo location using google APIs:

    function showLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(onGeoSuccess, onGeoError);
            } else {
                alert("Your browser or device doesn't support Geolocation");
            }
        }

        // If we have a successful location update
        var lat;
        function onGeoSuccess(event) {
            document.getElementById("Latitude").value = event.coords.latitude;
            document.getElementById("Longitude").value = event.coords.longitude;
            lat  = event.coords.latitude;
            document.getElementById("Position1").value = event.coords.latitude + ", " + event.coords.longitude;
            console.log(document.getElementById("Latitude").value);
        }

        // If something has gone wrong with the geolocation request
        function onGeoError(event) {
            alert("Error code " + event.code + ". " + event.message);
        }


 AJAX:


// AJAX for Simple Form

         $("#simple-submit-button").click(submitform);

function handleResponse(responseObj) {
    console.log("response is "+responseObj.status+" and "+responseObj.text);
    if( responseObj.status == "ok" ) {
       $("#response_element").html(responseObj.text).css("color","green");
    } else {
       $("#response_element").html(responseObj.text).css("color","red");
    }
}


    function submitform() {
        var check = document.getElementById('Latitude').value;
         if(check == ""){
            alert('danger');
        } else{
        var where = $("#simple-firm").attr("action");
        var fi = $("#simple-firm[name=Latitude]").val();
        var fj = $("#simple-firm[name=Longitude]").val();
        var gk = $("#simple-firm[name=searchQuery]").val();
        var what = {Latitude: fi, Longitude: fj, searchQuery: gk, lat};
        $.post( where, what, handleResponse, "json");
        alert('success');
    }
    }

score 0 · Answer 1 · answered May 17 '17 at 08:28

0

You should call the second function from the first function

answered May 17 '17 at 08:28

Thanks for your response.can you explain a little more your answer.. please? – AR Khan May 17 '17 at 08:37
@ARKhan instead of running both functions on the click, run only the first, and get the locations etc. at the end of the function, (within it) call the second function which submits the form. Of course, this is just the basic; you'll want to error handle etc. – May 17 '17 at 08:41

Javascript two functions to be executed on one click but after getting values from first function

1 Answers1