ajaxを使用してフォームを送信し、ボタンを無効にします。

Question

スクリプトは動作していますが、解決できない問題が1つあります。

$(function() { 
     $('#form_<?php echo $i; ?>').on('submit', function (e) { 
      e.preventDefault(); 
      $.ajax({ 
      type: 'post', 
      url: 'akcija_gaz_2l_insert.php', 
      data: $('#form_<?php echo $i; ?>').serialize(), 
      success: function() { 
       //alert('form is submited'); 
      } 
      }); 
      $("submit, input[type='submit']").click(function() 
      { 
      $(this).prop('disabled', true); 
      $(this).css("color", "#15FF00"); 
      }); 
     }); 
     }); 

最初のクリックではフォームを送信し、2回目のクリックではボタンを無効にして色を緑色に変更します。誰かがこの機能のために2回クリックする必要がある理由を私に説明することはできますか？ワンクリックで両方をやりたい

Answer 1

ボタンを無効にあなたの成功の機能で、これを試してみて、説明のための

success: function(){ 
    $("#bttonID").attr("disabled", true); 
    $("#bttonID").css("background","#15FF00"); 
}, 

Answer 2

submitが発生した場合にのみ、clickイベントを処理するため、2回のクリックが必要です。ボタンの変更はsuccess関数で処理するか、またはsubmitting関数で直接処理する必要があります。

$(function() { 
    $('#form_<?php echo $i; ?>').on('submit', function (e) { 
     e.preventDefault(); 
     $.ajax({ 
     type: 'post', 
     url: 'akcija_gaz_2l_insert.php', 
     data: $('#form_<?php echo $i; ?>').serialize(), 
     success: function() { 
      //alert('form is submited'); 
      $("submit, input[type='submit']").prop('disabled', true); 
      $("submit, input[type='submit']").css("color", "#15FF00"); 
     } 
     }); 
    }); 
    });