Help with Form OnSubmit

[mcmuney]

I have a form and what I want is for it to do 2 things when the form button is clicked:

 

1) replace the Submit button with a "loading..." image or text

2) show the image/text above for about 5 seconds, then actually submit the form

 

Here's my form:

 

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

[haku]

Ok, so what does your javascript look like?

[mcmuney]

No java currently. On submit, it just executes the form, which is a php calculation and insert to the DB. I'm hoping to add java. Here's something I found online, which does #1 of what I'm looking to do, but I need help with applying #2 to it:

 

<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>

[haku]

No java currently.

 

And what about Javascript?

 

Anyways, it sounds like you are asking us to write code for you. If so, you have posted in the wrong section of the forum, you want to hire someone in the freelance section.

[mcmuney]

The javascript is right there on my last reply. Here it is again:

 

<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>

 

What I'm asking for is probably about 2-3 lines of additional code. Hardly requiring hiring a professional. If you can't help, no worries.

[haku]

The javascript is right there on my last reply. Here it is again:

You were talking about Java. Completely different things.

 

What I'm asking for is probably about 2-3 lines of additional code. Hardly requiring hiring a professional. If you can't help, no worries.

You can solve this by doing the following:

 

1) On click, swap out the button with the loader (which is what your code is attempting to do).

2) Set a timeout for 5 seconds using window.setTimeout().

3) In the callback to setTimeout(), submit the form. If you are using jQuery, you can do this with .submit().

 

It will be a little more than 2-3 lines of extra code, probably about 20. But that should point you in the right direction since you don't need to hire a professional.

Edited January 7, 2013 by haku

[mcmuney]

Ok, I almost have what I want. I've written this so far, which is working; however, only when the button type="button". It does not work when the type="submit". I need the form to submit the data. What am I missing here?

 

  <script type="text/javascript">
   function submitForm() { // submits form
    document.getElementById("ismForm").submit();
   }
   function btnSearchClick()
   {
    if (document.getElementById("ismForm")) {
  document.getElementById('searchx').style.display = 'none';
	 document.getElementById('loading').style.display = 'block';		
    setTimeout("submitForm()", 5000); // set timout		 
   }
   }
   </script>
<form method="post" id="ismForm" name="ismForm" action="test3.php?x" class="">
<input type="hidden" name="amount" value="100" />
<div id="loading" style="display:none;"><img src="http://article.onlinewebtool.com/wp-content/images/loading.gif" alt="" />Loading!</div>
   <input class="button" onclick="btnSearchClick();" type="button" id="searchx" name="searchx" value="Search" autocomplete="off">
   </form>

[haku]

Since you are submitting the form using javascript, the button type is irrelevant.

 

You do need to return false from your click function however if you want to prevent submission (which you do).