Validate Form and Please Wait after clicking Submit Button

I have written a form is ASP with JS validations.  The form contains text fields and areas to upload files.  Validation of the form occurs after the Submit button is pressed.  If all areas of the form are good, a window appears (return confirm), asking the user to click OK to submit or Cancel to abort the submission.  All works well but it takes up to a minute to upload the "attached" files.  I do not want the user to click the Submit button again.  

I have tried combining several expert solutions from the Exchange without desired result.

Right now if you click the submit button, the form is submitted immediately without going through the validation steps.  My desired result:  Submit button is pressed, form is checked by the validator.  If all is good, a confirmation box (return confirm) appears asking the user to click OK or Cancel.  If they click OK, the form is submitted and the Submit button is disabled.
<form action="new4.asp" method="post" enctype="multipart/form-data" name="form1" id="form1" onsubmit="return Form1_Validator(this)">
.
.
<input type="submit" name="submit1" onClick="this.disabled=true;">
</form>

Open in new window

arendt73Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ASPSQLServerCOMCommented:
the other option you can use is when user click on submit button at that time call javascript which will display div with progress or processing some image and as soon as your javascript validation and other thing is done, hide the div and show ok ... message box, in this mark div with highest z index so it will be on top of all the other component and user will not be able to edit any item too
0
arendt73Author Commented:
An image or "Please Wait" was another thing I was thinking about, besides disabling the submit button.  Can you lend assistance with the code?  Thank you.
0
ASPSQLServerCOMCommented:
you require simple div with please wait image in it

Your CSS:

#curtain {
  position: fixed;
  _position: absolute;
  z-index: 99;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  _height: expression(document.body.offsetHeight + "px");
  background: url(curtain.png);
  _background: url(curtain.gif);
}

http://stackoverflow.com/questions/205631/javascript-loadingbusy-indicator-or-transparent-div-over-page-on-event-click

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_23667644.html
<div id="pleasewait" class="MDIV">
      <table class="MTABLE">
            <caption class="MCAPTION">
                  <span class="MTitle_SPAN">Please wait [or your image]</span>
            </caption>
            <tr>
                  <td>
                        This may take some time.
                  </td>
            </tr>
      </table>
</div>

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

ASPSQLServerCOMCommented:
oops , div in code refer to different CSS

it has to be

<div id="pleasewait" class="curtain">

for show hide div code

function showDiv(){
   document.getElementById('pleasewait').style.visibility="visible";
}

function hideDiv(){
   document.getElementById('pleasewait').style.visibility="hidden";
}
0
rhodesbCommented:
Here is what I would do:
(1) get rid of the onsubmit in the form tag
(2) create a custom javascript submit function to handle what you want to do
(3) change the submit button to a regular button that calls the new javascript function when clicked

It is a bit quick and dirty but it will definitely do what you want.  Post anymore problems you have with my code and I'll help you.
(1)
<form action="new4.asp" method="post" enctype="multipart/form-data" name="form1" id="form1">
 
(2)
function submitFunction(elem){
  if(Form1_Validator(document.getElementById("form1")){
    var answer = confirm("Press OK to submit, Cancel to abort");
    if(answer){
      elem.disabled = true;
      document.getElementById("form1").submit();
    }
    else{
      return false;
    }
  }
}
 
(3)
<input type="button" name="submit1" onClick="submitFunction(this);">

Open in new window

0
arendt73Author Commented:
Tried it but it didn't work.  If I click the Submit button, I receive a validation message that the first text field requires information (this is what should happen).  But if I click the OK button or X out of the window, the form is submitted.

Below is a small snippet of the form validation.
function Form1_Validator(theForm)
{
 
var alertsay = ""; 
 
if (theForm.submitter.value == "")
{
alert("Please enter name in the \"Name\" field");
theForm.submitter.focus();
return (false);
}
 
if (theForm.submitter.value.length < 8)
{
alert("Please enter at least 8 characters in the \"Name\" field");
theForm.submitter.focus();
return (false);
}
.
.
.
.
return confirm("All validations have succeeded and the form is ready to be submitted. Click the OK button to finalize or Cancel to abort.");
}

Open in new window

0
rhodesbCommented:
Ok, I didn't realize that you put the final confirmation in your validator function so I altered the function to take out the extra one that I put in (1).

Did you change the submit button to a regular button:
<input type="button" .... >
instead of
<input type="submit" ...>

If this doesn't work, post the whole page and I'll find the problem.

(1)
function submitFunction(elem){
  if(Form1_Validator(document.getElementById("form1")){
      elem.disabled = true;
      document.getElementById("form1").submit();
  }
  else{
    return false;
  }
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
arendt73Author Commented:
Ok, this semi-worked.  All areas were validated, received a confirmation (Ok or Canel option) to submit, and the Submit button was disabled.  But the information was not processed (form action=new4.asp).  New4.asp sends all of the information to an email with attachments (see below).  After clicking Ok to submit, everything appears well, but it is not redirected to a Thank you page, rather a blank page.  

The email and attachments features were working prior to adding the disable Submit button feature.  

Anyway, attached is a small edited portion of the New4.asp file:
<%
Session.Timeout = 500
%>
<%
   Set Upload = Server.CreateObject("Persits.Upload")
   Upload.IgnoreNoPost = True
 
   Upload.Save "c:\inetpub\wwwroot\change\"
 
   If Upload.Form("Send") <> "" Then
		Set Mail = Server.CreateObject("Persits.MailSender")
		Mail.Host = "256.256.100.100"
		Mail.AddAddress Upload.Form("division")
		Mail.From = "noreply@test.net"
		Mail.FromName = Upload.Form("submitter")
		Mail.Subject = "Notification of Change" 
 
                  App = "Submitter's Name:  " & vbCrLf & cStr(Upload.Form("submitter")) & vbCrLf & vbCrLf &_	  
.                  
.
.
Mail.Body = App
 
      If Not Upload.Files("Attachment") Is Nothing Then
         Mail.AddAttachment Upload.Files("Attachment").Path
         Mail.AddAttachment Upload.Files("Attachment2").Path 
         Mail.AddAttachment Upload.Files("Attachment3").Path
 
      End If
 
      Mail.Send
 
	  Response.Redirect "thankyou-firm.asp" 
   End If
%>

Open in new window

0
ASPSQLServerCOMCommented:
try with your original code
function Form1_Validator(theForm)
{
 document.getElementById('pleasewait').style.visibility="visible";
var alertsay = ""; 
 
if (theForm.submitter.value == "")
{
alert("Please enter name in the \"Name\" field");
theForm.submitter.focus();
return (false);
}
 
if (theForm.submitter.value.length < 8)
{
alert("Please enter at least 8 characters in the \"Name\" field");
theForm.submitter.focus();
return (false);
}
.
.
.
.
var returnValue =confirm("All validations have succeeded and the form is ready to be submitted. Click the OK button to finalize or Cancel to abort.");
if (returnValue)
{
//user click ok so return true, here you can keep please wait div as show, two reason, one it has highest z index so it will not allow user to again click on submit button, two it still display processing image, here at this time you can also display different image like uploading file or something like that using javascript
return true;
}
else
{ //user click cancel so display the form
document.getElementById('pleasewait').style.visibility="hidden";
return false;
}
}

Open in new window

0
ASPSQLServerCOMCommented:
here check browser URl, is it displaying http://....../.../new4.asp
if yes then insert the same above type of div code

also are you getting the email even if it display the blank page

could it be possible to display the thank you form content in new4.asp only
0
rhodesbCommented:
If it is not redirecting to thankyou-firm.asp then the condition for the If statement that matches line 34 is not being met, what is that condition?
0
arendt73Author Commented:
ASPSQLServerCOM's response to adding code did not work (10:51AM EST, ID: 22905466).  

No, I am not getting an email when the blank page is displayed.  Yes, I would be willing to display a "Thank You" comment on new4.asp but would prefer a redirect to the thank you page.
0
ASPSQLServerCOMCommented:
hi, check your first form its body should read like

<form action="new4.asp" method="post" enctype="multipart/form-data" name="form1" id="form1">

or if you are using javascript then it has to be post/submit and not url.replace ......... or asp code then not response.redirect becuase in that case it is not going to post the variabvle data

0
rhodesbCommented:
What is the condition for the IF statement that matches line 34?
0
ASPSQLServerCOMCommented:
check your  If Upload.Form("Send") <> "" Then, i think it is not able to populate the data and thats why it is blank and failing, displays the blank page
0
arendt73Author Commented:
Does it have anything to do with changing the Submit button type from "submit" to "button"?
What the button looked like before change:
 
<input name="Send" type="submit" id="Send" value="Submit Change Notification">
 
What it looks like now:
 
<input name="Send" type="button" id="Send" value="Submit Change Notification" onClick="submitFunction(this);">

Open in new window

0
arendt73Author Commented:
RHODESB:  the IF statement on line 34 refers to:

   If Upload.Form("Send") <> "" Then

From line 6
0
ASPSQLServerCOMCommented:
in this case could it be possible for yuou to copy paste the submitFunction(this); javascript function
0
rhodesbCommented:
It might, that is why I wanted to see the condition that matches the end if that is right after the response.redirect.
I think that a submit button submits its value with the rest of the form data but a button doesn't (I'm not positive about this).
So if the condition in the If statement looks for the value of the submit button, then it won't work.
0
rhodesbCommented:
So that is definitely the problem then.  Change the name and the id of the button to nothing, then create a hidden field that has name="send" id="send" and something as the value.  Problem solved.
0
rhodesbCommented:
Or change your if statement to check for the value of another field in the form besides the submit button.
0
arendt73Author Commented:
Per rhodesb comment, I changed the value of the:

If Upload.Form("Send") <> ""

to another field in the form

If Upload.Form("location") <> ""

and it worked!  

The form properly validated all fields, received a message to submit, the button was disabled, redirected to the correct page, and the information was received in an email.
0
rhodesbCommented:
Great to hear!  Anything else?
0
arendt73Author Commented:
I think I am good to go.  Big thanks to ASPSQLServerCOM for getting me started down the right path and rhodesb for the assist.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.