提交表单用ajax，然后禁用按钮

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