Java Script and HTML Form

javascript not executing when pressing submit button

[nalini878]

Ok guys so I have spent the last 4 hours trying to do this and still nothing happens when I press the submit button, can someone please tell me where I have gone wrong or if Im missing something! Below is the javascript code and the html code for the form.

Here is the Java Script:

<SCRIPT language=JavaScript>

function doform(){
with(document.form){
if(firstname.value=="" ){
alert("Missing first name field, Please fill in your

name");
return;
}
if(lastname.value==""){
alert("Missing last name field, Please fill in your

name");
return;
}

var contents = "Your name is: ";
contents += firstname.value;
contents += lastname.value;
contents += "You Are:";
contents += selectedSex;
contents += "Your level of education is: " + level.options

[level.selectedIndex].text;
contents += "Your employment status is: " + status.options

[status.selectedIndex].text;

contents +="Your interests are:\n"

if(english.checked){
interest+= "- English\n";
}
if(maths.checked){
interest+= "- Maths\n";
}
if(biological.checked){
interest+= "- Biological Science\n";
}
if(computer.checked){
interest+= "- Computer Science\n";
}
if(engineering.checked){
interest+= "- Engineering\n";
}
if(geography.checked){
interest+= "- Geography\n";
}
if(languages.checked){
interest+= "- Languages\n";
}

display.value = contents;
}

</SCRIPT>

Here is the Form:

<form name="form">
<td width="50%">First name: <input type="text"

name="firstname" size="20">&nbsp;
<p>Last name: <input type="text" name="lastname"

size="20"></td>
<td width="50%"><input type="radio" name="sex" value="Male">
Male&nbsp;
<p><input type="radio" name="sex" value="Female">

Female</td>
</tr>
<tr>
<td width="50%">&nbsp;
<p><select name="level">
<option value="Select Level of Education">Select Level

of
Education
<option value="GCSE">GCSE
<option value="AS Level">AS Level
<option value="A Level">A Level
<option value="GNVQ">GNVQ
<option value="BTEC">BTEC
<option value="HNC">HNC
<option value="HND">HND
<option value="Undergraduate Degree">Undergraduate

Degree
<option value="Masters Degree">Masters Degree
<option value="PHD">PHD
<option value="Other">Other
</select></p>
<p>&nbsp;</td>
<td width="50%"><select name="status" size="1">
<option value="Select Employment Status">Select

Employment
Status
<option value="Employed F/T">Employed F/T
<option value="Employed P/T">Employed P/T
<option value="Self Employed">Self Employed
<option value="Unemployed">Unemployed
<option value="Student Higher Education">Student Higher
Education
<option value="Student Further Education">Student

Further
Education
<option value="Director">Director
<option value="Retired">Retired
<option value="Volunteer">Volunteer
<option value="Household duties">Household duties
<option value="Government">Government
<option value="Disabled">Disabled</option>
<option value="Independant Means">Independant

Means</option>
</select></td>
</tr>
<tr>
<td width="50%"><b>&nbsp;Please select areas of

interest:</b>
<p>
<input type="checkbox" name="english" value="ON">English&nbsp;&nbsp;<br>
<input type="checkbox" name="maths" value="ON"> Maths&nbsp;<br>
<input type="checkbox" name="biological" value="ON"> Biological

Sciences&nbsp;<br>
<input type="checkbox" name="chemistry" value="ON"> Chemistry<br>
<input type="checkbox" name="computer" value="ON"> Computer

Science&nbsp;<br>
<input type="checkbox" name="engineering" value="ON"> Engineering&nbsp;<br>
<input type="checkbox" name="geography" value="ON"> Geography&nbsp;<br>
<input type="checkbox" name="languages" value="ON"> Languages&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</td>
<td width="50%">&nbsp;&nbsp;<b>Please tell us about

yourself:</b>
<p>
<textarea rows="9" cols="30" name="comments">

</textarea>

</p>

<p>&nbsp;</td>
</tr>
<tr>
<td width="50%" valign="middle" align="center"><input

type="reset" value="Reset">&nbsp;</td>
<td width="50%" valign="middle" align="center"><input

type="button" onclick="doform()" value="Submit"></td>
</tr>
</table>
<p><textarea rows="9" name="display" cols="79"></textarea></p>

</form>

Thanks

[Span]

Hi,
the last curly bracket, right before the </script> tag, was missing..

<SCRIPT language=JavaScript> 
function doform(){ 
with(document.form){ 
if(firstname.value=="" ){ 
alert("Missing first name field, Please fill in your name"); 
return; 
} 
if(lastname.value==""){ 
alert("Missing last name field, Please fill in your name"); 
return; 
}
var contents = "Your name is: "; 
contents += firstname.value; 
contents += lastname.value; 
contents += "You Are:"; 
contents += selectedSex; 
contents += "Your level of education is: " + level.options[level.selectedIndex].text; 
contents += "Your employment status is: " + status.options[status.selectedIndex].text; 
contents +="Your interests are:\n" 
if(english.checked){ 
interest+= "- English\n"; 
} 
if(maths.checked){ 
interest+= "- Maths\n"; 
} 
if(biological.checked){ 
interest+= "- Biological Science\n"; 
} 
if(computer.checked){ 
interest+= "- Computer Science\n"; 
} 
if(engineering.checked){ 
interest+= "- Engineering\n"; 
} 
if(geography.checked){ 
interest+= "- Geography\n"; 
} 
if(languages.checked){ 
interest+= "- Languages\n"; 
} 
display.value = contents; 
} 
}
</SCRIPT> 

[nalini878]

Thanks but for some reason it still doesnt work!

Can anyone see any other problems with it?

[Bernard Marx]

1)
referred to named element: 'selectedSex' (The group name is 'sex')

Can't actually get the selected value from a group of radio buttons by [name].value.
You have to loop through the collection, and find the selected button.
Here's a demo function:

function getRadioValue(group)
{
    var button, k=-1;
    while(button=group[++k])
        if(button.checked)
            return button;
    return '';
}
// usage:
contents += getRadioValue(sex);

2)
Later string concatenation is done to undeclared/unitiatated variable: interest.
Change it to: content