JQuery не представляет форму после модификации

Question

У меня есть следующие формы HTML:

<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> 

и следующий JQuery для обработки формы submition:

$(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; 

      } 
     }); 
    }); 

Вот foundLocation фикцию, которая заполняет в скрытые поля:

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

Что происходит, так это то, что он останавливается в else if и действительно не представляет форму.

Как я могу отправить его после изменения?

Любая помощь или руководство очень ценятся.

Answer 1

Проблема заключается в том, что функция getCurrentPosition является асинхронной, так что вы запуска формы представить до функция вернула значения, представление формы должно быть примерно таким:

$("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

Ваша функция findLocation неверна, поэтому ваше приложение привязано к событию.

ваш foundLocation должно быть:

function foundLocation(position){ 

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

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

} 

И попробуйте подключить событие представить так:

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

     } 
    }); 
});