4

フォームを送信する前にjqueryコードを実行する必要がありますが、いくつかの問題があるようです。

あなたがこれを推薦するために急ぐ前にちょうど私を聞いてください：

$(function() {
     $('form').submit( function() {
         /* some code */
         return true;
     });
});

「送信」ボタンを押した後、最初にgoogle APIを使用して住所の経度と緯度の変数を計算してから、フォームを送信する必要があります。それには、コールバック関数で応答をリッスンする必要があります。

私がこれまでに持っているコードは次のようになります。

  $("form input:submit").click(function(e){
      e.preventDefault();
      var address = $(this).find('.address').val();
      geocoder.geocode( { 'address': unescape(address)}, function(results, status) 
      {
          if (status == google.maps.GeocoderStatus.OK) 
          {
            $(".latSelector input:hidden").val(results[0].geometry.location.lat());
            $(".lngSelector input:hidden").val(results[0].geometry.location.lng());
            $("form").submit();
          }
       });  
  });

「submit」関数を使用して同じことを行うと、コールバック関数がトリガーされる前にフォームが送信され、コードビハインドが欠落した値で実行されます。

上記のコードのようにボタンの「クリック」イベントを使用して手動で送信すると、コードは正しく実行されますが、送信によってフォームの背後にあるコードがトリガーされません。

私はこれを機能させることに近いと思いますが、コードを実行し、コールバック値を処理してからフォームを正しく送信し、コードビハインドが実行される魔法の組み合わせを見つけることができません。

4

4 に答える 4

12

ボタンsubmitのイベントではなく、フォームのイベントを使用する必要があります。click一部のブラウザーでは、フォーム内のフィールドにフォーカスがあるときに Enter キーを押すだけで、送信ボタンを使用せずにフォームを送信できます。

メソッドはフォームのpreventDefault送信を停止するため、後で送信できます。

$("form").submit(function(e){
  e.preventDefault();
  var address = $(this).find('.address').val();
  geocoder.geocode( { 'address': unescape(address)}, function(results, status) 
  {
      if (status == google.maps.GeocoderStatus.OK) 
      {
        $(".latSelector input:hidden").val(results[0].geometry.location.lat());
        $(".lngSelector input:hidden").val(results[0].geometry.location.lng());
        $("form")[0].submit();
      }
   });  
});

編集：

ボタンを使用してフォームを送信するには、フォームが送信された理由を追跡する必要があります。

var reason = 'user';

$("form").submit(function(e){
  if (reason == 'user') {
    e.preventDefault();
    var address = $(this).find('.address').val();
    geocoder.geocode( { 'address': unescape(address)}, function(results, status) 
    {
      if (status == google.maps.GeocoderStatus.OK) 
      {
        $(".latSelector input:hidden").val(results[0].geometry.location.lat());
        $(".lngSelector input:hidden").val(results[0].geometry.location.lng());
        reason = 'callback';
        $("form input:submit").click();
      }
    });
  }
});
于 2013-01-09T16:53:05.047 に答える
2

単に：

  1. コールバック関数を呼び出します。
  2. サブミットがユーザーによってスローされた場合 (つまり、サブミットしない場合) は false を返します。
  3. コールバックの最後に、トリガー関数で送信を行うコードを配置します

高速なサンプル コード:

$('elem').click(function{
  callback();
  return false;
})

callback()フォームを送信する必要があります。これは、トランジションを実行する場合にも有効です。

あなたのコメントに答えるために編集 してください 完全を期すために、私の答えの完全な例を提供します。Guffaが示唆しているように、私の答えにはそれ以上の変数は必要ないことを考慮してください。

ここで確認できます。コードは次のとおりです。

$('input[type="submit"]').click(function(e){
    var address = 'London, UK';
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode( { 'address': unescape(address)}, function(results, status){
      if (status == google.maps.GeocoderStatus.OK) 
      {
        $(".latSelector input:hidden").val(results[0].geometry.location.lat());
        $(".lngSelector input:hidden").val(results[0].geometry.location.lng());
        alert("DATA TAKEN BEFORE TO SUBMIT");
        $('form').submit();
      }
    });

  return false;
});

最後に、共通ユーザーが次のようにすることを考慮してください。

  1. ユーザーが送信ボタンをクリックする
  2. クライアントがコールバックが完了するのを待っている間、ユーザーは後続のページを表示することを想定しています。
  3. そのため、せっかちなユーザーは送信ボタンをもう一度クリックします。

したがって、「クリック」イベントがユーザーによってトリガーされた後、送信ボタンを無効にすることもお勧めします。

最後に、このようなイベントの伝播を停止するために、return false代わりに常に使用することをお勧めします。理由については、こちらをご覧ください。preventDefault()

于 2013-01-09T16:42:34.653 に答える
1

Guffa の最初の送信ループを回避するための、おそらくより単純な解決策を考え出しました。

コールバックが終了したら、 ( unbind () または off() を使用して) 送信ハンドラーのバインドを解除し、フォームの送信を実行します。ループが壊れています;)

于 2013-05-05T21:20:00.233 に答える
0

これは、任意の標準的な許容される慣行に反する可能性がありますが、次のような方法でエンターキーを介したフォームの送信を防ぐだけです:

$('form').bind("keyup keypress", function(e) {
  var pressedKey = e.keyCode || e.which; 
  if (pressedKey  == 13) {               
    e.preventDefault();
    return false;
  }
});

次に、実際の送信ボタンを display:none に設定し、要素を使用して、Guffa の提案に従って .click() を使用して、質問にあった元のコードを起動します。無関係な User/Callback 条件付きロジックなしで取引を完了しました。

$("button#Submit").click(function(){
      var address = $("form").find('.address').val();
      geocoder.geocode( { 'address': unescape(address)}, function(results, status) 
      {
          if (status == google.maps.GeocoderStatus.OK) 
          {
            $(".latSelector input:hidden").val(results[0].geometry.location.lat());
            $(".lngSelector input:hidden").val(results[0].geometry.location.lng());
            $("form input:submit").click();
          }
       });  
  });
于 2014-04-29T20:47:42.927 に答える