根据禁用/启用状态替换按钮文本

Posted 2023-05-09

【中文标题】根据禁用/启用状态替换按钮文本

【英文标题】：Alternate button text according to disabled/enabled status

【发布时间】：2018-09-26 05:41:08

【问题描述】：

我有一个带有 jQ​​uery 验证的表单，它正在工作。在您完成表单之前，提交按钮被禁用。当您完成表单时，提交按钮被启用。

我的问题是一些用户不明白什么是“禁用”按钮并尝试点击。出于这个原因，我需要将禁用时按钮的文本标签更改为“首先填写表单！”并在按钮启用时再次更改为“发送表单”

我试过了：

$('#form input').on('change', function() 
  if ($('#form').valid()) 
    $(":submit").html('<i class="fas fa-thumbs-up"></i> SEND FORM');
   else 
    $(":submit").html('<i class="fas fa-edit"></i> FILL THE FORM FIRST');           
  
);     

但这不起作用，在 IE11 中我有一个“更改”错误，按钮开始“闪烁”FontAwesome。

我不是 jQuery 方面的专家，但也许类似的东西会起作用：

if $(":submit").prop('disabled', false);

  $(":submit").html('<i class="fas fa-thumbs-up"></i>  SEND FORM');
 else 
  $(":submit").html('<i class="fas fa-edit"></i>  FILL THE FORM FIRST');
   

当然，正如我所说，我不是 jQuery 专家，这也行不通。有什么想法吗？

【问题讨论】：

您也可以分享您的 html。

为什么不将它绑定到您的表单提交事件？如果这不起作用，那么我认为您正在寻找文本框输入的 keyup 事件

嗨@pete - 我尝试绑定到我的验证事件 - 没有工作，因为我有keyup和change（这里我有IE11问题） - 并且模糊。我的表单提交事件也不起作用，因为提交按钮将被禁用，直到所有表单都被 validate 事件验证。当我验证所有表单时，按钮已启用 - 但在这里我需要更改展位文本.. 你明白吗？

【参考方案1】：

您可能希望在输入中使用required 属性。 如果输入未填写，这会阻止表单发送。 请注意，您也可以使用占位符来显示这是必需的。

见sn-p：

<form>
  First name:<br>
  <input type="text" name="firstname" placeholder="John" value="" required>
  <br>
  Last name:<br>
  <input type="text" name="lastname" placeholder="Doe" value="" required>
  <br>
  Gender:<br>
  <input type="text" name="lastname" placeholder="(Optional)" value="">
  <br><br>
  <input type="submit" value="Submit">
</form>

文档：https://www.w3schools.com/tags/att_input_required.asp

我不确定这些消息是否有用，但是，无论如何…… 您可以使用一些 JS 并执行以下操作：

function validateForm() 
  var isValid = true;

  // Note that I check only the "required" fields here
  $('[required]').each(function() 
    if ( $(this).val() == '' )
        isValid = false;
  );
  
  if(isValid)
    $(":submit").html('<i class="fas fa-thumbs-up"></i> SEND FORM');
  else
    $(":submit").html('<i class="fas fa-edit"></i>  FILL THE FORM FIRST');
    $("form").on('keyup', validateForm);
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<form>
  First name:<br>
  <input type="text" name="firstname" value="" required>
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="" required>
  <br><br>
  <button type="submit" onclick="validateForm();">Submit</button>
</form>

希望对你有帮助。

【讨论】：

嗨@takit-isy - 首先感谢您宝贵的时间和帮助。我会在这里测试——也许我需要做一些改变（味精必须出现在按钮内）——但我会尽快回复你。非常感谢！

@DANIEL 没问题，我喜欢这样做。 :) 我用按钮内的 html 编辑了我的答案。

嗨@takit-isy！再次感谢！它几乎就在那里......只有一件事（这也是我不能做的 - 我的“主要问题”） - 我们可以“去填写表格标签”但我们不能“返回发送表格标签”，直到我们点击...... 100% OK 是当我完成并且它在表单中全部有效时我禁用按钮并再次作为启用按钮 - 它会出现“发送表单”标签以通知用户他现在可以发送表单。我不知道你是否理解这个问题..第一部分是 100% 好的禁用按钮/更改以填充标签 - 但“返回”只有在你点击后才有效..我需要之前 - 通知用户跨度>

这就是为什么在我的代码中我使用这个： if ($('#form').valid()) - 因为我验证了表单以启用提交按钮..并返回。但是当我这样做时，字体开始闪烁，因为有效的方法是在每次更改中“更新”..在 IE11 中，由于视频内存，这可能会“崩溃”浏览..（我的表单是我们示例大小的 10 倍。 . 我有一个课程目录可供选择，每个课程都有 1 个提交按钮.. 然后当所有按钮在 IE11 中闪烁时...崩溃！）

@DANIEL 我明白你的意思了。我用keyup 事件修改了我的答案，这样我们就不必单击某处来验证表单。