使用ajax提交表单,然后禁用按钮

时间:2016-08-22 08:33:01

标签: javascript jquery ajax

我的脚本正在运行,但有一件事我无法解决。

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

首先点击它提交表单,然后在第二次单击时禁用该按钮并将颜色更改为绿色。有人可以向我解释为什么这个功能需要两次点击?我想一键完成两件事。

2 个答案:

答案 0 :(得分:1)

它需要两次点击,因为您只在click发生时处理submit事件。您应该在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");
        }
      });
    });
  });

答案 1 :(得分:1)

试试这个,在你的成功功能中禁用按钮并改变按钮颜色,如下所示

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