Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 233
  • Last Modified:

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.
0
cbradstreet
Asked:
cbradstreet
2 Solutions
 
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
 
ZvonkoSystems 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
 
viveksgCommented:


<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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now