用加載gif替換提交按鈕

我不是一個jQuery的專家，我無法弄清楚這一點。用加載gif替換提交按鈕

<input class="button" name="save" type="submit" onclick="$(this).replaceWith('<img src=images/loading.gif />'); console.log(this); $('#myForm').submit();" value="SUBMIT">

的代碼做更換按鈕，但用虛線圖像圖標。但是，如果我右鍵單擊破碎的圖像並將url複製到loading.gif的正確和有效路徑中。

我還在<head>中添加了<script>標籤。

有人有想法解決這個問題嗎？

感謝

來源

2013-10-10 smack-a-bro

嘗試在（逃脫）報價包裹你的'src'，和/或使用絕對網址：'如果他S使用'「‘' – Blazemonger

@Blazemonger轉義必要報價找出。 –

試試吧，’」' – Blazemonger

你缺少報價在你的圖像URL

<img src=images/loading.gif />應該是<img src="images/loading.gif" />

來源

2013-10-10 17:23:08

如果頁面是HTML5，則引用是可選的http://dev.w3.org/html5/html-author/#unquoted-attr –

@ Mr.Bacciagalupe這並不意味着它在所有或甚至大部分瀏覽器中都受支持截至目前。 –

@Lewis戈達德所有的現代瀏覽器（Firefox，Chrome，Opera，甚至IE10和IE11 ..甚至IE8和IE9文檔模式）都支持HTML5可選屬性報價語法。在HTML5中，引號是可選的，除非它帶有特殊字符的字符串。 HTTP：//www.whatwg。org/specs/web-apps/current-work/multipage/introduction.html＃intro-early-example –

只需保存自己的頭痛和放的JavaScript在自己的標籤，從而消除逃逸引號的頭痛;在示例中，請注意源文件中「圖像」之前的「/」。

注：如果圖像文件夾是在比您致電該文件更高的水平，你需要把URL作爲「../images/loading.gif」

JavaScript中的標籤

<script type="javascript"> 
    $(function(){ 
     $("input[name='save']").click(function(e){ 
      $(this).replaceWith('<img src="/images/loading.gif" />'); 
      console.log(this); 
      $('#myForm').submit(); 
     }); 
    }); 
</script>

，並在你的HTML：

<input class="button" name="save" type="submit" value="SUBMIT">

編輯：2013年2月17日 - 替代解決方案

我意識到這可能不是當時最好的解決方案，因爲將來有時您可能會對html進行編輯，比如提交按鈕或img src，然後必須更新jquery腳本。相反，加載這兩個html元素，在初始頁面加載時隱藏其中一個元素。然後在點擊過程中，您隱藏該按鈕並顯示img。這也很好，因爲你不必在你的javascript中寫入任何src url。

<input class="button" name="save" type="submit" value="SUBMIT"> 
<img src="/images/loading.gif" /> 


<script type="javascript"> 
    $("#loadingGif").hide(); 

    $("input[name='save']").click(function (e) { 
     $(this).hide(); 
     $("#loadingGif").show(); 
     console.log(this); 
     $('#myForm').submit(); 
    }); 

<script type="javascript">

來源

2013-10-10 17:50:51 sksallaj

爲什麼這個工作在小提琴中，但不是當我把它放在我的網頁上時？ –

我可以看到你的頁面看起來像什麼嗎？你可以製作自己的jsfiddle ..並將所有內容轉儲到其中一個框中。然後保存它，以便我可以查看它。 – sksallaj

用加載gif替換提交按鈕

回答

相關問題