Solved

Help with JavaScript form needed

Posted on 2003-11-29
18
335 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
  • 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
 
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

707 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now