Googleジオコーダーサービスから隠し値が更新された後にフォームを送信するにはどうすればよいですか？

Question

住所が入力され、関連する座標をデータベースに保存するフォームがあります。ジオコーディング用に別のボタンがある場合、フォーム内の非表示の値を更新するという点では問題ありません。次に、別の送信ボタンをクリックすると、値が保存されます。

私が本当に望むのは、座標を取得してフォームを送信するボタンをクリックすることです。これらの値が取得され、以下のコードはこれを達成していないようです。

<script type="text/javascript"> 
var geocoder; 
geocoder = new google.maps.Geocoder(); 
function codeAddress() { 
    var address = document.getElementById("place_name").value; 
    geocoder.geocode({ 'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
     document.getElementById("place_coordinates").value = results[0].geometry.location; 
     } else { 
     alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
    // document.forms["new_place"].submit(); 
} 
</script> 
<!-- the form --> 
<input type="button" value="Submit" onclick="codeAddress()"> 

現在フォームが提出が、隠された値がフォームで送信される「place_coordinates」なしています。ヘルプが大変ありがとうございます

Answer 1

デフォルトのフォーム送信をキャンセルしてから、ジオコード呼び出しのコールバック関数から自分自身を送信すると、そのトリックを行う必要があります。

ボタンのクリックを処理するのではなく、フォームのsubmitイベントを処理し、デフォルトの送信をキャンセルするためにfalseを返すようにします（この場合、関数の結果を返します。偽）：ジオコードが失敗した場合、フォームが送信されることはありませんので、私は、あなたの場合/他のOKブランチにフォームの送信を入れていることを

<form onsubmit="return codeAddress(this);"> 

<script> 
var geocoder; 
geocoder = new google.maps.Geocoder(); 
function codeAddress(theForm) { 
    var address = document.getElementById("place_name").value; 
    geocoder.geocode({ 'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
     document.getElementById("place_coordinates").value = results[0].geometry.location; 
     theForm.submit(); 
     } else { 
     alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 

    return false; 
} 
</script> 

注意。明らかに、else caseの後に移動することはできますが、いずれかの方法で実行して提出したい場合は、コールバック関数で引き続き実行することができます。

また、フォームへの参照を関数に渡していることに注意してください。これを行う必要はありませんが、それはもっとうまくいくと思います。