Как добавить Fontawesome Spinner внутри OnClick?
Так что у меня есть этот код в моем php эхо;
<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…\';" />
Так кто-нибудь может помочь мне исправить эту вещь? Действительно хочу добавить этот счетчик. Заранее спасибо!
Решение
Вы должны принять <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>
Здравствуйте, вот полноценный рабочий пример ..
Другие решения
Сделано это работает, используя предложение Chay22 об использовании jquery click
Кнопка:
<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…';
});
проблема в части браузера, потому что он думает, что это 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>\';>';
Надеюсь, что это полезно и лучше. Добавьте 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();
});
});
Самый маленький, легкий и многоразовый
Мы сделали пользовательский 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();
}
});
});