Question

我正在使用jquery ajax提交表单。我想在成功处理表单后禁用提交按钮。但它不是禁用如果我再次点击提交，它总是提交表单。它应该只提交一次。

这是我的完整代码：

<form id="tagform-full">
<table  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="150" valign="top">Project Name</td>
    <td><input type="text" id="project_name" name="project_name" class="longfield" maxlength="30" value="<?php
        if (isset($_POST['project_name']))
            echo $_POST['project_name'];
 ?>" placeholder="create project" /></td>
  </tr>  
  <tr>
    <td valign="top">Notes</td>
    <td><textarea id="notes" name="project_notes" rows="4" cols="39" placeholder="project_notes"><?php
        if (isset($_POST['project_notes']))
            echo $_POST['project_notes'];
 ?></textarea></td>
  </tr>
  <tr>
    <td valign="top">Assing clients</td>
    <td id="assign-client">
    <p id="mclient1">
    <b>Main Client</b> <br/>
    <input type="text" name="main[19-a]" id="main_client" class="longfield tag" />
    </p>
    <br/>
    <b>Seconday Clients</b> <br/>
     <p id="mclient2">
    <input type="text" id="assign_client" name="secondary[19-a]" class="longfield tag"/>
    </p>
    </td>
  </tr>

  <tr>
    <td valign="top">Assign users</td>
    <td id="assign-user"><input type="text" class="longfield tag" id="assign_users" name="user[19-a]" placeholder="Assign users" /></td>
  </tr>  

  <tr>
    <td>&nbsp;</td>
    <td><input type="submit" id="create_project" class="submit" name="submit" value="Create Project"/>
  </tr>
</table>
</form>

<script>
$("#tagform-full").submit(function(event) {

  event.preventDefault();
  $('#addcontact-img').show();

  $.ajax({
   type: 'POST',
   url: 'create_project_process.php',
   data: $(this).serialize(),
   dataType: 'json',      

   success: function (data) {
        $('#success').html('');
        $('#success').show();
        $('#addcontact-img').hide();                


        $.each( data, function( key, value ) {          
          //if(key !== 'error') {
            $('#success').append('<p>'+value+'</p>');           
            $("#create_project").removeAttr('disabled');   
          //}  
        }); 

        /*if(!data.error) {                                   
             setTimeout(function (){
             $('input[type=submit]').attr('disabled', 
false);                         
             window.location.href = "manage_project.php"; 
        }*/

   }
  });
});
//$('#success').delay(3000).fadeOut('slow');    
</script>

Answer 1

你可以这样做：

$("#create_project").prop("disabled", true);

它应该在你调用它时禁用该按钮。

Answer 2

试试这个..

$("#create_project").attr("disabled", "disable");
or
$("#create_project").prop('disabled', true);
or
$("#create_project")attr('disabled', true);

Answer 3

在您的ajax请求之上添加此行代码：

$("#create_project").attr('disabled',true);

它应该是这样的：

$("#tagform-full").submit(function(event) {

  event.preventDefault();
  $('#addcontact-img').show();

  $("#create_project").attr('disabled',true);


  $.ajax({
         type: 'POST',
         url: 'create_project_process.php',
         data: $(this).serialize(),
         dataType: 'json',      

         success: function (data) {
                 $('#success').html('');
                 $('#success').show();
                 $('#addcontact-img').hide();                


                 $.each( data, function( key, value ) {          
                     //if(key !== 'error') {
                         $('#success').append('<p>'+value+'</p>');           
                         $("#create_project").removeAttr('disabled');   
                     //}  
                 }); 

    /*if(!data.error) {                                   
         setTimeout(function (){
         $('input[type=submit]').attr('disabled', false);                         
         window.location.href = "manage_project.php"; 
    }*/

         }
    });
});

如何使用jquery禁用提交按钮

3 个答案: