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!
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
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…';
});
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With