서식을 제출하기 전에 geolocation이 결과를 반환 할 때까지 기다리십시오.

Question

emtpy가 남아있는 경우 제출 양식에 도시 이름을 채우려고합니다. 나는이 코드를 가지고 사용자가있는 도시를 얻는다.

var form = $("form.js-reservation-form"); 
    form.submit(function(e) {   
      $.getJSON("http://www.geoplugin.net/json.gp?jsoncallback=?", function(data) { 
       console.log(data.geoplugin_city); 
       $("input.geocity").val(data.geoplugin_city);  
      }); 
.... 
rest of code .... 
}); 

문제는 지오 코드가 값을 반환하기 전에 양식이 제출된다는 것입니다. 먼저 geoplugin이 값을 반환하고 나머지 코드를 실행할 때까지 기다릴 코드를 변경하려면 어떻게해야합니까?

Answer 1

어떻게 작동하는지 보여주기 위해 피들을 만듭니다. 때문에 제한 내가 JSON을 조회하지 못할, 그래서 어떻게 작동하는지 보여주고, 그것을 시뮬레이션 - https://jsfiddle.net/skyr9999/w5tun6nz/ 여기

는 HTML입니다 :

<form class="js-reservation-form"> 
    <input class="geocity" type="input"> 
    <button type="button" id="submit-form">Submit</button> 
</form> 

및 JS

$(".js-reservation-form").click(function (e) { 
    $.ajax({ 
     type: "POST", 
     url: "/echo/json/", 
     data: {"json": JSON.stringify({"geoplugin_city": "Magadan"})}, 
     cache: false, 
     success: function (data) { 
      console.log(data.geoplugin_city); 
      $("input.geocity").val(data.geoplugin_city); 
      //$('form.js-reservation-form').submit(); 

     }}); 
}); 

그래서 어떻게 작동하는지

- 우선 일반적인 버튼과 이벤트를 바인드 한 다음 JSON을 얻기 위해 ajax 쿼리를 수행합니다. 필요하지 않은 경우 URL을 사용하고 data을 제거 할 수 있습니다. JSON을로드 한 후 도시의 값은 input.geocity으로 설정되고 jquery가 양식을 제출합니다.

나는 그것이 빠른 오류가 발생할 수 있기 때문에 당신이이 문자열 //$('form.js-reservation-form').submit();