7

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!

Sync
  • 203
  • 1
  • 3
  • 13
  • 1
    Using jQuery `click()` will make this easier and [better](http://stackoverflow.com/questions/12627443/jquery-click-vs-onclick) – Chay22 Apr 02 '16 at 11:16
  • @Chay22 can you walk me through with that? thanks – Sync Apr 02 '16 at 11:17
  • 1
    nevermind got it to work using with what you suggested, thanks for the nice suggestion @Chay22 – Sync Apr 02 '16 at 11:19

5 Answers5

8

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

Sachin
  • 2,152
  • 1
  • 21
  • 43
2

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…';
});
chevybow
  • 9,959
  • 6
  • 24
  • 39
Sync
  • 203
  • 1
  • 3
  • 13
1

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

osadchi
  • 105
  • 1
  • 10
  • the output is broken, since it adds `Sending Love…';" />` outside the button and it doesn't function well. – Sync Apr 02 '16 at 11:06
  • the revised one didn't load the page since its already inside echo ''; – Sync Apr 02 '16 at 11:08
  • the problem is of browser's part, cos he think it html and handle it, try to do that with js, `echo 'Sending Love…\';>';` – osadchi Apr 02 '16 at 11:24
1

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();
        }
    });
});
Informitics
  • 87
  • 2
  • Not what I was looking for today, but the best thing I found. Tip to anyone wondering how to use: throw it in it's own js file and include the script tag to it in your html after your script tag that imports jQuery. I also extended it to include `disableOnly: function()` as I like to disable other buttons on the form when posting, without sticking a spinner in all of them. – egmfrs Aug 02 '23 at 00:46
1

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();
   });
});
Zahid
  • 39
  • 3