Submit form using ajax, and then disable button

Question

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.

Shakir Ahamed · Accepted Answer · 2016-08-22 08:39:29Z

1

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

answered Aug 22, 2016 at 8:39

Shakir Ahamed

1,3163 gold badges16 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shakir Ahamed Over a year ago

no prob mate and don't forget to make it as write answer

Stefan Michelangelo Mihajlovic Over a year ago

dont understand what u mean by write answer? @shakir

Shakir Ahamed Over a year ago

their is write mark below the vote you have to click that to accept the answer meta.stackexchange.com/questions/5234/…

Hulothe · Accepted Answer · 2016-08-22 08:44:59Z

1

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

edited Aug 22, 2016 at 8:44

answered Aug 22, 2016 at 8:39

Hulothe

7641 gold badge6 silver badges17 bronze badges

1 Comment

Stefan Michelangelo Mihajlovic Over a year ago

Thxs for explanation @hulothe

Collectives™ on Stack Overflow

Submit form using ajax, and then disable button

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related