Help with Form Submit

I have a simple form (see below) and I'd like to incorporate javascript to do the following:

1) on Submit, replace the Submit button to show "Loading..." image/text
2) Show #1 for about 5 seconds, then execute the form

<form method="post" action="">
<input type="hidden" name="amount" value="<?=$raid;?>" />
<input class="btn" type="submit" name="raid" value="Submit" />
</form>

Code (markup):

I've found this online that takes care of #1, but I want to add #2 to it and apply it to my form.

<script type="text/javascript">
(function (d) {
  d.getElementById('form').onsubmit = function () {
        d.getElementById('submit').style.display = 'none';
        d.getElementById('loading2').style.display = 'block';
  };
}(document));
</script>
<form id="form" action="">
  <div id="loading2" style="display:none;"><img src="loading.gif" alt="" />Loading!</div>
  <input id="submit" value="Click!" type="submit" />
</form>

Code (markup):

Any help would be greatly appreciated. Thanks!

 

You want to delay your javascript by using setTimeOut()


setTimeout(function() { // Your sexy code here}, 5000);

 

Yes, Ofcourse you need to delay. However, I suggest to use jQuery Delay function and do the form submission with jQuery.

 

This might be a stupid question, but why would you want to make it take even longer and piss all over accessibility while at it? Stellar example of javascript for nothing and failing to use javascript to enhance the experience.

Even if I were to do that, I'd generate the loading image in the script instead of the markup since it will show up CSS disabled or scripting disabled... remember, you should be progressively enhancing functional code with scripts and style, NOT supplanting functionality.