asked on

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">

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

Michel Plungjan

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

Michel Plungjan

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
}

ASKER CERTIFIED SOLUTION

NetGroove

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Michel Plungjan

yeah yeah... Or Or... Come one Net - no need to take over this one.. I got it covered.

Michel Plungjan

There is NO difference in result between my second and your first suggestion. Only fluff

john-formby

ASKER

It has to be an alert box. I tried the above but it won't display when submit is pressed.

NetGroove

I am out. Take it Michel.

Michel Plungjan

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">

</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>

Michel Plungjan

PS: NEVER call anything submt or you cannot submit using script

john-formby

ASKER

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.

NetGroove

Why did you not check my proposal?

NetGroove

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>

Michel Plungjan

<!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">

</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>

Michel Plungjan

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":"")

Michel Plungjan

I will watch tv with my daughter now. I will be back in about 2 hours

john-formby

ASKER

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.

NetGroove

Thanks for the points.

Michel Plungjan

Thanks...