如何在 onclick 中添加 fontawesome 微调器?
How to add fontawesome spinner inside onclick?
所以我的 php echo;
中有这段代码
<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>
您好,这是完整的工作示例..
问题是浏览器的问题,因为他认为 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>\';>';
使用 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…';
});
最小、最轻且可重复使用
我们定制了 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();
}
});
});
希望这对您有所帮助并且更好。在您的提交按钮上方添加一个 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();
});
});
所以我的 php echo;
中有这段代码<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>
您好,这是完整的工作示例..
问题是浏览器的问题,因为他认为 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>\';>';
使用 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…';
});
最小、最轻且可重复使用 我们定制了 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();
}
});
});
希望这对您有所帮助并且更好。在您的提交按钮上方添加一个 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();
});
});