How to add fontawesome spinner inside onclick?

Question

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!

Answer 1

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

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

Answer 3

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