Solved

Help with JavaScript form needed

Posted on 2003-11-29
18
361 Views
Last Modified: 2008-03-03
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.

0
Comment
Question by:john-formby
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 5
  • 3
18 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 9842669
you mean
<form name="simpleForm" onSubmit="return submitIt(this)" method="post" action="mailto:john@hisIsp.com"
enctype="text/plain">
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 9842680
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
 
LVL 10

Accepted Solution

by:
NetGroove earned 0 total points
ID: 9842712
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 9842715
yeah yeah... Or Or... Come one Net - no need to take over this one.. I got it covered.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 9842719
There is NO difference in result between my second and your first suggestion. Only fluff
0
 
LVL 14

Author Comment

by:john-formby
ID: 9842751
It has to be an alert box.  I tried the above but it won't display when submit is pressed.
0
 
LVL 10

Expert Comment

by:NetGroove
ID: 9842758
I am out. Take it Michel.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 9842838
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 9842842
PS: NEVER call anything submt or you cannot submit using script
0
 
LVL 14

Author Comment

by:john-formby
ID: 9842900
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
 
LVL 10

Expert Comment

by:NetGroove
ID: 9843116
Why did you not check my proposal?

0
 
LVL 10

Expert Comment

by:NetGroove
ID: 9843118
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 9843156


<!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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 9843160
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 9843164
I will watch tv with my daughter now. I will be back in about 2 hours
0
 
LVL 14

Author Comment

by:john-formby
ID: 9843180
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
 
LVL 10

Expert Comment

by:NetGroove
ID: 9843210
Thanks for the points.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 9843484
Thanks...
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

737 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question