Show Hide Div Issue

JavaScript
1

Hi

I have created a form and added a div to it.
I want this div to display a message for a few seconds then submit the form
The div isn’t showing up properly and am not sure what I’ve done wrong.

    <iframe name="votar" style="display:none;"></iframe>
      <form name="Form1" action="email.php" method="post" onsubmit=" return SubmitForm(); DisplayMsg();" target="votar">
      <table id="form_corners">
      <tr>
      <td>Name:</td>
      <td><input type="text" id="name" name="name" size="50" maxlength="60" onblur="ValidateField(name)" /></td>
      </tr>
      <tr>
      <td>Email:</td>
      <td><input type="text" id="email" name="email" size="50" maxlength="60" onblur="ValidateField(name)" /></td>
      </tr>
      <tr>
      <td width="120">Phone #:</td>
      <td><input type="text" id="phone" name="phone" size="50" maxlength="60" onblur="ValidateField(name)" /></td>
      </tr>
      <tr>
      <td valign="top">Note:</td>
      <td><textarea id="note" name="note" rows="3" cols="39"></textarea></td>
      </tr></table>
      <br/>
      <div id="Msg">
      Thank you for your form submission.
      </div>     
      <br/>
      <div align="center">
      <input id="submit-btn-contact" type="submit" value="Send Now">
      <br/>
      </div>
     </form>

Javascript code

function SubmitForm()
{
	var sName  = document.getElementById("name").value;
	var sEmail   = document.getElementById("email").value;
	var sPhone = document.getElementById("phone").value;
	var sNote    = document.getElementById("phone").value;

	document.getElementById("Msg").style.display="block";
	setTimeout(myFunction, 3000);
	document.getElementById("Msg").style.display="none";

	return true;
}
2

HTML:

<iframe name="votar" style="display:none;"></iframe>
      <form name="Form1" action="email.php" id="myForm" method="post" target="votar">
      <table id="form_corners">
      <tr>
      <td>Name:</td>
      <td><input type="text" id="name" name="name" size="50" maxlength="60" onblur="ValidateField(name)" /></td>
      </tr>
      <tr>
      <td>Email:</td>
      <td><input type="text" id="email" name="email" size="50" maxlength="60" onblur="ValidateField(name)" /></td>
      </tr>
      <tr>
      <td width="120">Phone #:</td>
      <td><input type="text" id="phone" name="phone" size="50" maxlength="60" onblur="ValidateField(name)" /></td>
      </tr>
      <tr>
      <td valign="top">Note:</td>
      <td><textarea id="note" name="note" rows="3" cols="39"></textarea></td>
      </tr></table>
      <br/>

JS

document.getElementById("submit-btn-contact").addEventListener('click',function(){
   document.getElementById("Msg").style.display="block";
   setTimeout( function(){
   document.getElementById("Msg").style.display="none";
   document.getElementById("myForm").submit();
   }, 3000);
});

And the sample JSfiddle at this link JSFiddle

3

setTimeout() doesn’t pause the the script, it just schedules the execution of the function you pass in to a given time from now; so the element will actually get hidden again immediately. Furthermore, the form will get submitted right away anyway; you can however delay this too like so:

var form = document.forms[0]

form.addEventListener('submit', function (event) {
  var msg = document.getElementById('msg')
	
  event.preventDefault()  
  msg.style.display = 'block'
  
  window.setTimeout(function () {
    msg.style.display = 'none' // probably not even necessary...
    form.submit()
  }, 3000)
})

(x-post)

4

And with a progress bar inside the message div:
HTML:

<iframe name="votar" style="display:none;"></iframe>
      <form name="Form1" action="email.php" id="myForm" method="post" target="votar">
      <table id="form_corners">
      <tr>
      <td>Name:</td>
      <td><input type="text" id="name" name="name" size="50" maxlength="60" onblur="ValidateField(name)" /></td>
      </tr>
      <tr>
      <td>Email:</td>
      <td><input type="text" id="email" name="email" size="50" maxlength="60" onblur="ValidateField(name)" /></td>
      </tr>
      <tr>
      <td width="120">Phone #:</td>
      <td><input type="text" id="phone" name="phone" size="50" maxlength="60" onblur="ValidateField(name)" /></td>
      </tr>
      <tr>
      <td valign="top">Note:</td>
      <td><textarea id="note" name="note" rows="3" cols="39"></textarea></td>
      </tr></table>
      <br/>
       
      <br/>
      
     </form>
     <div id="Msg" style="display:none">
     <progress class="w3-red" value="0" max="3" id="progressBar"></progress>
      Thank you for your form submission.
      </div> 
      <div align="center">
      <input id="submit-btn-contact" type="button" value="Send Now">
      <br/>
      </div>

JS

document.getElementById("submit-btn-contact").addEventListener('click',function(){
   document.getElementById("Msg").style.display="block";
   var timeleft = 3;
   var downloadTimer = setInterval(function(){
  document.getElementById("progressBar").value = 3 - --timeleft;
  if(timeleft <= 0)
    clearInterval(downloadTimer);
   },1000);
   setTimeout( function(){
   
   document.getElementById("Msg").style.display="none";
   document.getElementById("myForm").submit();
   }, 3200);
});

CSS link

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

JSFiddle sample here

5

Hi

Thank you for your sample.

I copied your html over mine and In the form tag, I added onsubmit=“return SubmitForm()”
I copied your js over to my validate.js file (which I call in the head tag) and put it in my SubmitForm functon.
Not working, so I must have added the js in the wrong place?

function SubmitForm()
{
  document.getElementById("submit-btn-contact").addEventListener('click',function(){
   document.getElementById("Msg").style.display="block";
   var timeleft = 3;
   var downloadTimer = setInterval(function(){
  document.getElementById("progressBar").value = 3 - --timeleft;
  if(timeleft <= 0)
    clearInterval(downloadTimer);
   },1000);
   setTimeout( function(){
   
   document.getElementById("Msg").style.display="none";
   document.getElementById("myForm").submit();
   }, 3200);
});

	return true;
}
6

Instead of onsubmit try setting onclick attr.

7

Hi

I changed the form tag to the following:

      <form name="Form1" action="email.php" id="myForm" method="post" target="votar" onclick="return SubmitForm()">

and it still doesn’t work.

8

Off Topic:

@kathyfrombauline: when you post code on the forums, you need to format it so it will display correctly. (I’ve edited your post for you.)

You can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line above your code, and three on a line below your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

10

Thank you for doing that.
My apologies

1 Like
11

No need to apologise. We’ve all been baffled by the forum software at one time or another.

13

Hi

Now it displays the message just fine - so that worked out - thanks for that.
However, it doesn’t get to my email.php script anymore to send the email…

15

Not that.Remove form onclick or onsubmit attr and set at button attr

16

Hi

I removed the onsubmit from the form tag as follows:

      <form name="Form1" action="email.php" id="myForm" method="post" target="votar">

then added it to the following input box. Now I get the progress bar + message display only if I double-click the Send Now button
The good news is that the form does submit now and an email is sent out.

      <input id="submit-btn-contact" type="button" value="Send Now" onclick="SubmitForm()">
17

Is it ok now?

18

Hi

Yes I think that’s just fine
Thank you all for your help.

19

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.