Help with JavaScript form needed

Hi,
   I have made a simple form in HTML which uses JavaScript to validate certain fields as part of my college course.  I  had it so that when all fields were correct and the form was submitted my php script sent the results to my email.  Unfortunately I have been told that I am not allowed to have a form that actually uses any CGI or PHP scripts.  What I have to do is return the results in an alert box when the form is submitted.  I have tried a couple of things but I can't get it to work.  Can someone please give me some advice on how I would go about this.

Below is the code for my page and my CSS file

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>My JAVASCRIPT Form</title>

<script language="javaScript" type="text/javaScript">
<!-- Hide script from older browsers

      function validEmail(email) {
                  invalidChars = " /:,;"
      
                  if (email == "") {
                        return false
                  }
                  for (i=0; i<invalidChars.length; i++) {
                        badChar = invalidChars.charAt(i)
                        if (email.indexOf(badChar,0) > -1) {
                              return false
                        }
                  }
                  atPos = email.indexOf("@",1)
                  if (atPos == -1) {
                        return false
                  }
                  if (email.indexOf("@",atPos+1) > -1) {
                        return false
                  }
                  periodPos = email.indexOf(".",atPos)
                  if (periodPos == -1) {
                        return false
                  }
                  if (periodPos+3 > email.length)      {
                        return false
                  }
                  return true
            }


      function submitIt(myForm) {


                  gendOption = -1
                  for (i=0; i<myForm.gender.length; i++) {
                        if (myForm.gender[i].checked) {
                              gendOption = i
                        }
                  }
                  if (gendOption == -1) {
                        alert("You must choose a gender")
                        return false
                  }
      
                  if (myForm.urname.value == "") {
                        alert("Please enter your name")
                        myForm.urname.select()
                        return false
                  }

                  if (!validEmail(myForm.email.value)) {
                        alert("Invalid email address")
                        myForm.email.focus()
                        myForm.email.select()
                        return false
                  }

                  if (myForm.passwd1.value == "") {
                        alert("You must enter a password")
                        myForm.passwd1.focus()
                        return false
                  }
                  if (myForm.passwd1.value != myForm.passwd2.value) {
                        alert("Entered passwords did not match")
                        myForm.passwd1.focus()
                        myForm.passwd1.select()
                        return false
                  }
                  return true
      }
            
// End hiding script -->
</script>

<link href="style.css" rel="stylesheet" type="text/css">

</head>


<body>


<table width="570" align="center" border="0" cellpadding="4" cellspacing="0">
<form name="simpleForm" onSubmit="return submitIt(this)" method="post" action="">

        <tr>
          <td width="170" class="f1">Gender:</td>
          <td width="400" class="f2"><input name="gender" type="radio" value="male">Male <input name="gender" type="radio" value="female">Female</td>
        </tr>
        <tr>
          <td class="f1">Interests:</td>
          <td class="f2"><input name="fball" type="checkbox" value"yes">Football <input name="rugb" type="checkbox" value"yes">Rugby</td>
        </tr>
        <tr>
          <td class="f1">Your name:</td>
          <td><input class="boxes" name="urname" type="text" size="30"></td>
        </tr>
        <tr>
          <td class="f1">Email Address:</td>
          <td><input class="boxes" name="email" type="text" size="30"></td>
        </tr>
        <tr>
          <td class="f1">Choose a password:</td>
          <td><input class="boxes" type="password" name="passwd1"></td>
        </tr>
        <tr>
          <td class="f1">Verify password:</td>
          <td><input class="boxes" type="password" name="passwd2"></td>
        </tr>
        <tr>
          <td valign="top" class="f1">Enquiry:</td>
          <td><textarea class="boxes" name="message" rows="10" cols="42"></textarea></td>
       </tr>
      <tr>
          <td></td>
          <td><input type="image" name="submit" img src="send.gif" width="70" height="25" border="0" alt="Submit"> <a href="javascript:document.simpleForm.reset()"><img src="clear.gif" width="70" height="25" border=0 alt="Reset"></a>
</td>
        </tr>
      </form>

</table>
      
</body>
</html>




CSS file style.css

body      {
      background-color:#555555;
      scrollbar-arrow-color: #9f632b;
                scrollbar-base-color: #555555;
                scrollbar-darkshadow-color: #555555;
                scrollbar-track-color: #777777;
                scrollbar-face-color: #555555;
             scrollbar-shadow-color: #aaaaaa;
                scrollbar-highlight-color: #666666;
                scrollbar-3dlight-color: #666666;
      }

.boxes      {
      font-family: verdana,arial,helvetica,sans-serif;
      color:#222222;
      font-size:12pt;
      border:solid 1px;
      border-color:#000000;
      background-color:#777777
      }


.f1       {
      font-family: verdana,arial,helvetica,sans-serif;
      font-size: 11pt;
      color: #cccccc;
      text-align:right
      }

.f2       {
      font-family: verdana,arial,helvetica,sans-serif;
      font-size: 11pt;
      color: #cccccc;
      }


Thanks in advance,

John.

LVL 14
john-formbyAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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.

Michel PlungjanIT ExpertCommented:
you mean
<form name="simpleForm" onSubmit="return submitIt(this)" method="post" action="mailto:john@hisIsp.com"
enctype="text/plain">
0
Michel PlungjanIT ExpertCommented:
or do you mean

     function submitIt(myForm) {
         text = ""


               gendOption = -1
               for (i=0; i<myForm.gender.length; i++) {
                    if (myForm.gender[i].checked) {
                         gendOption = i
                         text+='Gender: '+myForm.gender[i].value
                    }
               }
               if (gendOption == -1) {
                    alert("You must choose a gender")
                    return false
               }
     
               if (myForm.urname.value == "") {
                    alert("Please enter your name")
                    myForm.urname.select()
                    return false
               }
               text += '\nUserName: '+myForm.urname.value;
               if (!validEmail(myForm.email.value)) {
                    alert("Invalid email address")
                    myForm.email.focus()
                    myForm.email.select()
                    return false
               }
               text += '\nEmail: '+myForm.email.value;

               if (myForm.passwd1.value == "") {
                    alert("You must enter a password")
                    myForm.passwd1.focus()
                    return false
               }
               text += '\nPassword1: '+myForm.passwd1.value;
               if (myForm.passwd1.value != myForm.passwd2.value) {
                    alert("Entered passwords did not match")
                    myForm.passwd1.focus()
                    myForm.passwd1.select()
                    return false
               }
               alert(text)
//               return true
               return false; // cancel submission
     }
0
NetGrooveCommented:
Either like this:

    function submitIt(myForm) {


              gendValue = "";
              for (i=0; i<myForm.gender.length; i++) {
                   if (myForm.gender[i].checked) {
                        gendValue = myForm.gender[i].value;
                   }
              }
              if (gendValue == "") {
                   alert("You must choose a gender")
                   return false
              }
   
               if (myForm.urname.value == "") {
                   alert("Please enter your name")
                   myForm.urname.select()
                   return false
              }

              if (!validEmail(myForm.email.value)) {
                   alert("Invalid email address")
                   myForm.email.focus()
                   myForm.email.select()
                   return false
              }

              if (myForm.passwd1.value == "") {
                   alert("You must enter a password")
                   myForm.passwd1.focus()
                   return false
              }
              if (myForm.passwd1.value != myForm.passwd2.value) {
                   alert("Entered passwords did not match")
                   myForm.passwd1.focus()
                   myForm.passwd1.select()
                   return false
              }
              alert("Gender:\t\t"+gendValue+
                    "\nFootball:\t\t"+myForm.fball.value+
                    "\nRugby:\t\t"+myForm.rugb.value+
                    "\nYour name:\t"+myForm.urname.value+
                    "\nEmail Address:\t"+myForm.email.value+
                    "\nPassword:\t"+myForm.passwd1.value+
                    "\nEnquiry:\t\t"+myForm.message.value);
              return false;

    }


Or instead of the alert open a new popup window and do document.write() into that popup window.
Like this:
  nw = window.open("", "sub", "height=300,width=200");
  nw.document.write("<some html stuff>");
  nw.document.close();
  nw.focus();



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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Michel PlungjanIT ExpertCommented:
yeah yeah... Or Or... Come one Net - no need to take over this one.. I got it covered.
0
Michel PlungjanIT ExpertCommented:
There is NO difference in result between my second and your first suggestion. Only fluff
0
john-formbyAuthor Commented:
It has to be an alert box.  I tried the above but it won't display when submit is pressed.
0
NetGrooveCommented:
I am out. Take it Michel.
0
Michel PlungjanIT ExpertCommented:
Try mine and it works:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>My JAVASCRIPT Form</title>

<script language="javaScript" type="text/javaScript">
<!-- Hide script from older browsers

     function validEmail(email) {
               invalidChars = " /:,;"
     
               if (email == "") {
                    return false
               }
               for (i=0; i<invalidChars.length; i++) {
                    badChar = invalidChars.charAt(i)
                    if (email.indexOf(badChar,0) > -1) {
                         return false
                    }
               }
               atPos = email.indexOf("@",1)
               if (atPos == -1) {
                    return false
               }
               if (email.indexOf("@",atPos+1) > -1) {
                    return false
               }
               periodPos = email.indexOf(".",atPos)
               if (periodPos == -1) {
                    return false
               }
               if (periodPos+3 > email.length)     {
                    return false
               }
               return true
          }


 function submitIt(myForm) {
         text = ""


               gendOption = -1
               for (i=0; i<myForm.gender.length; i++) {
                    if (myForm.gender[i].checked) {
                         gendOption = i
                         text+='Gender: '+myForm.gender[i].value
                    }
               }
               if (gendOption == -1) {
                    alert("You must choose a gender")
                    return false
               }
     
               if (myForm.urname.value == "") {
                    alert("Please enter your name")
                    myForm.urname.select()
                    return false
               }
               text += '\nUserName: '+myForm.urname.value;
               if (!validEmail(myForm.email.value)) {
                    alert("Invalid email address")
                    myForm.email.focus()
                    myForm.email.select()
                    return false
               }
               text += '\nEmail: '+myForm.email.value;

               if (myForm.passwd1.value == "") {
                    alert("You must enter a password")
                    myForm.passwd1.focus()
                    return false
               }
               text += '\nPassword1: '+myForm.passwd1.value;
               if (myForm.passwd1.value != myForm.passwd2.value) {
                    alert("Entered passwords did not match")
                    myForm.passwd1.focus()
                    myForm.passwd1.select()
                    return false
               }
               alert(text)
//               return true
               return false;
}          
// End hiding script -->
</script>


</script>

<link href="style.css" rel="stylesheet" type="text/css">

</head>


<body>


<table width="570" align="center" border="0" cellpadding="4" cellspacing="0">
<form name="simpleForm" onSubmit="return submitIt(this)" method="post" action="">

       <tr>
         <td width="170" class="f1">Gender:</td>
         <td width="400" class="f2"><input name="gender" type="radio" value="male">Male <input name="gender" type="radio" value="female">Female</td>
       </tr>
       <tr>
         <td class="f1">Interests:</td>
         <td class="f2"><input name="fball" type="checkbox" value"yes">Football <input name="rugb" type="checkbox" value"yes">Rugby</td>
       </tr>
       <tr>
         <td class="f1">Your name:</td>
         <td><input class="boxes" name="urname" type="text" size="30"></td>
       </tr>
       <tr>
         <td class="f1">Email Address:</td>
         <td><input class="boxes" name="email" type="text" size="30"></td>
       </tr>
       <tr>
         <td class="f1">Choose a password:</td>
         <td><input class="boxes" type="password" name="passwd1"></td>
       </tr>
       <tr>
         <td class="f1">Verify password:</td>
         <td><input class="boxes" type="password" name="passwd2"></td>
       </tr>
       <tr>
         <td valign="top" class="f1">Enquiry:</td>
         <td><textarea class="boxes" name="message" rows="10" cols="42"></textarea></td>
      </tr>
     <tr>
         <td></td>
         <td><input type="image" name="submit" img src="send.gif" width="70" height="25" border="0" alt="Submit"> <a href="javascript:document.simpleForm.reset()"><img src="clear.gif" width="70" height="25" border=0 alt="Reset"></a>
</td>
       </tr>
     </form>

</table>
     
</body>
</html>

0
Michel PlungjanIT ExpertCommented:
PS: NEVER call anything submt or you cannot submit using script
0
john-formbyAuthor Commented:
I made a typo, I now get an alert box displaying everything apart from the value of the checkboxes.  How do I do this?  Cause this is another question I have increased the points to 350.

At the moment the alert box looks like:

Gender: Male
Name: asdasd
Email: asdas
Password: sdasd
Enquiry: sadasd

But I need:

Gender: Male
Football: Yes (if checked or blank if not)
Rugby: Yes (if checked or blank if not)
Name: asdasd
Email: asdas
Password: sdasd
Enquiry: sadasd

My submitIt(myForm) now looks like:

      function submitIt(myForm) {
            text = ""

                  gendOption = -1
                  for (i=0; i<myForm.gender.length; i++) {
                        if (myForm.gender[i].checked) {
                              gendOption = i
            text +='Gender: '+myForm.gender[i].value
                        }
                  }
                  if (gendOption == -1) {
                        alert("You must choose a gender")
                        return false
                  }

                  if (myForm.urname.value == "") {
                        alert("Please enter your name")
                        myForm.urname.select()
                        return false
                  }
            text += '\nName: '+myForm.urname.value;
                  if (!validEmail(myForm.email.value)) {
                        alert("Invalid email address")
                        myForm.email.focus()
                        myForm.email.select()
                        return false
                  }
            text += '\nEmail: '+myForm.email.value;
                  if (myForm.passwd1.value == "") {
                        alert("You must enter a password")
                        myForm.passwd1.focus()
                        return false
                  }
            text += '\nPassword: '+myForm.passwd1.value;
                  if (myForm.passwd1.value != myForm.passwd2.value) {
                        alert("Entered passwords did not match")
                        myForm.passwd1.focus()
                        myForm.passwd1.select()
                        return false
                  }
                  
            text += '\nEnquiry: '+myForm.message.value;
      
            alert(text)
//               return true
               return false;
      }



Thanks,

John.
0
NetGrooveCommented:
Why did you not check my proposal?

0
NetGrooveCommented:
And move the <form> tag outside of the table. I mean move it in front of the table.
The same with the </form>  Move it after the </table>

0
Michel PlungjanIT ExpertCommented:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>My JAVASCRIPT Form</title>

<script language="javaScript" type="text/javaScript">
<!-- Hide script from older browsers

     function validEmail(email) {
               invalidChars = " /:,;"
     
               if (email == "") {
                    return false
               }
               for (i=0; i<invalidChars.length; i++) {
                    badChar = invalidChars.charAt(i)
                    if (email.indexOf(badChar,0) > -1) {
                         return false
                    }
               }
               atPos = email.indexOf("@",1)
               if (atPos == -1) {
                    return false
               }
               if (email.indexOf("@",atPos+1) > -1) {
                    return false
               }
               periodPos = email.indexOf(".",atPos)
               if (periodPos == -1) {
                    return false
               }
               if (periodPos+3 > email.length)     {
                    return false
               }
               return true
          }


 function submitIt(myForm) {
         text = ""


               gendOption = -1
               for (i=0; i<myForm.gender.length; i++) {
                    if (myForm.gender[i].checked) {
                         gendOption = i
                         text+='Gender: '+myForm.gender[i].value
                    }
               }
               if (gendOption == -1) {
                    alert("You must choose a gender")
                    return false
               }
               if (myForm.fball.checked) text+='\nFootball: yes'
               if (myForm.rugb.checked) text+='\nRugby: yes'

               if (myForm.urname.value == "") {
                    alert("Please enter your name")
                    myForm.urname.select()
                    return false
               }
               text += '\nUserName: '+myForm.urname.value;
               if (!validEmail(myForm.email.value)) {
                    alert("Invalid email address")
                    myForm.email.focus()
                    myForm.email.select()
                    return false
               }
               text += '\nEmail: '+myForm.email.value;

               if (myForm.passwd1.value == "") {
                    alert("You must enter a password")
                    myForm.passwd1.focus()
                    return false
               }
               text += '\nPassword1: '+myForm.passwd1.value;
               if (myForm.passwd1.value != myForm.passwd2.value) {
                    alert("Entered passwords did not match")
                    myForm.passwd1.focus()
                    myForm.passwd1.select()
                    return false
               }
               alert(text)
//               return true
               return false;
}          
// End hiding script -->
</script>


</script>

<link href="style.css" rel="stylesheet" type="text/css">

</head>


<body>

<form name="simpleForm" onSubmit="return submitIt(this)" method="post" action="">

<table width="570" align="center" border="0" cellpadding="4" cellspacing="0">

       <tr>
         <td width="170" class="f1">Gender:</td>
         <td width="400" class="f2"><input name="gender" type="radio" value="male">Male <input name="gender" type="radio" value="female">Female</td>
       </tr>
       <tr>
         <td class="f1">Interests:</td>
         <td class="f2"><input name="fball" type="checkbox" value"yes">Football <input name="rugb" type="checkbox" value"yes">Rugby</td>
       </tr>
       <tr>
         <td class="f1">Your name:</td>
         <td><input class="boxes" name="urname" type="text" size="30"></td>
       </tr>
       <tr>
         <td class="f1">Email Address:</td>
         <td><input class="boxes" name="email" type="text" size="30"></td>
       </tr>
       <tr>
         <td class="f1">Choose a password:</td>
         <td><input class="boxes" type="password" name="passwd1"></td>
       </tr>
       <tr>
         <td class="f1">Verify password:</td>
         <td><input class="boxes" type="password" name="passwd2"></td>
       </tr>
       <tr>
         <td valign="top" class="f1">Enquiry:</td>
         <td><textarea class="boxes" name="message" rows="10" cols="42"></textarea></td>
      </tr>
     <tr>
         <td></td>
         <td><input type="image" name="submit" img src="send.gif" width="70" height="25" border="0" alt="Submit"> <a href="javascript:document.simpleForm.reset()"><img src="clear.gif" width="70" height="25" border=0 alt="Reset"></a>
</td>
       </tr>

</table>
     </form>
     
</body>
</html>
0
Michel PlungjanIT ExpertCommented:
or change
       if (myForm.fball.checked) text+='\nFootball: yes'
       if (myForm.rugb.checked) text+='\nRugby: yes'

to
       text+='\nFootball: '+((myForm.fball.checked) ?"Yes":"")
       text+='\nRugby: '+((myForm.rugb.checked)?"Yes":"")
0
Michel PlungjanIT ExpertCommented:
I will watch tv with my daughter now. I will be back in about 2 hours
0
john-formbyAuthor Commented:
Thanks to both of you.  Have now moved the form tags outside of table and all data is displayed within the alert box.  Cause you both put a lot of effort into this I am going to split the points.  I am giving 125 to NetGroove and 225 to mplugjan.

Thanks again,

John.
0
NetGrooveCommented:
Thanks for the points.
0
Michel PlungjanIT ExpertCommented:
Thanks...
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
JavaScript

From novice to tech pro — start learning today.