Question

具有保存用户的功能，表单数据通过ajax发送到php代码以将其插入数据库中。存在用户名或保存数据的响应有2个。如何从php代码返回响应之前，如何禁用保存按钮的多次单击 javascript保存功能是

 function saveUser(){
            $('#fm').form('submit',{
               url: url,
                onSubmit: function()
                {
                    console.log($(this).form('validate'));
                    return $(this).form('validate');
                },
                success: function(result)
                {
                   console.log(result);
            if(result === 'exists')
                    {
            $.messager.alert('Alert','Name already exists!','info');
            $('#fm').form('clear');
                     }
                     else  if(result === 'success')
                    {
                     $.messager.alert('Success','Data Inserted','info');  
                    }
                }
             });
         }

表单和按钮

＆＃13;

<form id="fm" method="post" >
            <div class="fitem">
                <label>User Name:</label>
                <input  name="username"  placeholder="Enter Unique Name"  >
            </div>
            <div class="fitem">
                <label>Email:</label>
                <input name="email">
                
            </div>
            <div class="fitem">
                <label>Password:</label>
                <input type="password" name="password">
            </div>
        </form>
		<div id="buttons">
        <a href="javascript:void(0)" onclick="saveUser()" >Save</a>
        <a href="javascript:void(0)" onclick="close()">Cancel</a>
    </div>

＆＃13;

Answer 1

你可以做到这一点

<a id="saveUser" href="javascript:void(0)" onclick="saveUser()" >Save</a>

onSubmit: function()
{
   $('#saveUser').off('click');
},

或者您可以使用css启用和禁用

// To disable:    
document.getElementById('saveUser').style.pointerEvents = 'none';
// To re-enable:
document.getElementById('saveUser').style.pointerEvents = 'auto';

Answer 2

<a id="submitBtn" href="javascript:void(0)" onclick="saveUser()" >Save</a>

 function saveUser(){
        $('#fm').form('submit',{
           url: url,
            onSubmit: function()
            {
                console.log($(this).form('validate'));
                $('#submitBtn').removeAttr('onclick');
                return $(this).form('validate');
            },
            success: function(result)
            {
               console.log(result);
               $('#submitBtn').attr('onclick', 'saveUser()');
        if(result === 'exists')
                {
        $.messager.alert('Alert','Name already exists!','info');
        $('#fm').form('clear');
                 }
                 else  if(result === 'success')
                {
                 $.messager.alert('Success','Data Inserted','info');  
                }
            }
         });
     }

并设置提交按钮的ID

Answer 3

将.this传递给您的函数

，传递发件人的引用

  <a href="javascript:void(0)" onclick="saveUser(this)" >Save</a>

  function saveUser(sender){
     // your logic here
  }

您可以停用发件人：

  <a href="javascript:void(0)" onclick="saveUser(this)" >Save</a>

  function saveUser(sender){
    $(sender).prop("disabled", true);
     // your logic here
  }

然后启用发件人成功：

success: function(result)
{
    $(sender).prop("disabled", false);
    // your logic here
}

演示：

＆＃13;

function saveUser(sender){
    $(sender).prop("disabled", true);
            $('#fm').form('submit',{
               url: url,
                onSubmit: function()
                {
                    console.log($(this).form('validate'));
                    return $(this).form('validate');
                },
                success: function(result)
                {
                   $(sender).prop("disabled", false);
                   console.log(result);
            if(result === 'exists')
                    {
            $.messager.alert('Alert','Name already exists!','info');
            $('#fm').form('clear');
                     }
                     else  if(result === 'success')
                    {
                     $.messager.alert('Success','Data Inserted','info');  
                    }
                }
             });
         }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="fm" method="post" >
            <div class="fitem">
                <label>User Name:</label>
                <input  name="username"  placeholder="Enter Unique Name"  >
            </div>
            <div class="fitem">
                <label>Email:</label>
                <input name="email">
                
            </div>
            <div class="fitem">
                <label>Password:</label>
                <input type="password" name="password">
            </div>
        </form>
		<div id="buttons">
        <a href="javascript:void(0)" onclick="saveUser(this)" >Save</a>
        <a href="javascript:void(0)" onclick="close()">Cancel</a>
    </div>

＆＃13;

Answer 4

您可以尝试这样

<a id="saveuser" href="javascript:void(0)" onclick="saveUser()" >Save</a>
<a id="cancelbtn" href="javascript:void(0)" onclick="close()">Cancel</a>

function saveUser(){
        $('#fm').form('submit',{
           url: url,
            onSubmit: function()
            {
                console.log($(this).form('validate'));
                return $(this).form('validate');
            },
            beforeSend: function() {
                $('#saveuser').css({"pointer-events": "none"});
            },

            success: function(result)
            {
               console.log(result);
                if(result === 'exists')
                {
                    $.messager.alert('Alert','Name already exists!','info');
                    $('#fm').form('clear');
                }
                else  if(result === 'success')
                {
                       $.messager.alert('Success','Data Inserted','info');  
                }
            }
            complete: function() {
                $('#saveuser').removeAttr("style");
            },
        });
 }

单击按钮时禁用多个ajax响应

4 个答案: