Replace submit button with image when clicked

Can someone come up with a short JS that changes a form's submit button to an image when it's clicked?

I'd like to display an animated gif progress bar which would be displayed where the submit button was after the user submit the form.
cbradstreetAsked:
Who is Participating?
 
ZvonkoConnect With a Mentor Systems architectCommented:
How about this:

<html>
<head>
<title>Zvonko &#42;</title>
</head>
<body>
<form name="temp">
<input id="sbmit" type="submit" value="Submit Me" onClick="this.style.display='none';document.images.imgT.style.display='';"><img style="display:none" name="imgT" src="http://www.listmedia.com/graphics/progress-bar.gif">
</form>
</body>
</html>


0
 
gops1Commented:
Check this out:


<html>
      <head>
            <title>Script Demo</title>
            <script language="JavaScript">
                  function swapMe(){
                        document.getElementById('imgT').style.display="inline";
                        document.getElementById('sbmit').style.display="none";
                  }
            </script>
      </head>
<body>
<form name="temp" onsubmit="alert('Check your Button')">
      <input id="sbmit" type="submit" value="Submit Me" onClick="javascript:swapMe();"><img style="display:none" id="imgT" src="max.jpg">
</form>
</body>
</html>
0
 
Pravin AsarPrincipal Systems EngineerCommented:
<form name="f1">
<input type="image" src="image1.jpg" onclick="this.disabled = true;">
</form>

0
 
cbradstreetAuthor Commented:
Hmm ... this *doesn't* seem to do the trick ... ;-)

<html>
<head>

<script language="JavaScript">
function swapMe(){
document.getElementById('imgT').style.display="inline";
document.getElementById('sbmit').style.display="none";
}
</script>

</head>

<body>

<form name="temp">
<input id="sbmit" type="submit" value="Submit Me" onClick="javascript:swapMe();"><img style="display:none" id="imgT" src="http://www.listmedia.com/graphics/progress-bar.gif">
</form>

</body>
</html>

Ideally, I want a regulat submit button, and then when user clicks the button the progress-bar.gif image appears in place of the button while my script processes the page and then proceeds to the next page.
0
 
viveksgConnect With a Mentor Commented:


<html>
<head>
<title>Zvonko &#42;</title>
<script>
function fn_Submit()
{
   document.getElementById('sbmit').style.display = 'none';
   document.getElementById('imgT').style.display = 'block';

   return true;
}
</script>
</head>
<body>
<form name="temp">
<input id="sbmit" type="submit" value="Submit Me" onClick="return fn_Submit()">
<img style="display:none" name="imgT" src="http://www.listmedia.com/graphics/progress-bar.gif">
</form>
</body>
</html>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.