0

いくつかのデータを収集するフォームがあります。最も重要なのは、緯度と経度を取得するためにジオコーディングする必要がある住所です。

ユーザーが次のようなものを入力するとします。

123 main st
SomEwheRE, NY 12345

私のクライアント側の javasript は Google Geocoding サービスにアクセスし、その住所の緯度と経度を取得しようとします。その見返りに、適切な形式のアドレスを含む追加情報も返されます。

123 Main St
Somewhere, NY 12345

私がやりたいのは、それぞれのテキストボックスの値を置き換えて、ユーザーがデータが適切であることを確認し、最終的に送信できるようにするjQuery.post("My/Controller/", myJSONData, function(){});ことですが、奇妙な動作が発生しています。

住所を入力し、郵便番号を含めないと (データベースでは必須ですが、住所をジオコーディングする必要はありません)、検証エラーが発生します。問題は、ジオコード サービスから情報を取得してテキスト ボックスの値を置き換えるまで検証を延期したいということです。

今、住所の一部だけを入力して [送信] をクリックすると、次のようになります。

  1. 欠落している必須フィールドで検証エラーが発生し、すべてのテキスト ボックスが空白になります
  2. 送信をもう一度押すと、今度はテキストボックスにジオコーディングされた情報が正しく入力されますが、すべてのフィールドで検証エラーが発生します。
  3. 送信を 3 回押すと、検証エラーがなくなり、すべてが期待どおりになります。この時点で、フォームが有効であると見なし、 を に許可したいと思いPOSTますController。

コード：

    $(document).ready(function () {
    $("form").submit(function (e) {
        e.preventDefault();
        var geoCodedAddress = geoCodeAddress($("#Address1").val(), $("#City").val(), $("#State").val());
        console.log(geoCodedAddress);
        geoCodedAddress.Name = $("#Name").val();
        geoCodedAddress.Phone = $("#Phone").val();
        $("#Address1").val(geoCodedAddress.Address1);
        $("#City").val(geoCodedAddress.City);
        $("#State").val(geoCodedAddress.State);
        $("#ZipCode").val(geoCodedAddress.ZipCode);
    });
});

geoCodeAddress()必要なフィールドが入力された JSON オブジェクトを返し、それが機能します。問題は、私の無能さと私が投稿したコード ブロックの間のどこかにあると思います。

4

1 に答える 1

0

さて、いろいろ悩んだ末にたどり着いたのがこれ。基本的に、誰かが送信 (または入力) を押すと、フォームの送信を停止し (によってe.preventDefault())、有効かどうかを確認します。フォーム データが有効な場合は、ユーザーが入力した内容を処理し、取得したデータをフォーム フィールドに入力します (これは何も機能せず、フォーム内の新しいデータをフラッシュするだけです)。フォームの送信方法がわからなかったので、 を使用して自分で投稿し$.post()ました。より良い方法がある場合は、コメントまたは回答を残してください。投票します。ここに私の完全なコードがあります:

    $(document).ready(function () {
    $("form").submit(function (e) {
        e.preventDefault();
        if ($("form").valid()) {
            geoCodeAddress($("#Address1").val(), $("#City").val(), $("#State").val(), function (geoCodedAddress) {
                geoCodedAddress.Name = $("#Name").val();
                $("#Address1").val(geoCodedAddress.Address1);
                $("#City").val(geoCodedAddress.City);
                $("#State").val(geoCodedAddress.State);
                $("#ZipCode").val(geoCodedAddress.ZipCode);
                $("#Longitude").val(geoCodedAddress.Longitude);
                $("#Latitude").val(geoCodedAddress.Latitude);
                $.post("/Controller/Action/", geoCodedAddress, function () { $(window).attr("location", "/Controller/"); });
            });
        }
    });
});
于 2012-04-20T07:03:02.713 に答える