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

时间:2016-04-02 10:49:08

标签: javascript php jquery font-awesome

所以我在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…\';" />

所以任何人都可以帮我解决这个问题?真的想添加那个微调器。提前谢谢!

5 个答案:

答案 0 :(得分:3)

你必须为此<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

答案 1 :(得分:2)

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

答案 2 :(得分:1)

问题在于浏览器的部分,因为他认为它是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

答案 3 :(得分:1)

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

答案 4 :(得分:0)

最小,最轻,可重复使用 我们制作了一个自定义的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();
        }
    });
});