Change image of the submit button when clicked once

I want to change the image of the submit button once a user clicks on the button.......I have used the following code but it does not work...please help...

<script type="text/javascript">
$(document).ready(function() {
$('#button').one("click",function() {
$(this).toggleClass("clicked");
});
});

</script>

<style type="text/css">
#button {
border: 0px;
display: block;
padding: 0px;
width: 37px;
height: 37px;
}

.default {
background-image:url(he1.png);
color:transparent;

}
.clicked {
background-image:url(wi3.png);
color:transparent;
}

</style>

<input type="submit" id="button" class="default" />


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title>untitled document</title>

<style media="screen">
#button {
    display:block;
    padding:0;
    width:37px;
    height:37px;
    border:0;
  }
.default {
    background-image:url(he1.png);
    color:transparent;
  }
.clicked {
    background-image:url(wi3.png);
    color:transparent;
  }
</style>

<script>
(function() {
    'use strict';
function init(){ 
    var test=true;
  document.getElementById('button').onclick=function() {
  if(test===true) {
    this.className='clicked';
    test=false;
           }
       }
    }
  window.addEventListener?
  window.addEventListener('load',init,false):
  window.attachEvent('onload',init);
})();
</script>

</head>
<body>

  <input type="submit" id="button" class="default"> 

</body>
</html>

Change image of the submit button when clicked once

mini

mini

birdbrain

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week