如何在 onclick 中添加 fontawesome 微调器？

Question

所以我的 php echo;

中有这段代码

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

如您所见，单击时文本将更改，按钮将被禁用，表单将被提交。但我想做的是在发送之外添加一个字体微调器，这样按钮在提交时就会有一个微调器。我尝试添加它，但它没有显示出来并且破坏了代码的输出；我也尝试像发送一样使用 '\'\ 但它仍然没有显示并且 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…\';" />

所以有人可以帮我解决这个问题吗？真的想添加那个微调器。提前致谢！

Answer 1

您必须为此选择 <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,console,output

Answer 2

问题是浏览器的问题，因为他认为 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's way

Answer 3

使用 Chay22 关于使用 jquery click

的建议让它工作

按钮：

<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…';
});

Answer 4

最小、最轻且可重复使用 我们定制了 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();
        }
    });
});

Answer 5

希望这对您有所帮助并且更好。在您的提交按钮上方添加一个 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();
   });
});

如何在 onclick 中添加 fontawesome 微调器？

How to add fontawesome spinner inside onclick?

javascript

php

jquery

font-awesome