We Keep Coding

required attribute is not working. (html)

I'm making a signup page using HTML and javaScript and it was working fine until I added a function to take the user to the next page, the problem is, if the textboxes where blank and I click on the button, it sends him to the next page instead of showing a validation error to fill them out.
here is the code of the function:
function signup() {
window.location.replace("file:///C:/Users/hb/Desktop/web%20project/afterlogin.html");
var userid = document.getElementById("username").value;
alert("Welcome " + userid);
}
here is the html code for the form:
<form method="post" class="info">
<p>
<label for="username">Username:</label>
<input type="text" id="username" minlength="6" maxlength="18" required /><br /><br />
</p>
<p>
<label for="email">E-mail:</label>
<input type="email" id="email" required /><br /><br />
</p>
<p>
<label for="password" required> Password:</label>
<input type="password" id="password" minlength="10" maxlength="18" required /><br /><br />
</p>
<p>
<label for="confirmpass">Confirm password:</label>
<input type="password" id="confirmpass" minlength="10" maxlength="18" required /><br /><br />
</p>
<p>
<label for="gender">Gender:</label>
<select id="gender">
<option id="male"> Male </option>
<option id="female"> Female </option>
</select><br /><br />
</p>
<p>
<label for="age">Age:</label>
<select id="age">
<option id="young">Young(12-18 years old) </option>
<option id="youth">Youth(19-40 years old) </option>
<option id="old">Old(more than 40 years) </option>
</select><br /><br />
</p>
<div class="terms">
<p>
<input type="checkbox" id="terms" checked="checked" required />
<label for="terms" id="terms">Agree to terms and conditions </label> <br />
</p>
</div>
<button id="button" class="signUpButton" name="SIGN UP" type="submit" onclick="signup();">SIGN UP</button> <br /><br /><br /><br />
<p class="outerAlt">Have an account already?</p>
<p class="alt">SIGN IN</p>
</form>

Instead of listening for a click on the button, listen for the form submission event
eg:
<form onsubmit="signup()">

required attribute stops the form from submitting if the field is empty, it does not stop arbitrary event handlers from changing the page.
If you want to only call your signup when the form is valid make it a form submit handler instead of a button click handler.
<form method="post" class="info" onsubmit="signup();return false;">
...
<button id="button" class="signUpButton" name="SIGN UP" type="submit">SIGN UP</button>

Attribute required is activating when you submit the form. You can click on any button or input inside the form, call event onclick, but it won't be submiting the form. To handle the event of submiting, you have to add onsubmit to your <form> elements and on the code below. Note, that the form submit will reload the page. To avoid this, you have to prevent default behavior by adding event.preventDefault().
function signup(event) {
event.preventDefault();
var userid = document.getElementById("username").value;
alert("Welcome " + userid);
}
<form method="post" class="info" onsubmit="signup(event)">
<p>
<label for="username">Username:</label>
<input type="text" id="username" minlength="6" maxlength="18" required /><br /><br />
</p>
<p>
<label for="email">E-mail:</label>
<input type="email" id="email" required /><br /><br />
</p>
<button id="button" class="signUpButton" name="SIGN UP" type="submit">SIGN UP</button>
</form>

onclick event will call the function when the button is clicked without validating the form. onsubmit event is called after the form is ready to submit (After the validation)
And you can use event.preventDefault(It will stop the page reloading after the submit. More About it) to instead of using return false;
function signup(event){
event.preventDefault();
}
document.getElementById().addEventListener("submit", signup);
Add addEventListener("submit", signup); to call the function onsubmit
Ex: document.getElementById("form1").addEventListener("submit", functionName);
Ex 2:
document.getElementById("form1").addEventListener("submit", function(){
// Code
});
function signup(event) {
event.preventDefault(); location.replace("LOCATION");
var userid = document.getElementById("username").value;
alert("Welcome " + userid);
}
document.getElementById("form1").addEventListener("submit", signup);
<form method="post" id="form1" class="info" data-registerForm>
<p>
<label for="username">Username:</label>
<input type="text" id="username" minlength="6" maxlength="18" required /><br /><br />
</p>
<p>
<label for="email">E-mail:</label>
<input type="email" id="email" required /><br /><br />
</p>
<p>
<label for="password" required> Password:</label>
<input type="password" id="password" minlength="10" maxlength="18" required /><br /><br />
</p>
<p>
<label for="confirmpass">Confirm password:</label>
<input type="password" id="confirmpass" minlength="10" maxlength="18" required /><br /><br />
</p>
<p>
<label for="gender">Gender:</label>
<select id="gender">
<option id="male"> Male </option>
<option id="female"> Female </option>
</select><br /><br />
</p>
<p>
<label for="age">Age:</label>
<select id="age">
<option id="young">Young(12-18 years old) </option>
<option id="youth">Youth(19-40 years old) </option>
<option id="old">Old(more than 40 years) </option>
</select><br /><br />
</p>
<div class="terms">
<p>
<input type="checkbox" id="terms" checked="checked" required />
<label for="terms" id="terms">Agree to terms and conditions </label> <br />
</p>
</div>
<button id="button" class="signUpButton" name="SIGN UP" type="submit">SIGN UP</button> <br /><br /><br /><br />
<p class="outerAlt">Have an account already?</p>
<p class="alt">SIGN IN</p>
</form>

Use JQuery to hide and show a div based on drop down selection

I'm trying to make a dropdown box hide and show a particular set of divs (ofwhich the class and the id are identical).
The values of the drop down correspond to the the name of the divs
My Attempt:
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
$("#submissionType").change(function () {
var submission = $(this).val();
if ($(this).val()) {
$("#"+submission).show();
} else {
$("#"+submission).hide();
}
});
});
</script>
html:
<select id="submissionType">
<option>Choose Submission Type</option>
<option value="member-submission">member-submission</option>
<option value="researcher-submission">researcher-submission</option>
<option value="student-submission">student-submission</option>
<option value="paper-submission">paper-submission</option>
</select>
<div class ="new-member-background">
<div class ="member-submission" id="member-submission">
<form action="SubmitData.php" method="post">
<input type="text" name="first" placeholder="First Name" />
<br/>
<input type="text" name="last" placeholder="Last Name" />
<br/>
<input type="text" name="title" placeholder="Title" />
<br/>
<input type="text" name="institution" placeholder="Institution" />
<br/>
<input type="number" name="dept_code" placeholder="Department Code" />
<br/>
<input type="text" name="division" placeholder="Division" />
<br />
<input type="text" name="email" placeholder="Email" />
<br/>
<input type="text" name="website" placeholder="Website" />
<br/>
<button type="submit" name="submit">Sign Up</button>
</form>
</div>
/**...Other divs...*/
</div>

You should hide them all and then reveal the selected one. EG:
$(function () {
//hide them all to begin with. It would be easier if they all shared a classname. You could also do this in CSS)
$("#member-submission, #researcher-submission, #student-submission, #paper-submission").hide();
//on change
$("#submissionType").change(function () {
var submission = $(this).val();
//hide them all:
$("#member-submission, #researcher-submission, #student-submission, #paper-submission").hide();
//show the selected one
$("#"+submission).show();
});
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<select id="submissionType">
<option>Choose Submission Type</option>
<option value="member-submission">member-submission</option>
<option value="researcher-submission">researcher-submission</option>
<option value="student-submission">student-submission</option>
<option value="paper-submission">paper-submission</option>
</select>
<div class ="new-member-background">
<div class ="member-submission" id="member-submission">
<form action="SubmitData.php" method="post">
<input type="text" name="first" placeholder="First Name" />
<br/>
<input type="text" name="last" placeholder="Last Name" />
<br/>
<input type="text" name="title" placeholder="Title" />
<br/>
<input type="text" name="institution" placeholder="Institution" />
<br/>
<input type="number" name="dept_code" placeholder="Department Code" />
<br/>
<input type="text" name="division" placeholder="Division" />
<br />
<input type="text" name="email" placeholder="Email" />
<br/>
<input type="text" name="website" placeholder="Website" />
<br/>
<button type="submit" name="submit">Sign Up</button>
</form>
</div>
/**...Other divs...*/
</div>

Trying to set a radio button in HTML document using javascript with data from cookie

I have a question. I got this registration form that stores the values into a cookie based on an ID name. When you go back to the same registration form and fill in the ID name that was already saved in a cookie, it will pull the data from cookie and prefill the form.
I have the following code and it works on form fields, but not on radio buttons. Not sure what is going on with radio buttons
//This function fills in the form based on entered conference ID
function fillForm(name) {
var cookie = getCookie(name).toString();
var newCookie = decodeURIComponent(cookie);
var newArray = newCookie.split(";");
//For testing values to make sure they're there
alert(newArray);
document.getElementById("title").value = newArray[0];
document.getElementById("firstname").value = newArray[1];
document.getElementById("lastname").value = newArray[2];
document.getElementById("addressone").value = newArray[3];
document.getElementById("addresstwo").value = newArray[4];
document.getElementById("city").value = newArray[5];
document.getElementById("state").value = newArray[6];
document.getElementById("zipcode").value = newArray[7];
document.getElementById("tel").value = newArray[8];
document.getElementById("email").value = newArray[9];
document.getElementById("website").value = newArray[10];
document.getElementById("position").value = newArray[11];
document.getElementById("companyname").value = newArray[12];
if(newArray[13]) {
document.getElementById("mealone").checked = true;
}
else {
document.getElementById("mealtwo").checked = true;
}
if(newArray[15]) {
document.getElementById("sesonea").checked = true;
}
else if(newArray[16]) {
document.getElementById("sesoneb").checked = true;
}
else {
document.getElementById("sesonec").checked = true;
}
if(newArray[18]) {
document.getElementById("sestwoa").checked = true;
}
else if(newArray[19]) {
document.getElementById("sestwob").checked = true;
}
else {
document.getElementById("sestwoc").checked = true;
}
if(newArray[21]) {
document.getElementById("sesthreea").checked = true;
}
else if(newArray[22]) {
document.getElementById("sesthreeb").checked = true;
}
else {
document.getElementById("sesthreec").checked = true;
}
document.getElementById("billfirstname").value = newArray[24];
document.getElementById("billlastname").value = newArray[25];
if(newArray[26]) {
document.getElementById("carda").checked = true;
}
else if(newArray[27]) {
document.getElementById("cardb").checked = true;
}
else {
document.getElementById("cardc").checked = true;
}
document.getElementById("cardnumber").value = newArray[29];
document.getElementById("csv").value = newArray[30];
document.getElementById("cardexpmonth").value = newArray[31];
document.getElementById("cardexpyear").value = newArray[32];
}
It's driving me nuts. I setup an alert to make sure I can see all the data correctly in the array, but it's not selecting the correct radio buttons.
Edit: HTML form:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="js/jsdefault.js"></script>
<link rel="stylesheet" href="css/webdefault.css">
<meta charset="UTF-8">
<meta name="description" content="Conference Website">
<meta name="keywords" content="Conference, website">
<meta name="author" content="Rafal Dudek">
<meta name="robots" content="all">
<title>Conference Registration</title>
</head>
<body>
<div id="header">
<nav>
<ul>
<li>Index</li>
<li>Awards</li>
<li>Activities</li>
<li>Meals</li>
<li>Keynote</li>
<li>Workshop Schedule</li>
<li>Registration</li>
</ul>
</nav>
</div>
<div id="main">
<form action="thankyou.html" id="registration" onsubmit="return check()" method="get">
<fieldset>
<legend>Conference ID</legend>
<label>Conference ID: <input type="text" oninput="fillForm(this.value)" id="confID" name="confID" size="6" maxlength="6" required="required" pattern="[0-9]{6}" placeholder="123456" title="Enter a 6 digit conference ID number"></label><br />
</fieldset>
<fieldset>
<legend>Personal Information</legend>
<label for="title">Title:</label>
<select id="title">
<option value="Mr.">Mr.</option>
<option value="Ms.">Ms.</option>
<option value="Mrs.">Mrs.</option>
</select><br />
<label>First Name: <input type="text" id="firstname" name="firstname" size="30" maxlength="100" required="required" pattern="[a-zA-Z]+" placeholder="First Name" title="Enter your first name"></label><br />
<label>Last Name: <input type="text" id="lastname" name="lastname" size="30" maxlength="100" required="required" pattern="[a-zA-Z\-]+" placeholder="Last Name" title="Enter your last name"></label><br />
<label>Address 1: <input type="text" id="addressone" name="addressone" size="30" maxlength="100" required="required" pattern="[a-zA-Z0-9\ \#]+" placeholder="Address" title="Enter your address"></label><br />
<label>Address 2: <input type="text" id="addresstwo" name="addresstwo" size="30" maxlength="100" pattern="[a-zA-Z0-9\ \#]+" title="Optional: Enter part 2 of your address"></label><br />
<label>City: <input type="text" id="city" name="city" size="30" maxlength="100" required="required" pattern="[a-zA-Z\ ]+" placeholder="City" title="Enter your city"></label><br />
<label title="state">State:</label>
<select title="state" id="state">
<option value="AL">AL</option>
<option value="AK">AK</option>
<option value="AR">AR</option>
<option value="AZ">AZ</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DC">DC</option>
<option value="DE">DE</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="HI">HI</option>
<option value="IA">IA</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="MA">MA</option>
<option value="MD">MD</option>
<option value="ME">ME</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MO">MO</option>
<option value="MS">MS</option>
<option value="MT">MT</option>
<option value="NC">NC</option>
<option value="NE">NE</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NV">NV</option>
<option value="NY">NY</option>
<option value="ND">ND</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="VT">VT</option>
<option value="VA">VA</option>
<option value="WA">WA</option>
<option value="WI">WI</option>
<option value="WV">WV</option>
<option value="WY">WY</option>
</select><br />
<label>Zip Code: <input type="text" id="zipcode" name="zipcode" size="10" maxlength="10" required="required" pattern="[0-9]{5}\-[0-9]{4}" placeholder="Zip Code" title="Enter zip code"></label><br />
<label>Telephone: <input type="text" id="tel" name="tel" size="30" maxlength="100" required="required" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="Telephone" title="Enter telephone number"></label><br />
<label>Email: <input type="email" id="email" name="email" size="30" maxlength="100" required="required" pattern="([A-Za-z0-9_\-\.])+\#([A-Za-z0-9_\-\.])+\.([A-Zaz]{2,4})" placeholder="example#example.com" title="Enter email address"></label><br />
</fieldset>
<fieldset>
<legend>Company Information</legend>
<label>Company Website: <input type="url" id="website" name="website" size="30" maxlength="100" placeholder="www.example.com" title="Enter website URL"></label><br />
<label>Position: <input type="text" id="position" name="position" size="30" maxlength="100" required="required" pattern="[a-zA-Z0-9\ \#]+" placeholder="Position" title="Enter your position"></label><br />
<label>Company Name: <input type="text" id="companyname" name="companyname" size="30" maxlength="100" required="required" pattern="[a-zA-Z0-9\ \#]+" placeholder="Company Name" title="Enter company name"></label><br />
</fieldset>
<fieldset>
<legend>Dining Information</legend>
<p>
Would you like a full meal or just day 2 dinner?<br />
<label><input type="radio" id="mealone" name="meal" value="full" required/> Full Meal ($250)</label>
<label><input type="radio" id="mealtwo" name="meal" value="part"/> Day 2 dinner only ($75)</label>
</p>
</fieldset>
<fieldset>
<legend>Workshop Information</legend>
<p>
Which workshops would you like to join?<br />
Outdoors Theme:
<label><input type="radio" id="sesonea" name="session_1" value="workshop_1" required /> Lawn Maintenance</label>
<label><input type="radio" id="sesoneb" name="session_1" value="workshop_2"/> Landscaping Ideas</label>
<label><input type="radio" id="sesonec" name="session_1" value="workshop_3" /> Pest Control</label><br />
Home Improvement Theme:
<label><input type="radio" id="sestwoa" name="session_2" value="workshop_4" /> Kitchen Remodeling</label>
<label><input type="radio" id="sestwob" name="session_2" value="workshop_5"/> Bathroom Remodeling</label>
<label><input type="radio" id="sestwoc" name="session_2" value="workshop_6" /> Home Improvement Ideas</label><br />
Repair Basics Theme:
<label><input type="radio" id="sesthreea" name="session_3" value="workshop_7" required/> General Appliance Troubleshooting</label>
<label><input type="radio" id="sesthreeb" name="session_3" value="workshop_8"/> Heat and A/C Unit Maintenance</label>
<label><input type="radio" id="sesthreec" name="session_3" value="workshop_9" /> Plumbing Basics</label><br />
</p>
</fieldset>
<fieldset>
<legend>Billing Information:</legend>
<label>Billing First Name: <input type="text" id="billfirstname" name="billfirstname" size="30" maxlength="100" required="required" pattern="[a-zA-Z]+" placeholder="First Name" title="Enter first name"></label><br />
<label>Billing Last Name: <input type="text" id="billlastname" name="billlastname" size="30" maxlength="100" required="required" pattern="[a-zA-Z\-]+" placeholder="Last Name" title="Enter last name"></label><br />
<p>
Card Type:<br />
<label><input type="radio" id="carda" name="card" value="visa" /> Visa</label>
<label><input type="radio" id="cardb" name="card" value="mastercard" required/> MasterCard</label>
<label><input type="radio" id="cardc" name="card" value="americanexpress"/> American Express</label>
</p>
<label>Card Number: <input type="text" id="cardnumber" name="cardnumber" size="16" maxlength="16" required="required" pattern="[0-9]{16}" placeholder="0000000000000000" title="Enter credit card number"></label><br />
<label>Card Security Value: <input type="text" id="csv" name="csv" size=4 maxlength="4" required="required" pattern="[0-9]{4}" placeholder="000" title="Enter CSV number"></label><br />
<label>Exp. Month (two digits): <input type="text" id="cardexpmonth" name="cardexpmonth" size="2" maxlength="2" required="required" pattern="(0[1-9]|1[0-2])" placeholder="MM" title="Enter two digit month"></label><br />
<label>Exp. Year (four digits): <input type="text" id="cardexpyear" name="cardexpyear" size="4" maxlength="4" required="required" pattern="[2][0]([1-2][6-9])" placeholder="YYYY" title="Enter four digit year"></label><br />
<input type="submit" value="Submit" />
</fieldset>
</form>
</div>
<div id="footer">
<address>
<small>
Contact Information:<br>
Peter John<br>
12345 Grape St.<br>
Thornton, CO 80233<br>
Telephone: 303-555-6666<br>
E-mail: peter.john#gmail.com
</small>
</address>
</div>
</body>
</html>
Adding get and set cookie functions too just in case:
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
//This function gets cookie value based on conference ID
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

Cookies are stored as Strings so when you do if(newArray[1]) you are saying if("false") or if("true") which in javascript
The result is false if the argument is the empty String (its length is zero); otherwise the result is true
source: http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf
and answer that gave source: https://stackoverflow.com/a/8693015/1309377
Any of your "false" are treated as true
to fix this you should be doing newArray[1] == "true"
//This function fills in the form based on entered conference ID
var newArray = ["true", "false", "true"] //newCookie.split(";");
if (newArray[0] == "true") {
document.getElementById("mealone").checked = true;
} else {
document.getElementById("mealtwo").checked = true;
}
if (newArray[1] == "true") {
document.getElementById("sesonea").checked = true;
} else if (newArray[2] == "true") {
document.getElementById("sesoneb").checked = true;
} else {
document.getElementById("sesonec").checked = true;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="js/jsdefault.js"></script>
<link rel="stylesheet" href="css/webdefault.css">
<meta charset="UTF-8">
<meta name="description" content="Conference Website">
<meta name="keywords" content="Conference, website">
<meta name="author" content="Rafal Dudek">
<meta name="robots" content="all">
<title>Conference Registration</title>
</head>
<body>
<div id="main">
<form action="thankyou.html" id="registration" onsubmit="return check()" method="get">
<fieldset>
<legend>Dining Information</legend>
<p>
Would you like a full meal or just day 2 dinner?<br />
<label><input type="radio" id="mealone" name="meal" value="full" required/> Full Meal ($250)</label>
<label><input type="radio" id="mealtwo" name="meal" value="part"/> Day 2 dinner only ($75)</label>
</p>
</fieldset>
<fieldset>
<legend>Workshop Information</legend>
<p>
Which workshops would you like to join?<br /> Outdoors Theme:
<label><input type="radio" id="sesonea" name="session_1" value="workshop_1" required /> Lawn Maintenance</label>
<label><input type="radio" id="sesoneb" name="session_1" value="workshop_2"/> Landscaping Ideas</label>
<label><input type="radio" id="sesonec" name="session_1" value="workshop_3" /> Pest Control</label>
</p>
</fieldset>
</body>
</html>

To show a hidden div with javascript or jquery based on multiple dropdown selected values

I am trying to show a div, which has to be hidden by default, with JavaScript (or Jquery).
The condition to show div is based on the selected options of the two drop-down fields.
In the below code if gender is Female (from one drop-down select) and class is less than 3rd (from other drop-down select) then only the <div id="hidden_div"> should show other wise it should be hidden.
Any help in jquery or javascript would work, thanks!
I have tried the below code which is not working:
<form class="form" method="post" action="doitnow.php" id="form1">
<label class="col-md-4 control-label">Name of the Student:</label>
<p class="name">
<input name="Full_Name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" required />
</p>
<label>Gender:</label>
<p class="email">
<select name="gender" type="text" onchange="showDiv(this)" class="validate[required,custom[email]] feedback-input" id="name" placeholder="Select your Gender" required>
<option value="">Select the Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</p>
<label>Mother's Name</label>
<p class="email">
<input name="Mother_Name" type="text" class="validate[required,custom[phone]] feedback-input" id="name" placeholder="Mother's Name" required />
</p>
<p class="email">
<input name="source" type="text" value="enquiry_form" id="phone" hidden />
</p>
<label>Father's Name</label>
<p class="name">
<input name="Father_Name" type="text" class="validate[required,custom[phone]] feedback-input" id="name" placeholder="Father's Name" required />
</p>
<label>Class for which admission sought for:</label>
<p class="email">
<select name="qualification" type="text" onchange="showDiv(this)" class="validate[required,custom[email]] feedback-input" id="name" required>
<option value="">Select the Class</option>
<option value="LKG">LKG</option>
<option value="UKG">UKG</option>
<option value="1st">1st</option>
<option value="2nd">2nd</option>
<option value="3rd">3rd</option>
<option value="4th">4th</option>
<option value="5th">5th</option>
<option value="6th">6th</option>
<option value="7th">7th</option>
<option value="8th">8th</option>
<option value="9th">9th</option>
<option value="10th">10th</option>
<option value="11th">11th</option>
<option value="12th">12th</option>
</select>
</p>
<script type="text/javascript">
function showDiv(select) {
if (select.value == 'Female' && (select.value == 'LKG' || select.value == 'UKG' || select.value == '1st' || select.value == '2nd' || select.value == '3rd')) {
document.getElementById('hidden_div').style.display = "block";
} else {
document.getElementById('hidden_div').style.display = "none";
}
}
</script>
<div id="hidden_div" style="display:none;">
<label>(ONLY FOR GIRL CHILD FOR CLASSES LKG TO III)<br>Select which section admission is required in:</label>
<p class="email">
<select name="category" type="text" class="validate[required,custom[email]] feedback-input" id="name">
<option value="" selected>Select the Section</option>
<option value="Girls_Section">Girls Section</option>
<option value="Boys_Section">Boys Section</option>
</select>
</p>
</div>
<label>Previous school attended:</label>
<p class="email">
<input name="prev_school" type="text" class="validate[required,custom[phone]] feedback-input" id="comment" placeholder="Last School Name" required />
</p>
<label>Mobile No. (Only 10 digits allowed, format: xxxxxxxxxx):</label>
<p class="phone">
<input name="Telephone_Number" type="text" pattern="^\d{3}\d{3}\d{4}$" class="validate[required,custom[phone]] feedback-input" id="Phone" placeholder="Mobile No" required />
</p>
<label>Email Address:</label>
<p class="email">
<input name="Email_Address" type="text" class="validate[required,custom[phone]] feedback-input" id="email" placeholder="Email Address" /> <!--pattern="^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$"-->
</p>
<?php
$password = mt_rand(1000, 9999) . "a";
echo '<input name="pass" type="text" value='.$password.' hidden />';
?>
<div class="submit">
<input type="submit" value="SUBMIT fORM" name="submit" id="button-blue" />
<div class="ease"></div>
</div>
</form>

You can try this code and put jQuery library in you localhost link it::
<form class="form" method="post" action="doitnow.php" id="form1">
<label class="col-md-4 control-label">Name of the Student:</label>
<p class="name">
<input name="Full_Name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" required/>
</p>
<label>Gender:</label>
<p class="email">
<select name="gender" type="text" onchange="showDiv(this)" class="validate[required,custom[email]] feedback-input changer" id="name" placeholder="Select your Gender" required>
<option value="">Select the Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</p>
<label>Mother's Name</label>
<p class="email">
<input name="Mother_Name" type="text" class="validate[required,custom[phone]] feedback-input" id="name" placeholder="Mother's Name" required/>
</p>
<p class="email">
<input name="source" type="text" value="enquiry_form" id="phone" hidden />
</p>
<label>Father's Name</label>
<p class="name">
<input name="Father_Name" type="text" class="validate[required,custom[phone]] feedback-input" id="name" placeholder="Father's Name" required/>
</p>
<label>Class for which admission sought for:</label>
<p class="email">
<select name="qualification" type="text" onchange="showDiv(this)" class="validate[required,custom[email]] feedback-input changer" id="name" required>
<option value="" >Select the Class</option>
<option value="LKG">LKG</option>
<option value="UKG">UKG</option>
<option value="1st">1st</option>
<option value="2nd">2nd</option>
<option value="3rd">3rd</option>
<option value="4th">4th</option>
<option value="5th">5th</option>
<option value="6th">6th</option>
<option value="7th">7th</option>
<option value="8th">8th</option>
<option value="9th">9th</option>
<option value="10th">10th</option>
<option value="11th">11th</option>
<option value="12th">12th</option>
</select>
</p>
<div id="hidden_div" style="display:none;">
<label>(ONLY FOR GIRL CHILD FOR CLASSES LKG TO III)<br>Select which section admission is required in:</label>
<p class="email">
<select name="category" type="text" class="validate[required,custom[email]] feedback-input" id="name">
<option value="" selected>Select the Section</option>
<option value="Girls_Section">Girls Section</option>
<option value="Boys_Section">Boys Section</option>
</select>
</p>
</div>
<label>Previous school attended:</label>
<p class="email">
<input name="prev_school" type="text" class="validate[required,custom[phone]] feedback-input" id="comment" placeholder="Last School Name" required/>
</p>
<label>Mobile No. (Only 10 digits allowed, format: xxxxxxxxxx):</label>
<p class="phone">
<input name="Telephone_Number" type="text" pattern="^\d{3}\d{3}\d{4}$" class="validate[required,custom[phone]] feedback-input" id="Phone" placeholder="Mobile No" required/>
</p>
<label>Email Address:</label>
<p class="email">
<input name="Email_Address" type="text" class="validate[required,custom[phone]] feedback-input" id="email" placeholder="Email Address"/> <!--pattern="^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$"-->
</p>
<?php
$password = mt_rand(1000, 9999) . "a";
echo '<input name="pass" type="text" value=' . $password . ' hidden />';
?>
<div class="submit">
<input type="submit" value="SUBMIT fORM" name="submit" id="button-blue"/>
<div class="ease"></div>
</div>
</form>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
(function ($) {
$(document).ready(function () {
$(document).on('change', '.changer', function () {
var class_value = $('select[name="qualification"]').val();
var gender_value = $('select[name="gender"]').val();
if (gender_value == 'Female' && (class_value == 'LKG' || class_value == 'UKG' || class_value == '1st' || class_value == '2nd' || class_value == '3rd'))
{
$('#hidden_div').show();
} else {
$('#hidden_div').hide();
}
});
});
})(jQuery);
</script>

You need to check both selects within your javascript function so do this:
function showDiv(){
var select = document.querySelector("select[name='gender']");
var qselect = document.querySelector("select[name='qualifications']");
if(select.value == 'Female' && (qselect.value=='LKG'||qselect.value=='UKG'||qselect.value=='1st'||qselect.value=='2nd'||qselect.value=='3rd')){
document.getElementById('hidden_div').style.display = "block";
} else{
document.getElementById('hidden_div').style.display = "none";
}
}
Note that you no longer need to pass (this) to this function

Form multiplication

I need these two fields to be multiplied together based on selected form options.
Okay so it works without all the extra fields but once i added the rest of the form the calculation stopped working. :(
<form action="mailer.php" data-validate="parsley" method="post" >
<p><strong>Full Name<span class="red">*</span></strong></p>
<input name="cf_name" data-required="true" class="send" type="text" />
<p><strong>Email Address<span class="red">*</span></strong></p>
<input name="cf_email" data-required="true" data-type="email" class="send" type="text" />
<p><strong>Cellphone No.<span class="red">*</span></strong></p>
<input name="cf_cell" data-required="true" class="send" type="text" />
<p><strong>Instrument Type<span class="red">*</span></strong></p>
<select name="cf_instrument" size="1" class="option" >
<option value="Piano">Piano</option>
<option value="Vocals">Vocals</option>
<option value="Guitar">Guitar</option>
<option value="Bass">Bass</option>
<option value="Flute">Flute</option></select>
<p><strong>Lesson Type<span class="red">*</span></strong></p>
<select name="cf_package_type" id="cf_package_type" size="1" class="option">
<option value="100">Beginner Lesson - R100</option>
<option value="130">Advanced Lesson - R130</option>
<option value="160">Professional Lesson - R160</option></select>
<p><strong>No. of Lessons<span class="red">*</span></strong></p>
<select id="number-of-lessons" name="cf_number" size="1" class="option" onchange='test()'>
<option name="1" value="1" selected="selected">1</option>
<option name="2" value="2">2</option>
<option name="3" value="3">3</option>
<option name="4" value="4">4</option></select>
<script src="js/datepair.js"></script>
<p><strong>Lesson Date & Time<span class="red">*</span></strong></p>
<p class="datepair" data-language="javascript">
<input type="text" name="cf_booking_date" class="date start" data-required="true" />
<input type="text" name="cf_start_time" class="time start" data-required="true" /> to
<input type="text" name="cf_end_time" class="time end" data-required="true" /></p>
<script src="js/datepair.js"></script>
<p id="lesson-2" class="datepair" data-language="javascript">
<input type="text" name="cf_booking_date" class="date start" data-required="true" />
<input type="text" name="cf_start_time" class="time start" data-required="true" /> to
<input type="text" name="cf_end_time" class="time end" data-required="true" /></p>
<script src="js/datepair.js"></script>
<p id="lesson-3" class="datepair" data-language="javascript">
<input type="text" name="cf_booking_date" class="date start" data-required="true" />
<input type="text" name="cf_start_time" class="time start" data-required="true" /> to
<input type="text" name="cf_end_time" class="time end" data-required="true" /></p>
<script src="js/datepair.js"></script>
<p id="lesson-4" class="datepair" data-language="javascript">
<input type="text" name="cf_booking_date" class="date start" data-required="true" />
<input type="text" name="cf_start_time" class="time start" data-required="true" /> to
<input type="text" name="cf_end_time" class="time end" data-required="true" /></p>
<!-- HIDDEN FIELD - HONEYPOT ANTI_SPAM -->
<input id="website" class="using" name="website" type="text" />
<!-- END -->
<input name="Submit" class="submit" value="Book Now" type="submit" /></form>
<input type="text" value="100" disabled="disabled" id="result">
Corrected JS used:
<script type="text/javascript">
$("select").change(function(){
var val1 = + ($("#cf_package_type").val());
var val2 = + ($("#number-of-lessons").val());
$("#result").val(val1*val2);
});
</script>
I know i'm probably very off-track but if someone could please help me with this it would be a life-saver!
Here's the JS fiddle to help you - http://jsfiddle.net/GuBPL/10/
Thank you.

Try with following code:
<p><strong>Lesson Type<span class="red">*</span></strong></p>
<select id="cf_package_type" name="cf_package_type" size="1" class="option">
<option value="100">Beginner Lesson - R100</option>
<option value="130">Advanced Lesson - R130</option>
<option value="160">Professional Lesson - R160</option>
</select>
<p><strong>No. of Lessons<span class="red">*</span></strong></p>
<select id="number-of-lessons" name="cf_number" size="1" class="option">
<option value="1" selected="selected">1</option>
<option name="2" value="2">2</option>
<option name="3" value="3">3</option>
<option name="4" value="4">4</option>
</select>
<input type="text" disabled="disabled" id="result">
And JS:
$(document).ready(function(){
$("#number-of-lessons").change(function(){
var val1 = parseInt($("#cf_package_type").val());
var val2 = parseInt($(this).val());
$("#result").val(val1*val2);
});
});
What's changed ?
First select got id="cf_package_type" attribute, which is used to get its value with:
$("#cf_package_type").val()
Removed onchange='test()' because we do it with jQuery:
$("#number-of-lessons").change()
Get value of second select with:
$(this).val()
because we work on it already.
parseInt used just to be sure, we use integers, not strings.
Edit:
To calculate result on page load, use:
$(document).ready(function(){
var calculate = function(){
var val1 = parseInt($("#cf_package_type").val());
var val2 = parseInt($('#number-of-lessons').val());
$("#result").val(val1*val2);
};
$("#number-of-lessons").change(calculate);
calculate();
});

You use $('.select') while the elements have class name option,
You should use change event instead of keyup
you use $('.cf_package_type') while it's a name, not class attribute
http://jsfiddle.net/GuBPL/4/
$(document).ready(function(){
$(".option").change(function(){
var val1 = +$("[name=cf_package_type]").val();
var val2 = +$("[name=cf_number]").val();
$("#result").val(val1*val2);
});
});