jQuery einreichen nicht die Form nach der Modifikation

Question

Ich habe folgende HTML-Formular:

<form action="../start_timer" class="start_timer" id="447" method="post" accept-charset="utf-8"> 
<input type="hidden" name="shift_id" value="447"> 
<input type="hidden" name="latitude" class="latitude"> 
<input type="hidden" name="longitude" class="longitude"> 
<input type="submit" value="Start"> 
</form> 

und die folgende jQuery das Formular submition zu handhaben:

$(document).ready(function() { 
     $("form.start_timer, .form.end_timer").submit(function(e) { 
      if($(this).children(".latitude").val().length === 0 || $(this).children(".longitude").val().length === 0){ 
       e.preventDefault(); 
       navigator.geolocation.getCurrentPosition(foundLocation, noLocation,{timeout:10000}); 
       submits=0; 
       $(".longitude").change(function(e) { 
        if (submits==0) { 
        $(this).submit(); 
        } 
        submits++; 
       }); 
      }else if($(this).children(".latitude").val().length !== 0 && $(this).children(".longitude").val().length !== 0){ 

       return true; 

      } 
     }); 
    }); 

Hier ist foundLocation fuction, die in der füllt versteckte Felder:

function foundLocation(position){ 

     var lat = position.coords.latitude; 
     var long = position.coords.longitude; 

     if ($(".latitude").val(lat)!="lat") { 
     $(".latitude").val(lat).trigger('change'); 
     } 

     if ($(".longitude").val(long)!="long") { 
     $(".longitude").val(long).trigger('change');   
     } 
} 

Was passiert ist, dass es in derstopptFall und reicht das Formular nicht wirklich ein.

Wie kann ich es tatsächlich nach der Änderung einreichen?

Jede Hilfe oder Anleitung wird sehr geschätzt.

Answer 1

Das Problem ist, dass die getCurrentPosition Funktion Asynchron ist, so dass Sie das Formular auslösen, bevor Die Funktion hat die Werte zurückgegeben, die Formularübergabe sollte in etwa so aussehen:

$("form.start_timer, .form.end_timer").submit(function(e) { 
    var form = $(this); 

    if($(this).children(".latitude").val().length === 0 || $(this).children(".longitude").val().length === 0) { 
     e.preventDefault(); 
     var geolocated = function(position) { 
      foundLocation(position); 
      form.submit(); 
     }; 
     navigator.geolocation.getCurrentPosition(geolocated, noLocation,{timeout:10000}); 
    } else { 
      return true; 
    } 
}); 

Answer 2

Ihre foundLocation-Funktion ist falsch, also auch Ihre Ereignisanlage.

Ihre foundLocation sollte sein:

function foundLocation(position){ 

    var lat = position.coords.latitude; 
    var long = position.coords.longitude; 

    $(".latitude").val(lat); 
    $(".longitude").val(long).trigger('change');   

} 

Und versuchen, die Veranstaltung wie diese einreichen Befestigung:

$(document).ready(function() { 
    $("form.start_timer, .form.end_timer").submit(function(e) { 
     var dat = $(this); 
     if($(this).children(".latitude").val().length === 0 || $(this).children(".longitude").val().length === 0){ 
      e.preventDefault(); 
      dat.on('change', '.longitude, .latitude', function(e) { 
       if(dat.find('.latitude').val() != "" && dat.find('.longitude').val() != "") dat.submit(); 
      }); 
      navigator.geolocation.getCurrentPosition(foundLocation, noLocation,{timeout:10000}); 

     } 
    }); 
});