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.

Upvotes: 2

Views: 763

Answers (2)

Hulothe
Hulothe

Reputation: 764

It requires two clicks because you are handling click event only when submit has happened. You should handle button change in the success function, or directly in the submitting function.

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

Upvotes: 1

Shakir Ahamed
Shakir Ahamed

Reputation: 1308

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

Upvotes: 1

Related Questions