아약스를 사용하여 양식을 제출 한 다음 버튼을 사용하지 않음

Question

스크립트가 작동하지만 해결할 수없는 것이 하나 있습니다.

$(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"); 
      }); 
     }); 
     }); 

첫 번째 클릭에서 양식을 제출하고 두 번째 클릭시 버튼을 비활성화하고 색상을 녹색으로 변경합니다. 누군가이 기능에 대해 두 번의 클릭이 필요한 이유를 설명 할 수 있습니까? 한 번의 클릭으로 두 가지 작업을 수행하고 싶습니다.

Answer 1

버튼을 비활성화 성공 함수에서,이 시도하고 설명은

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

Answer 2

submit이 발생한 경우에만 click 이벤트를 처리하므로 두 번의 클릭이 필요합니다. success 함수에서 버튼 변경을 처리하거나 제출 기능에서 직접 변경해야합니다.

$(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"); 
     } 
     }); 
    }); 
    });