如何在提交表單時使用javascript顯示隱藏的div？

我並不十分熟悉jquery，但我試圖獲得一個簡單的動畫gif來顯示錶單何時提交。點擊「提交」上傳圖片時，我想顯示gif，以便用戶知道圖片正在上傳。提交按鈕有一個id =「提交」，並且還一個onClick =「返回確認（‘信息’）」如何在提交表單時使用javascript顯示隱藏的div？

我有含有GIF股利代碼：

<div id="loading" style="display:none"> 

    <img src="images/hand_timer2.gif" alt="loading" /> 

</div>

這是隱藏的。它確實表明我是否刪除了這種風格。很公平。但是，當我嘗試用下面的JavaScript來顯示它並不顯示：

<script type="text/javascript"> 

    $(function(){ 
     $('#submit').click(function(){ 
     $('#loading').show(); 

     }); 
    });

我在一個單獨的PHP頭文件有

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"  
type="text/javascript"></script>

。據我可以看到它是jQuery庫的唯一參考，但我確實有其他JavaScript代碼都可以工作。我只是無法讓這個工作。任何人都可以指出我做錯了什麼，爲什麼我點擊提交時無法讓div顯示gif？

來源

2012-12-13 user1022772

僅供參考。你正在使用一個非常舊的jQuery版本。目前的版本是1.8.3。 –

你是什麼樣的html？ – bobthyasian

你可以顯示你的HTML代碼嗎？在提交函數中放置日誌或警報，以便在提交表單時確保正確調用該函數。如果是，則檢查以確保您的加載元素在相同範圍內是正確的。 – DigTheDoug

我相信問題可能是你的內聯onClick="return confirm('message')"阻止點擊事件到達你的jQuery附帶的點擊事件監聽器 - 但不確定。無論如何，我不會傾聽提交按鈕上的點擊事件，而是傾聽表單上的提交事件，當表單實際提交時會觸發此事件（表單通常可以通過其他方式發佈，而不是單擊提交按鈕 - 例如通過Enter鍵）。

$('#idOfYourForm').on("submit", function() { 
    $('#loading').show(); 
});

旁註：

你沒有正確關閉樣式屬性上的負載DIV（注意到>爲藍色）：

<div id="loading" style="display:none>

來源

2012-12-13 22:49:35

這不會顯示div太長時間，因爲submit是向服務器發送請求，所以你需要'return false'或'e.preventDefault（）' –

謝謝Christofer。而已。這是onClick online。您的更改將其排序。謝謝。我非常感謝幫助。 – user1022772

@JuanMendes實際上，由於OP說他想要顯示div，因此用戶正在上傳文件，因此在文件上傳時可能會顯示一段時間。此外，他不應該肯定不會返回false或e.preventDefault（），因爲這會阻止表單被髮布（我不相信OP正在做Ajax請求）。 –

如何在提交表單時使用javascript顯示隱藏的div？

回答

相關問題