单击带有超赞字体图标的按钮时不提交表单

问题描述 投票:2回答:2

我的自定义仪表板的按钮既包含“真棒字体”图标,又包含按钮或表单操作的文本描述。我的表单和按钮存在问题,即单击具有jQuery click事件的按钮中的字体真棒图标时,表单无法提交。我可以使用一些帮助找出我做错了什么。

In this image example, there is a font awesome magnifying glass "search" icon, followed by the text "Search".

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

我的jQuery有什么问题,当在按钮中单击真棒字体图标时,导致表单无法提交?

This image shows that the jQuery correctly replaced the inner HTML of the button, but the form doesn't submit when the font awesome icon is clicked on directly. The form only submits when the button is clicked anywhere else except for directly on the font awesome icon.

这是此搜索按钮的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>

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

jquery html forms button font-awesome
2个回答
0
投票

所以基本上您需要

  1. typesubmit更改为按钮。
  2. 通过添加和删除类来链接图标。
  3. 过一会儿再提交表格。

所以您的代码库应该是这样的:

$(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>

0
投票

此问题是由于在可以分派click事件之前,停止了submit事件的传播。由于click事件(<i class="fas fa-search">)的来源不再有效,因此使用$(this).html()从DOM中将其删除时,

要解决该问题,您只需更改图标元素的类名称。然后将文本包装在span中,以仅更改span中的文本。

jQuery(function($){
    $('#search-btn').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 */
    $('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>

<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>

<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>

在所有代码段中,我都禁用了实际的表单提交,否则您将看不到按钮的更改。确保不要使用DEMO PURPOSES ONLY下面的JavaScript由于没有注册就无法使用fontawesome 5的CDN,因此我使用了fontawesome 4 CDN和fa类名称来生成图标。

© www.soinside.com 2019 - 2024. All rights reserved.