CODEWITHSUNDEEP
javascriptphpjqueryfont-awesome
Sync
Sync

Reputation: 203

How to add fontawesome spinner inside onclick?

So I have this code inside my php echo;

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

As you can see the text will change onclick and the button will be disabled and the form will be submitted. But what i'm trying to do is add a fontawesome spinner besides Sending so the button will have a spinner when its being submitted. I tried adding it but it doesn't show up and it breaks the output of the code; I also tried using '\'\ like with the Sending but it still doesn't show up and the onclick functions are broken.

<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…\';" />

So anyone could help me fix this thing? Really want to add that spinner. Thanks in advance!

Upvotes: 7

Views: 15028

Answers (5)

Sync
Sync

Reputation: 203

Made it to work using Chay22's suggestion of using jquery click

Button:

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

Script:

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

Upvotes: 2

Zahid
Zahid

Reputation: 49

Hope this is helpful and better. Add a div above your submit button

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

or add button like below

<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();
   });
});

Upvotes: 1

Informitics
Informitics

Reputation: 197

Smallest, lightweight, and reusable We made a custom 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);
    }
});

This can be used as follows:

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

Upvotes: 1

Sachin
Sachin

Reputation: 2148

You have to take <button ... > for that. Try this:

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

Hello, here is full-fledged working example..

https://jsbin.com/bezomapeba/edit?html,js,console,output

Upvotes: 8

osadchi
osadchi

Reputation: 105

the problem is of browser's part, cos he think it html and handle it, try to do that with 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

Upvotes: 1

Related Questions