I am a beginner student in web design and this is a project I was given but no matter what I do the form just won't submit. even if all the input is correct it still doesn't do anything after I click submit. Any help is appreciated. I have googled for an hour but nothing I do works.
This is just a simple structure of a form. My main goal is to validate the code and sent to a PHP script.
<html>
<head>
<title>Form</title>
<style>
h1,h2 {
color:red;
text-align:center;
}
#form {
padding-left: 80px;
}
.fullname{
//border:1px solid;
padding:0 0 0 80px;
margin:0;
color:red;
font-style:italic;
font-size:13px;
white-space:nowrap;
//float:left;
//visibility:hidden;
}
.N {
//border-color:red;
border-radius:5px;
//text-shadow:0 0 2px #ddd;
}
</style>
</head>
<body>
<h1>Welcome</h1>
<!--onSubmit="return !!(validateFName() & validateLName() & validateGender() & validateMonth() & validateDay() & validateYear());" -->
<form id="form" name="myForm" action="new1.php" onSubmit="return validateName()" >
First Name:<input class="N" type="text" name="fname" value="enter name
here" /><br>
<div id="errorFName" class="fullname"></div>
Last Name:<input class="N" type="text" name="lname" value="enter name here"/><br>
<div id="errorLName" class="fullname"></div>
Gender:<br>
<input type="radio" name="sex" value="Male">Male
<input type="radio" name="sex" value="Female">Female<br>
<div id="gender" class="fullname" style="padding:0 0 0 15px;"></div>
Date Of Birth:<br>
Month:
<select name="month">
<option value="0">--Select Month--</option>
<option value="1">Janaury</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
 
Day:
<select name="day">
<option value='No'>--Select Day--</option>
<option value='Mo'>Monday</option>
<option value='tu'>Tuesday</option>
<option value='we'>Wednesday</option>
<option value='th'>Thursday</option>
<option value='fr'>Friday</option>
<option value='sa'>Saturday</option>
<option value='su'>Sunday</option>
</select>
 
Year:
<select name="year">
<script>
for(var i = 2017; i >= 1900; i--){
document.write('<option value="'+i+'">'+i+'</option>');
}
</script>
</select>
<br>
<span id="month_div" class="fullname" style="padding:0 0 0 60px;"></span>
<span id="day_div" class="fullname" style="padding:0 0 0 80px;"></span>
<span id="year_div" class="fullname" style="padding:0 0 0 65px;"></span><br>
<input type="submit" value="Submit">
</form>
<script>
var firstName = document.forms.myForm.fname;
var lastName = document.forms.myForm.lname;
var gender = document.forms.myForm.sex;
var months = document.forms.myForm.month;
var days = document.forms.myForm.day;
var years = document.forms.myForm.year;
var fname_error = document.getElementById("errorFName");
var lname_error = document.getElementById("errorLName");
var gender_error = document.getElementById("gender");
var month_error = document.getElementById("month_div");
var day_error = document.getElementById("day_div");
var year_error = document.getElementById("year_div");
function validateName() {
var validity = true;
validity &= validateFName();
validity &= validateLName();
validity &= validateGender();
validity &= validateMonth();
validity &= validateDay();
validity &= validateYear();
return validity;
}
function validateFName() {
if (firstName.value === "enter name here") {
firstName.value = "";
firstName.style.border = "1px solid red";
fname_error.textContent = "Fill User Name";
return false;
}
if (firstName.value !== "enter name here") {
// fname_error.innerHTML = "";
return true;
}
}
function validateLName() {
if (lastName.value === "enter name here") {
lastName.value = "";
lastName.style.border = "1px solid red";
lname_error.textContent = "Fill User Name";
return false;
}
}
function validateGender() {
if (gender[0].checked || gender[1].checked) {
gender_error.innerHTML = "";
return true;
} else {
gender_error.textContent = "select your sex";
return false;
}
}
function validateMonth() {
if (months.value !== "0") {
month_error.innerHTML = "";
day_error.style.padding = "0 0 0 175px";
return true;
} else {
month_error.textContent = "select the month";
return false;
}
}
function validateDay() {
if (days.value !== "No") {
day_error.innerHTML = "";
year_error.style.padding = "0 0 0 150px";
return true;
} else {
day_error.textContent = "select the day";
//day_error.style.padding = "0 0 0 80px";
return false;
}
}
function validateYear() {
if (years.value !== "2017") {
year_error.innerHTML = "";
return true;
} else {
year_error.textContent = "select the year";
return false;
}
}
</script>
</body>
</html>
edit: just tried to debug it this way and it seems that the code just passed through even if the return value is true.
the out put is always "it doesnt work"
function validateName() {
var validity = true;
validity &= validateFName();
if (validity === true)
alert("it works FName");
validity &= validateLName();
if (validity === true)
alert("it works LName");
validity &= validateGender();
if (validity === true)
alert("it works Gender");
validity &= validateMonth();
if (validity === true)
alert("it works Month");
validity &= validateDay();
if (validity === true)
alert("it works Day");
validity &= validateYear();
alert("it works Year");
if (validity === true)
return validity;
else
alert("it dosnt works");
}
edit 2. now my problem is with submit. it submits the form without validating any input. it should say "please fill the fields" but it just goes to the php file.
