process a javascript function before submitting form

Question

I would like to process a javascript function before a user fully submits a form and the browser waits for the result. More specifically, I only want to overlay the page with a gray layer and display a spinning object while the request is being processed. The outcome of the process will then be displayed in a new page.

Code below fails, proceeds to next page imediately

<script> function showWait() 
  { $('#waitDiv').prepend('<center><img id="theImg" src="wait.gif"/></center>'); 
  return true; 
  } 
</script> 
<form enctype="multipart/form-data" action="uploadPDBFile.php" method="post" onSubmit='javascript:showWait()'> 
  <input type="text" name='name1' placeholder="1dfj"/><br/> 
  <input type="text" name='chain' placeholder="I"/><br/> 
  <input type="hidden" name="upload" value="false" /> <input type="submit" value="Run"/> 
</form>

Answer 1

⇒ Use onSubmit="return validationFn()"

<html>
   <head>
      <script>
         function validate()
         {
            var username = document.forms['login_form']['username'].value;
            var password = document.forms['login_form']['password'].value;
            var Login = document.forms['login_form']['Login'].value;

            //Processing data here
            if (username.length == 0)
            {
               return false;
            }

            if (password.length == 0)
            {
               return false;
            }

            var return_value = true;
            var patt1 = new RegExp("%");
            var patt2 = new RegExp("9");

            // And so on........
            if ((patt1.test(username)) || (patt1.test(password)))
            {
               return_value = false;
            }

            if ((patt2.test(username)) || (patt2.test(password)))
            {
               return_value = false;
               //alert('null');
            }

            if (return_value == false)
            {
               alert('Invalid characters in username or password');
               return return_value;
            }
         }
      </script>
   </head>
   <body>
      <form name='login_form' action='1.php' method='POST' onsubmit='return validate()'>
         <input type='text' name='username' placeholder='Username'/><br>
         <input type='password' name='password' placeholder='Password'/><br>
         <input type='submit' name='Login' value='Submit' style='margin-top:12px;margin-left:50px;'/>
      </form>
   </body>
</html>

process a javascript function before submitting form

Question

1 answers

solution1
0 2013-12-12 23:10:32

process a javascript function before submitting form

Question

1 answers

solution1 0 2013-12-12 23:10:32

solution1
0 2013-12-12 23:10:32