如何在onclick中添加font真棒微调器 - How to add fontawesome spinner inside onclick?

How to add fontawesome spinner inside onclick?

本文关键字：font 添加 onclick | 更新日期: 2023-09-27

所以我的php echo中有这段代码；

<input type="submit" value="Send Love" class="btn btn-primary" onclick="this.form.submit(); this.disabled=true; this.value=''Sending Love…'';" />

正如你所看到的，点击后文本将发生变化，按钮将被禁用，表单将被提交。但我想做的是在Sending之外添加一个font真棒微调器，这样按钮在提交时就会有一个微调器。我试着添加它，但它没有显示出来，它破坏了代码的输出；我也尝试过像Sending一样使用''''，但它仍然没有显示，onclick函数也被破坏了。

<input type="submit" value="Send Love" class="btn btn-primary" onclick="this.form.submit(); this.disabled=true; this.value=''<i class="fa fa-spinner fa-spin"></i> Sending Love…'';" />

有人能帮我修这个吗？真的想添加那个微调器。提前感谢！

你必须接受<button ... >。试试这个：

<button type="submit" class="btn btn-primary" onclick="sendLove(this);" > Send Love</button>
<script>
function sendLove(this1)
{
  //alert('asdasd');
  this1.disabled=true; 
  this1.innerHTML='<i class="fa fa-spinner fa-spin"></i> Sending Love…';
}
</script>

你好，这是一个完整的工作示例。。

https://jsbin.com/bezomapeba/edit?html，js，控制台，输出

使用Chay22的建议使用jquery点击

按钮：

<button type="submit" id="sendbtn" class="btn btn-primary">Send Love</button>`

脚本：

$('#sendbtn').click(function(){
this.form.submit();
this.disabled=true;
this.innerHTML='<i class="fa fa-spinner fa-spin"></i> Sending Love…';
});

问题出在浏览器的部分，因为他认为它是html并处理它，尝试用js、echo '<input type="submit" value="Send Love" class="btn btn-primary" onclick="this.form.submit(); this.disabled=true; this.value=''<i class="fa fa-spinner fa-spin">Sending Love…</i>'';>'; 来做到这一点

JavaScript的方式

最小、轻量级且可重复使用我们制作了一个自定义jQuery.fn:

jQuery.fn.extend({
    spin: function () {
        this.data("original-html", this.html());
        var i = '<i class="fa fa-spinner fa-pulse fa-3x fa-fw" style="font-size:16px; margin-right:10px"></i>';
        this.html(i + this.html());
        this.attr("disabled", "disabled");
    },
    reset: function () {
        this.html(this.data("original-html"));
        this.attr("disabled", null);
    }
});

这可以如下使用：

$("button").click(function () {
    var b = $(this);
    b.spin();
    $.ajax({
        url: "",
        button: b,
        success: function (result) {
            // do something
            b.reset();
        }
    });
});

希望这会有所帮助，效果更好。在提交按钮上方添加一个div

<div class="loading" style="display: none;"><i class="fa fa-spinner fa-spin"></i> Progressing …</div>

或在下方添加类似按钮

<button type="submit" class="btn btn-primary"><i style="display:none" class="fa fa-spinner fa-spin loading"></i> Send Love</button>
$(document).ready(function(){
   $("#sendbtn").click(function(){  // your submit button id
      var isValid = document.querySelector('#myform')
      if (isValid.checkValidity())
        $(".loading").show();
   });
});