# JavaScript: Combining Form Functions



## juparis (Jan 3, 2004)

I'm trying to (using JavaScript) perform the following functions: 1. Check all fields (and prevent submission if blank fields are found) 2. Check that the password is the same in two text fields. 3. Check the same for the email, and check the email format. 4. Prevent multiple submissions. 
Since I couldn't find or create a script with all of those functions, I took several different scripts and tried using them on the same page. Sadly, none of them work when I try to use them together. Does anyone know why they wouldn't be working, or how to combine them all into one simple script? 

Here's the basic stuff:


..........


Not to sound like an impatient jerk, but if at all possible, it would really help me to get this done within a few days. I'm sorta on a limit, but got stuck once I reached this far... Here's the test page.


----------



## dmneoblade (Apr 15, 2004)

wow... it sends me to google. @[email protected]
try removing 

```
// End -->
</script>
<SCRIPT LANGUAGE="JavaScript">
<!--
```
For starters...

also, try to break the code up into funtions that make sense. something like:

```
function CompareElements(one,two) 
   {
   if (one == two) 
      {
      return true;
      }
   else
      {
      alert ("I'm sorry, you did not correctly fill out this form. Please make sure you email and passwords match.");
      return false;
      }
   }
```
Which can work for both email and password checking.

also, I am not too knowlegeable about Javascript (PHP is nicer for stuff like this,) but which is correct syntax:
return(true);
or
return true;

You may also want to give more specific names to the form elements. IE:
Email
EmailConfirm
Password
PasswordConfirm
etc.
And make the password boxes actual password boxes! It is bad practice to show passwords in plaintext!
And, you might want to check all the lines for ending semicolons.
They should come after everything except for:
{
}
if,when,for,do-while statements
and function declarations.


----------



## juparis (Jan 3, 2004)

It sends you to google??? Uhh.... not sure what to say about that, but I guess you can already tell how bad I am with JavaScript.... Desperate attempts that always end in failure...  

Anyway, I still don't know how to get that code tidbit to work for both the email and password fields...  Oh, and I don't know how to make password fields.. I searched on other sites, but most of them didn't have any, so I just left them as they were... I'm a lot dumber than you may think... One more thing; now that I've changed some of the code, a seperate CSS code doesn't work anymore. I can work around that, but it's got me baffled as to how...

Thanks for your help so far!


----------



## dmneoblade (Apr 15, 2004)

Well, glad to see you sticking to it. Post the cleaned code, and we will go from there.


----------



## juparis (Jan 3, 2004)

Okay, I'm back, and I posted what I hope to be the 'cleaned' code...:




So, what's wrong now...


----------



## dmneoblade (Apr 15, 2004)

Lots wrong with it. Replace everything in the script tags(including the script tags themselves) with this:

```
<script type="text/javascript">
<!-- Begin

var formerrormsg="Please Wait...\n You've already submitted the form once."

function checksubmit(submitbtn)
   {
   submitbtn.form.submit();
   checksubmit = blocksubmit;
   return false;
   }

function blocksubmit()
   {
   if (typeof formerrormsg!="undefined")
      {
      alert(formerrormsg);
      }
   return false;
   }

function ComparePassword(one,two)
   {
   one = form.Password.value;
   two = form.PasswordConfirm.value;
   if (one == two)
      {
      return true;
      }
   else
      {
      alert ("I'm sorry, you did not correctly fill out this form. Please make sure your passwords match.");
      return false;
      }
   }

function CompareEmail(one,two)
   {
   one = form.Email.value;
   two = form.EmailConfirm.value;
   if (one == two)
      {
      return true;
      }
   else
      {
      alert ("I'm sorry, you did not correctly fill out this form. Please make sure your emails match.");
      return false;
      }
   }

function validateForm()
   {
   for(i=0;i<=4;i++)
      {
      if(document.UD.elements[i].value=="")
         {
         var count=1;
         var msg=msg+"\n"+document.UD.elements[i].name;
         }
      else if((i>3) && (count==0))
         {
         return(true);
         }
      }
   for(i=0;i<=4;i++)
      {
      if(document.UD.elements[i].value=="")
         {
         alert("PLEASE FILL IN THE FOLLOWING FIELD(S)\n "+msg);
         document.UD.elements[i].focus();
         return(false);
         }
      }
   }
function checkEmail(myForm) 
   {
   if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myForm.Email.value))
      {
      return (true);
      }
   else
      {
      alert("Invalid E-mail Address! Please re-enter.");
      return (false);
      }
   }
// End -->
</script>
```


----------



## juparis (Jan 3, 2004)

Hmm...  None of the scripts are working yet; is there something wrong with my form tag? You can view the page here if you need to. I'm not sure what else it could be...
Thanks for your help so far anyway; I appreciate it!


----------



## dmneoblade (Apr 15, 2004)

God, give me a bit on this one. Remember: The only information about javascript that I know is how to break through scripts. I can't actually code any of my own.


----------



## dmneoblade (Apr 15, 2004)

Replace current Javascript with this:

```
<script type="text/javascript">
<!-- Begin

var formerrormsg="Please Wait...\n You've already submitted the form once."

function checksubmit()
   {
   var passok = ComparePassword();
   if(passok == true)
      {
      var emailok = CompareEmail();
      var realemail = CheckEmail();
      if(emailok == true && realemail == true)
         {
         var formdone = validateForm();
         if(formdone == true)
            {
            ////////////////////////////////////////
            //INPUT SEND TO CGI SCRIPT STUFF HERE!//
            ////////////////////////////////////////
            }
         else
            {
            return false;
            }
         }
      else
         {
         return false;
         }
      }
   else
      {
      return false;
      }
   }

function ComparePassword()
   {
   var one = form.Password.value;
   var two = form.PasswordConfirm.value;
   if (one == two && one)
      {
      return true;
      }
   else
      {
      alert ("I'm sorry, you did not correctly fill out this form. Please make sure your passwords match.");
      return false;
      }
   }

function CompareEmail()
   {
   var one = form.Email.value;
   var two = form.EmailConfirm.value;
   if (one == two && one)
      {
      return true;
      }
   else
      {
      alert ("I'm sorry, you did not correctly fill out this form. Please make sure your emails match.");
      return false;
      }
   }

function validateForm()
   {
   for(i=0;i<=4;i++)
      {
      if(!document.UD.elements[i])
         {
         var count=1;
         var msg=msg+"\n"+document.UD.elements[i].name;
         }
      else if((i>3) && (count==0))
         {
         return true;
         }
      }
   for(i=0;i<=4;i++)
      {
      if(!document.UD.elements[i])
         {
         alert("PLEASE FILL IN THE FOLLOWING FIELD(S)\n "+msg);
         document.UD.elements[i].focus();
         return false;
         }
      }
   }
function checkEmail(myForm) 
   {
   if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myForm.Email.value))
      {
      return true;
      }
   else
      {
      alert("Invalid E-mail Address! Please re-enter.");
      return false;
      }
   }
// End -->
</script>
<!-- End JavaScript Massacre -->
```
Altering it for your CGI script, where I put the big comment
and replace the Opening form tags with this:

```
<form METHOD=POST NAME="myForm" ACTION="javascript:checksubmit"> 
<INPUT NAME=subject TYPE=HIDDEN VALUE="&#74;&#101;&#114;&#115;&#99;&#111;&#110;&#115;&#105;&#110;&#32;&#83;&#105;&#103;&#110;&#32;&#85;&#112;">
<INPUT NAME=nextpage TYPE=HIDDEN VALUE="&#104;&#116;&#116;&#112;&#58;&#47;&#47;&#119;&#119;&#119;&#46;&#102;&#114;&#101;&#101;&#119;&#101;&#98;&#115;&#46;&#99;&#111;&#109;&#47;&#106;&#101;&#114;&#115;&#99;&#111;&#110;&#115;&#105;&#110;&#47;&#111;&#107;&#46;&#104;&#116;&#109;">
<INPUT NAME=emailto TYPE=HIDDEN VALUE="&#105;&#114;&#111;&#110;&#103;&#101;&#99;&#107;&#111;&#50;&#48;&#48;&#49;&#64;&#97;&#111;&#108;&#46;&#99;&#111;&#109;">
```
Which fixes the script, and makes it a bit more secure.

Now, this SHOULD work. but no guarantees. Remember, I am working for free right now...


----------



## juparis (Jan 3, 2004)

Ok, the script isn't mine; I'm using it off of a different site, so I have no CGI experience. I'm looking for a script I can manipulate myself, but would I need to alter the script itself to work with the JavaScript?


----------



## dmneoblade (Apr 15, 2004)

well, does the script have any documentation?


----------



## juparis (Jan 3, 2004)

Um, sorry, but I don't know what that means...


----------



## dmneoblade (Apr 15, 2004)

Did you get any information from the company about how the CGI script you are paying for works?


----------



## juparis (Jan 3, 2004)

No; I guess it's a service for those who want nothing to do with CGI, heh. Last I checked the site it was looking pretty bad and under construction. I downloaded a free customizable FormMailer script, but I haven't finished figuring it out so I can edit it yet. When I'm done I'll post it and let you judge it's worth or whatever...


----------



## dmneoblade (Apr 15, 2004)

sounds good.


----------



## juparis (Jan 3, 2004)

Forgive my delay, but everything in CGI or Perl or whatever confused me quite a bit. This is a free script, so I'm not sure how reliable it is, but I've tried changing it to everything I need anyway. Some (a lot, actually) of the script was left untouched, and I'm still not sure if it's necessary, but I didn't want to demolish the whole code. I saved it as an attatchment because it seem unreasonably large.. It's saved as a .txt, but it's original format was .pl (not sure what that means either).


----------

