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

Posted 2023-02-24

技术标签:

【中文标题】在禁用提交按钮的情况下发送表单时出现问题【英文标题】：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脚本->不重新加载，并且可以保存按钮状态。 【参考方案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() 并禁用按钮......即使这样也没有必要（检查 ***.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);
);

【讨论】：

以上是关于在禁用提交按钮的情况下发送表单时出现问题的主要内容，如果未能解决你的问题，请参考以下文章

玩魔兽时出现问题，在战网上提交问题提交不上，提交一个表单按钮是灰色的，求助！

启用/禁用表单提交按钮不起作用

禁用表单提交按钮，而不阻止 HTML5 验证

当使用退格键或删除按钮提交按钮颜色不改变

玩魔兽时出现问题，在战网上给客服提交表单,结果问题描述完之后,提叫一个表单的按钮是灰色的，求助呀。。

在不使用提交按钮的情况下触发标准 HTML5 验证（表单）？