在禁用提交按钮的情况下发送表单时出现问题答案

【问题标题】：Issue when sending form with submit button disabled在禁用提交按钮的情况下发送表单时出现问题
【发布时间】：2015-11-28 12:42:05
【问题描述】：

我这里有这个表格：

<form id="register-form" action="<?=$_SERVER['PHP_SELF']?>" method="post">
    <label>Name <span style='color: red'>*</span><br/>
        <input type='text' name='user_name'/>
    </label>
    <label>Email <span style='color: red'>*</span><br/>
        <input type='text' name='user_email'/>
    </label>
    //Another form elements
    <button name='register' type='submit'>Register</button>
</form>

为了处理表单，我使用：

if(isset($_POST['register']))
{
    //Process
}

我需要的是register 按钮在用户点击它时被禁用。我找到了这个解决方案：

$('#register-form').submit(function()
{
    $(this).find(":submit").attr('disabled', 'disabled');
});

使用这个 jQuery 代码，当我单击它时按钮被禁用，但 PHP 不处理该表单。如何解决？

【问题讨论】：

它适用于我here，但我可能错过了一些东西。
您使用的是哪个版本的 jQuery？您可能想使用.prop() 而不是.attr()
@JayBlanchard 即使.prop() 也不会提交表单。
您能在控制台的网络选项卡中看到register 没有发布吗？
并且你的action属性调用了同一个页面，所以，脚本应该在同一个页面上执行，这意味着-页面将被重新加载。另一方面，如果你使用ajax，并且单独的php脚本->不重新加载，并且可以保存按钮状态。

标签： php jquery html

【解决方案1】：

我通过一些小技巧找到了解决方案。
如何？我在名为register 的表单中创建了一个隐藏输入。

<form id="register-form" action="<?=$_SERVER['PHP_SELF']?>" method="post">
<label>Name <span style='color: red'>*</span><br/>
    <input type='text' name='user_name'/>
</label>
<label>Email <span style='color: red'>*</span><br/>
    <input type='text' name='user_email'/>
</label>
//Another form elements
<input type='hidden' name='register'/>
<button id='register'>Register</button>
</form>

现在我用 jQuery 发送表单：

$('#register').click(function()
{
    $('#register-form').submit();
    $(this).prop('disabled', true);
});

使用这个技巧，提交表单的按钮不会被禁用，只有调用函数的按钮才会被禁用。然后PHP就可以处理表单了：

if(isset($_POST['register']))
{
    //Process
}

【讨论】：

您已将点击事件分配给页面中没有的元素 - #register
这看起来太复杂了，不能优雅地降级。只需在您的原始代码中添加 form.submit() 并禁用按钮......即使这样也没有必要（检查 stackoverflow.com/a/13606633/4397981 ）。我稍后会试试你的代码来检查我自己的理智:)
我现在看到了关键评论“这可以防止提交按钮值被提交。通常不是问题，但它可以是”。我认为解决方案是提交 - 禁用 - 防止默认（按此顺序！）。要么;很像您的解决方案，不使用提交按钮值作为输入（而不是隐藏字段或操作 uri 中的变量）
提交-禁用-阻止路由不起作用-它导致了无限循环。在您的帖子中使用解决方案，但不要依赖 click()，而是让 submit() 触发您的代码。

【解决方案2】：

如果你使用 jQuery 1.6 或更高版本，你应该使用.prop() 方法来修改属性：

$('#register-form').submit(function(){
    $(this).find(":submit").prop( "disabled", true );
});

这是example

【讨论】：

即使使用.prop()，表单也不会被处理。
查看更新后的答案@Dyan - 我还在打字:-)
感谢您的回答，但即使将button 更改为input，PHP 也无法处理表单。 ://
看，我正在使用：<input name='register' type='submit'/> 和 $('#register-form').submit(function() { $(this).find(":submit").prop('disabled',true); }); 但还是不行。
查看我正在运行的示例的链接。 jsfiddle.net/360q932t/1你确定 jQuery 已经加载到你的页面中了吗@Dyan？

【解决方案3】：

也许这可行。

HTML：

 <form action="<?=$_SERVER['PHP_SELF']?>" method="post">
 <input name='register' type='submit' id="register-form" />Register
//I remove the **ID Attribute** from the form and put it in the button.

jquery：

 $('#register-form').on('submit', function(){
   $(this).attr('disabled', true);
 });

或者正如 Jay Blanchard 所说，如果版本是 1.6

 $('#register-form').on('submit', function(){
   $(this).prop('disabled', true);
 });

【讨论】：

使用您的代码发送表单，我收到 PHP 响应，但按钮未禁用...然后我更改为 $('#register-form').click(function() { $(this).prop('disabled', true); });，按钮已禁用但我没有 PHP 响应。上帝，这让我失去理智。
我找到了实现我需要的解决方案并在此处发布为答案。

【解决方案4】：

我认为你需要这个解决方案：

 <html> 
 <head> 
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js">   </script> 
  <script src="http://malsup.github.com/jquery.form.js"></script> 

  <script> 
    // wait for the DOM to be loaded 
    $(document).ready(function() { 
        // bind 'myForm' and provide a simple callback function 
        $('#register-form').ajaxForm(function() { 

            $('#register-form').find(":submit").prop( "disabled", true );

        }); 
    }); 
    </script> 
   </head> 

    <form id="register-form" action="<?=$_SERVER['PHP_SELF']?>" method="post">
   <label>Name <span style='color: red'>*</span><br/>
   <input type='text' name='user_name'/>
   </label>
   <label>Email <span style='color: red'>*</span><br/>
   <input type='text' name='user_email'/>
   </label>
   //Another form elements
   <input type='hidden' name='register'/>
   <button id='register'>Register</button>
  </form>

我从这里得到它http://malsup.com/jquery/form/

请尝试将操作更改为目标页面，而不是同一页面，然后进行任何查询以插入这些帖子变量以确保它们被正确发布

【讨论】：

【解决方案5】：

在您的表单中，将 id 放入您的按钮和类中。

<form class='Register-form' id="register-form" action="<?=$_SERVER['PHP_SELF']?>" method="post">
    <button id='Register' name='register' type='submit'>Register</button>
</form>

在你的函数中

$('form.Register-form #Register').click(function(e){
    e.preventDefault();
    $('#register-form').submit();
    $(this).prop('disabled', true);
});

【讨论】：