更改引導加載按鈕文本

我一直在試圖讓一個加載按鈕去引導刷新圖形不斷旋轉，直到服務器響應我的請求。這是按鈕：更改引導加載按鈕文本

<button type="submit" id="loading" name="loading" class="btn btn-lg btn-default" 
onclick="change()" style="margin-top:40px; margin-bottom:25px;"> 
span id="state"></span>Submit</button>

當我點擊該按鈕，glyphicon到按鈕的左邊開始旋轉，部分工作至今。該按鈕右側的文本（現在：提交）需要更改爲「正在加載」。到目前爲止，我有以下腳本：

<script type="text/javascript"> 
    function submit() { 
     document.getElementById("loading").click(); 
    } 
    function change() { 
     var mybutton = document.getElementById("loading"); 
     var mystring1 = document.getElementById("input_ipaddress").value; 
     var mystring2 = document.getElementById("input_hostname").value; 
     var mystring3 = document.getElementById("input_comms").value; 
     if (mystring1 && mystring2 && mystring3) { 
      document.getElementById("state").className = "glyphicon glyphicon-refresh glyphicon-refresh-animate"; 
      mybutton.innerHTML = "Loading..."; 
     }  
    } 
    // remove all classes of the "state" span class 
    window.onload = function() { 
     document.getElementById('state').className = ""; 
    }; 
</script>

的CSS，如果這有助於解決我的問題：

.glyphicon-refresh-animate { 
-animation: spin .7s infinite linear; 
-webkit-animation: spin2 .7s infinite linear; 
} 

@-webkit-keyframes spin2 { 
from { -webkit-transform: rotate(0deg);} 
to { -webkit-transform: rotate(360deg);} 
} 

@keyframes spin { 
from { transform: scale(1) rotate(0deg);} 
to { transform: scale(1) rotate(360deg);} 
}

我一直很努力的innerHTML，但當然一切替換（包括字形）與給定的文本。我該如何解決這個問題？

來源

2014-09-12 Beeelze

你爲什麼要使用純JS？爲什麼你不能使用jQuery？ – 2014-09-12 12:18:18

爲什麼不直接使用內置的Bootstrap方式呢？ http://getbootstrap.com/javascript/#buttons – gpgekko 2014-09-12 12:19:30

代碼似乎很好，按鈕文本應該改變。問題在別的地方。 – Manwal 2014-09-12 12:23:38

問題是您的新文本Loading..重疊。

試試這個：

mybutton.innerHTML = '<span id="state"></span>Loading..'

來源

2014-09-12 12:42:37 Manwal

很高興看到這對你有用。你可以接受它。 – Manwal 2014-09-12 12:43:09

呵呵，我在找你的答案接受^^ – Beeelze 2014-09-12 12:46:49

更改引導加載按鈕文本

回答

相關問題