Jump to content
Forums are read-only ×
Larry Ullman's Book Forums

Delaying A Function Return

Christopher Bergin
 Share

Recommended Posts

Christopher Bergin Newbie

Christopher Bergin

Posted
Posted

Can anyone think of a way to delay the return of a Javascript function? I'm trying to perform a quick email validation using Javascript. If the email is valid, I would like to send a success message to the HTML document. (it's actually a PHP document that includes the form) The success message flashes on the screen for a second before vanishing. I would like the message to remain for perhaps 6 seconds before disappearing. The message indicating an invalid email remains on the screen because the Javascript function in that particular instance returns a value of false. It's when the function returns a value of true that the message becomes a blip. I tried using a setTimeout function but the way I'm trying to use it doesn't work. The HTML form has an ID of 'formstyle'.

Here is the function:

 

function errorCheck()
    { var email= document.getElementById('email');
      var success= document.getElementById('success');
      var status;
      if ((email.value.length > 6) && (email.value.search('@') > 0))
          { success.textContent= 'your request has been sent!';
           status= setTimeout('return true', 6000); }
      else
         {message.textContent= '  invalid email address';
          return false; } }
          

document.getElementById('formstyle').onsubmit= errorCheck;  

Link to comment
Share on other sites
HartleySan Newbie

HartleySan

Posted
Posted

You needn't be so humble (or falsely modest). You're a smart dude.

Anyway, here's some overly simplistic code to illustrate my idea. The code should work out of the box.

 

 

<!DOCTYPE html>

 
<html lang="en">
 
  <head>
   
    <meta charset="UTF-8">
   
    <title>Message delay test</title>
   
  </head>
 
  <body>
   
    <form action="" method="post">
     
      <p>Enter your email address and submit the form. (Don't worry. Nothing will actually happen with your email address.)</p>
     
      <label for="email">Email</label>
     
      <input type="text" id="email" name="email">
     
      <input type="submit" value="Submit">
     
    </form>
   
    <p id="message" style="background: #7D4; border: green solid 2px; display: none;">Email address sent. Thank you very much.</p>
   
    <script>
     
      document.forms[0].onsubmit = function () {
       
        document.getElementById('message').style.display = 'inline';
       
        setTimeout(function () {
         
          document.getElementById('message').style.display = 'none';
         
        }, 2000); // Hide again after displaying for 2 seconds.
       
        return false;
       
      };
     
    </script>
   
  </body>
 
</html>
Link to comment
Share on other sites
Christopher Bergin Newbie

Christopher Bergin

Posted
  • Author
Posted

I was able to get the message to display for 6 seconds before the submission of the form, all without having to use an Ajax object.

 

 

function errorCheck()
    { var success= document.getElementById('success');
      var email= document.getElementById('email');
      var message = document.getElementById('message'); 
      if ((email.value.length > 6) && (email.value.search('@') > 0))
        { success.textContent= 'your request has been sent';
          setTimeout(function(){ document.getElementById('formstyle').submit(); },6000); }
      else
           message.textContent= '  invalid email address';
           
      return false;     }
      
          
document.forms[0].onsubmit= errorCheck; 
Link to comment
Share on other sites
HartleySan Newbie

HartleySan

Posted
Posted

You shouldn't have to ever use an Ajax object to make a message appear and disappear after a certain amount of time. There's no connection between the two.

 

With that said, while I don't ultimately know what the "formstyle" element is, it looks like you're waiting 6 seconds to submit the form, which makes no sense to me.

Is that what's going on?

Link to comment
Share on other sites
Christopher Bergin Newbie

Christopher Bergin

Posted
  • Author
Posted

yes, that is what's going on. I didn't know how else to trigger the form submission to the PHP script without returning a value of true from the function, in which case, the message wouldn't appear. If the value of the function returned false, the form wouldn't get submitted, right? So, I forced the submission after 6 seconds and allowed the function to return false.

Link to comment
Share on other sites
HartleySan Newbie

HartleySan

Posted
Posted

Yes, that's right. If you return false, the default form submission would be suppressed and not performed (which is what you want, right?).

 

Let's think about it this way, there are two ways to submit a form: the normal way and via Ajax.

If you do the normal way, then there's no point of having the message sit on the screen for a set amount of time because either you're going to submit the form immediately (which is what you should do if you go with the normal way of submitting forms) or you cause a delay (like what you're doing now), and then submit the form after that.

 

I guarantee that if you force your users to wait to submit a form just to display a message, they will get annoyed.

As such, you should be using Ajax to submit the form (if you want it to be more "Web 2.0", that is).

 

Here's what I would do:

1) On submitting the form, suppress the normal form submission, and use Ajax to send an asynchronous request to a PHP script.

2) Process the Ajax request and send back a response.

3) If the response is "OK", then display the okay message.

4) After displaying the message, set the timer for the message to disappear.

 

In other words, you should neither confirm nor deny the success of a form submission until you're sure it's okay or not (i.e., until after you have gotten a response from the PHP script via Ajax).

 

That make sense?

Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...