Ajax Question

Submit form using ajax, and then disable button

My script is working, but there is one thing I can not solve.

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


On first click it's submitting the form and on 2nd click it is disabling the button and changing the color to green. Can someone explain to me why it requires two clicks for this function? I want to do both on one click.

Answer

Try this,in your success function disable the button and change the button color like below

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