如何在點擊提交按鈕後顯示圖片？

我有這樣的架杆GIF圖片，默認情況下不可見：如何在點擊提交按鈕後顯示圖片？

 <p class="loadingImg" style="display:none;"><img src="/design/styles/_shared/classic-loader.gif" alt="" /></p>

當用戶點擊在窗體底部提交按鈕，我想是要顯示GIF，並提交按鈕消失。基本上，提交按鈕應該由此加載條替換，以便用戶知道在再次單擊之前等待。我相信我可以使用一些onclick javascript ... 幫助？

是你使用AJAX提交按鈕，或者是提交表單？ – Elangovan

@Elangovan它只是提交表單。沒有什麼花哨。 Plain ol'html is my forte' – robhardgood

你可以這樣用jQuery做到這一點：

添加的jQuery到您的網站

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

添加以下代碼裏面<script>標籤或外部JS文件。引號之間的文本是您的提交按鈕的選擇器。

$(document).ready(function(){ 
    $('#submit-btn-id').click(function(){ 
     $(this).hide(); 
     $('.loadingImg').show(); 
    }); 
});

2011-09-06 02:28:36 marissajmc

。@ImgImg與p.loadingImg之間的區別在@Andre的響應中有什麼區別？此外，＃提交應該是#theIDofthesubmitbutton，對不對？ – robhardgood

您可以使用p.loadingImg或.loadingImg - 它們指向相同的元素。如果「IDofthesubmitbutton」是你提交按鈕的ID，那麼你就是用它。 – marissajmc

嗚嗚嗚，我終於搞定了！請忽略我所有的noob評論...：D感謝@ marissa.c和所有人 – robhardgood

$(function(){ 
    $('input[type="submit"]').click(function(){ 
     $('p.loadingImg').show(); 
    }); 
});

1-您還可以禁用提交按鈕，以避免第二次點擊，使用$（本）.attr（ '禁用'， '禁用'）;在點擊事件

2 - 如果您的形式是由AJAX submited，這是更好地爲您在Ajax調用

2011-09-06 02:29:11 Andre

請原諒我的總jquery-ignorance，但是如何從我的提交按鈕調用jquery函數？我只是使用onclick =「」事件？ – robhardgood

@robhardgood，@安德烈的JS代碼應該放在'

相關問題

回答