apos submit mostrar imagem

[Mario CREATIVO 0]

olá pessoal, tudo bem? espero que sim. não estou conseguindo fazer com que após eu clicar no botao submit do meu formulario ele mostre uma imagem de loading dessas que tem no site abaixo. minha intenção é fazer com que ao clicar no botao de enviar (submit), o botão é substituido pela imagem, fazendo com que não seja mais possivel enviar novamente o formulario e ficando de uma forma elegante o envio. se alguem poder me ajudar, agradeço desde já.

 

http://www.ajaxload.info/

abração e fiquem com Deus.

[Dee 0]

Se você tiver a imagem faça assim:

<script type='text/javascript'>
function Troca()
{
   document.getElementById("botao").innerHTML = "<img src='imagen.gif">";
}
</script>

<label id="botao">
   <input type='submit' name='enviar' value='Enviar' onClick='Troca()'>
</label>

[Mario CREATIVO 0]

Olá amigo muito obrigado. deu certo, mas agora me veio outro problema. como faço para enviar o formulario? meu codigo ficou assim:

 

<form id="form" name="form" method="post" action="enviar.html">
<input name="nome" type="text" id="nome" style="width:300px;"/>

<script type='text/javascript'>
function Troca()
{
   document.getElementById("botao").innerHTML = "<img src='http://pastusek.net/images/loading.gif'>";
}
</script>

<label id="botao">
   <input type='submit' name='enviar' value='Enviar' onClick='Troca()'>
</label>
</form>

ele troca a imagem, mas não envia o formulario.

[Dee 0]

Não enviou ? Que estranho.

Tenta agora;

 

<script type='text/javascript'>
function Troca()
{
   document.getElementById("botao").innerHTML = "<img src='http://pastusek.net/images/loading.gif'>";
   submit(); // Coloquei isso
}
</script>