单击带有字体真棒图标的按钮时，表单不提交

Posted

技术标签:

【中文标题】单击带有字体真棒图标的按钮时，表单不提交【英文标题】：Form doesn't submit when button with font awesome icon is clicked on 【发布时间】：2020-04-23 14:01:24 【问题描述】：

原帖

我的自定义仪表板具有包含 Font Awesome 图标和按钮或表单操作的文本描述的按钮。我的表单和按钮存在问题，在单击具有 jQuery 单击事件的按钮中的超棒字体图标时，表单未提交。我可以使用一些帮助来找出我做错了什么。

在这个图像示例中，有一个字体很棒的放大镜“搜索”图标，后面是文本“搜索”。

如果我单击按钮上的任意位置，我的 jQuery 将通过将按钮的内部 html 替换为字体真棒图标微调器图标和文本“正在搜索...”来正常工作。如果我直接点击字体真棒图标，表单不会提交。如果我单击按钮上除字体真棒图标之外的任何其他位置，则表单将正确提交。如果我删除了在单击按钮时替换 innerHTML 的 jQuery click() 函数，即使直接单击字体真棒图标，表单也会正确提交。它与 jquery click html 代码有关，但我不确定我做错了什么。

我的 jQuery 做错了什么导致在按钮内单击字体真棒图标时无法提交表单？

此图像显示 jQuery 正确替换了按钮的内部 HTML，但是当直接单击 font awesome 图标时，表单没有提交。仅当在其他任何地方单击按钮时，表单才会提交，除了直接在字体真棒图标上。

这是我的搜索按钮的 jQuery 和 HTML

$(document).ready(function() 
  $('#search-btn').click(function()  
    $(this).html('<i class="fas fa-spinner fa-spin gap-right"></i> Searching ...'); 
  );
  //$('#search-btn').click(function()  $('#search-btn').html('<i class="fas fa-spinner fa-spin gap-right"></i> Searching ...'); );
);
<link href="https://fontawesome.com/v4.7.0/assets/font-awesome/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="submit" id="search-btn" name="search" value="Search" class="btn btn-primary gap-right"><i class="fas fa-search gap-right"></i> Search</button>

任何建议将不胜感激。如果需要更多信息或澄清，请告诉我，我会更新。谢谢。

2020 年 1 月 6 日更新

示例：https://www.seibertron.com/dashboard/test/button-problem-public.php

上例中的问题在于“搜索”按钮。如果单击按钮的右侧，它会按预期工作（带有微调器图标并将文本从“搜索”更改为“正在搜索...”）。如果您单击“搜索”按钮左侧的字体真棒放大镜图标，它不会提交。重置按钮在示例中有效，因为它只是使用传统的 javascript 来重定向用户，而不是提交表单。提前感谢您查看此问题！

更新和决议 2020 年 1 月 6 日

感谢 fyrye，我采纳了他的建议并将我的 button.js jQuery 文件修改为以下内容，这适用于我的自定义 Inspinia 仪表板。此外，当我昨晚研究这个问题时，我发现了一个内置于 Bootstrap 的替代解决方案，它可能适用于希望将此功能添加到其代码中的其他用户：How to add a spinner icon to button when it's in the Loading state?

编码愉快！

$(document).ready(function()
  $('form').on('submit', function(e) 
    $(this).find('#test-search-btn').html('<i class="fa fas fa-spinner fa-spin gap-right"/> Searching...');
    $(this).find('#search-btn').html('<i class="fa fas fa-spinner fa-spin gap-right"/> Searching...');
    $(this).find('#add-btn').html('<i class="fas fa-spinner fa-spin gap-right"></i> Adding ...');
    $(this).find('#approve-btn').html('<i class="fas fa-spinner fa-spin gap-right"></i> Saving ...');
    $(this).find('#save-btn').html('<i class="fas fa-spinner fa-spin gap-right"></i> Saving ...');
    $(this).find('#copy-btn').html('<i class="fas fa-spinner fa-spin gap-right"></i> Copying ...');
    $(this).find('#move-btn').html('<i class="fas fa-spinner fa-spin gap-right"></i> Moving ...');
    $(this).find('#upload-btn').html('<i class="fas fa-spinner fa-spin gap-right"></i> Uploading ...');
    $(this).find('#nav-refresh-btn').html('<i class="fas fa-refresh fa-lg fa-spin gap-right"></i>');
    $(this).find('#load-btn').html('<i class="fas fa-spinner fa-lg fa-spin gap-right"></i> Loading ...');
    $(this).find('#generate-btn').html('<i class="fas fa-spinner fa-lg fa-spin gap-right"></i> Generating ...');
  );

  $('#cancel-btn').click(function()  $(this).html('<i class="fas fa-spinner fa-spin gap-right"></i> Canceling ...'); );
  $('#reset-btn').click(function()  $(this).html('<i class="fas fa-spinner fa-spin gap-right"></i> Resetting ...'); );

  $('.button-save').click(function()  $(this).html('<i class="fas fa-spinner fa-spin gap-right"></i> Saving ...'); );
  $('.button-go-back').click(function()  $(this).html('<i class="fas fa-spinner fa-spin gap-right"></i> Loading ...'); );
  $('.button-sm-edit').click(function()  $(this).html('<i class="fas fa-spinner fa-spin fa-lg" title="Loading ..."></i>'); );
  $('.button-sm-delete').click(function()  $(this).html('<i class="fas fa-spinner fa-spin fa-lg" title="Deleting ..."></i>'); );
  $('.button-sm-build').click(function()  $(this).html('<i class="fas fa-spinner fa-spin fa-lg" title="Building ..."></i>'); );
  $('.button-sm-code').click(function()  $(this).html('<i class="fas fa-spinner fa-spin fa-lg" title="Generating ..."></i>'); );

  $('#navbar-toggle-btn').click(function(e) 
    $(this).html('<i class="fas fa-spinner fa-spin" title="Loading ..."></i>');
    setTimeout(
        function () 
          $('#navbar-toggle-btn').html('<i class="fas fa-bars"></i>');
        , 500);
  );
);

【问题讨论】：

“gap-right”的样式是什么。这可能是问题吗？ 我很确定这不是 CSS 问题，而是 jQuery 问题，尽管我可能完全错了！无论哪种方式，这里都是根据您的请求“gap-right”的 CSS。 .gap-right margin-right:10px; 你可以试试.gap-right padding-right:10px; 吗？ 它只是改变了微调器的外观，因为边距消失了。 CSS不应该与表单是否提交有任何关系，如果我注释掉这个按钮的行，我可以隔离它与jQuery代码有关。 【参考方案1】：

所以基本上你需要

    将type 从submit 更改为button。 通过添加和删除类来更改图标。 稍后以编程方式提交表单。

所以你的代码可以是这样的：

$(document).ready(function()
 $('#search-btn').on('click', function() 
   		$(this).find('.fa').addClass('fa-spinner fa-spin').removeClass('fa-search'); // change icon
        setInterval(function() document.querySelector('#demo').submit(); , 2000); // submit the form after two seconds
   );    
);
.gap-right margin-right: 10px;
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="demo">
  <button type="button" id="search-btn" name="search" value="Search" class="btn btn-primary gap-right"><i class="fa fa-search gap-right"></i> Search</button>
</form>

注意：此演示使用 FA v4*，因此我将 .fas 更改为 .fa 以使其正常工作。

注 2：非常感谢@fyrye。

这是有效但影响 html5 验证的旧答案，因为它使用 preventDefault() 方法。你可以阅读更多关于它的信息here - 基本上你应该避免阻止浏览器的默认行为，除非它是必须的。

$(document).ready(function()
  $('#search-btn').click(function(e)  
    e.preventDefault();   //  cancel submit action
    $(this).html('<i class="fa fa-spinner fa-spin gap-right"></i> Searching ...');  // change text
    setInterval(function() document.forms[0].submit(); , 2000); // submit after two seconds
  );    
);
.gap-right margin-right: 10px;
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form name="demo">
  <button type="submit" id="search-btn" name="search" value="Search" class="btn btn-primary gap-right"><i class="fa fa-search gap-right"></i> Search</button>
</form>

【讨论】：

这是必需的，因为click 事件在submit 事件之前触发。替换 html 后，到 submit 事件的传播将停止，因为 click 事件的源不再有效您也可以通过使用 $(this).find('.fas').addClass('fa-spinner fa-spn').removeClass('fa-search'); 而不是 e.preventDefault 和 $(this).html() 来规避此问题，并删除setInterval()。 @fyrye 如果您不阻止表单实际提交的默认行为.. 对不起，我看不出你的小提琴有什么不同。我想这是我的睡觉时间...... 你是对的！！谢谢你。请回答这个问题，因为如果我用你的代码编辑将是抄袭（： 抱歉误会，使用setInterval( element.submit() ) 或以其他方式使用javascript 提交表单将阻止HTML5 验证发生，除非手动调用，并引入一些奇怪的副作用。此外，仅更改解决问题的元素的类名时也不需要它所以在点击事件中只需要一行 $(this).find('.fa').addClass('fa-spinner fa-spin').removeClass('fa-search'); // change icon 或 $(this).find('.fas') 用于 OPs fontawesome 5 代码。【参考方案2】：

该问题是由于 click 事件的传播在 submit 事件可以被调度之前被停止。由于click 事件的来源（&lt;i class="fas fa-search"&gt;）不再有效，当使用$(this).html() 将其从DOM 中移除时，

要解决此问题，您只需更改图标元素的类名即可。然后将您的文本包装在 span 中，以便您仅更改 span 中的文本。

jQuery(function($) 
    $('#search-btn').on('click', function() 
        $(this).find('.fas')
            //add the spinner icon
            .addClass('fa-spinner fa-spin')
            //remove the search icon
            .removeClass('fa-search')
            //update the text
            .next().text('Searching...');
    );
    
    /* DEMO PURPOSES ONLY - do not use below */
    $('#search-form').on('submit', function(e) 
       e.preventDefault();
       window.alert('Form submitted successfully.');
    );
    /* END DEMO PURPOSES ONLY */
);
.gap-right 
   margin-right: 10px;

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<form id="search-form" action="about:blank">
  <button type="submit" id="search-btn" name="search" value="Search" class="btn btn-primary gap-right">
    <i class="fas fa fa-search gap-right"></i> 
    <span>Search</span>
  </button>
</form>

或者，您可以监视表单的submit 事件并完全更改按钮。

jQuery(function($) 
    $('#search-form').on('submit', function(e) 
       $(this).find('#search-btn')
           .html('<i class="fa fas fa-spinner fa-spin gap-right"/> Searching...');
       
       /* DEMO PURPOSES ONLY - do not use below */
       e.preventDefault();
       window.alert('Form submitted successfully.');
       /* END DEMO PURPOSES ONLY */
    );
);
.gap-right 
   margin-right: 10px;

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<form id="search-form" action="about:blank">
  <button type="submit" id="search-btn" name="search" value="Search" class="btn btn-primary gap-right">
    <i class="fas fa fa-search gap-right"></i> Search
  </button>
</form>

在所有的 sn-ps 中，我禁用了实际的表单提交，否则您将看不到按钮更改。一定不要使用下面的 JavaScript DEMO PURPOSES ONLY 由于没有注册就无法获得 fontawesome 5 的 CDN，因此我使用了 fontawesome 4 的 CDN 和 fa 类名来生成图标。

【讨论】：

我认为这是朝着正确的方向前进，fyrye。明天我会对此进行更多研究，看看我是否可以根据您发布的内容设计解决方案。您的帖子解决了“为什么”当您单击字体真棒图标时按钮不起作用（我认为）。明天会进一步研究。 试过了，结果还是一样。图标和文本（用跨度包裹）工作得很好，就像以前一样，但同样的问题仍然存在，当点击图标时表单不提交，只有在点击按钮时。我目前正在努力为你们提供一个完整的代码示例。 @Seibertron 请使用您使用的 javascript 更新您的问题，或向我提供 jsfiddle.net 链接。 这是一个测试页面：seibertron.com/dashboard/test/button-problem-public.php 请注意，我提供的示例中的问题在于“搜索”按钮。如果您单击按钮的右侧，它可以工作。如果您单击“搜索”按钮左侧的字体真棒放大镜图标，它不会提交。重置按钮有效，因为它只是使用传统的 javascript 来重定向用户。预先感谢您的帮助。我很感激。 @Seibertron 我冒昧地将脚本注入到您的网站pastebin.com/MdDf3gCF，我的代码似乎解决了这个问题。 Watch Video 要使用它，请在浏览器中打开开发工具 F12 单击控制台。然后粘贴var script = document.createElement('script'); script.type='text/javascript'; script.async=true; script.onload=function() window.alert('Loaded') ; script.src="https://pastebin.com/raw/MdDf3gCF"; document.body.appendChild(script);按回车执行。

以上是关于单击带有字体真棒图标的按钮时，表单不提交的主要内容，如果未能解决你的问题，请参考以下文章

带有两个提交按钮的 Django 表单。 . .一个需要字段，一个不需要

在 wordpress 网站中提交带有 paypal 按钮的表单数据

字体真棒，输入类型“提交”

当javascript在元素上调用提交时，jQuery覆盖表单提交不起作用

单击时更改字体真棒图标的颜色：CSS / JavaScript

setState 不更新字体真棒图标