I'm having a small issue with my coding. I am building this in regular, old Notepad (please don't judge) as a personal feat of my own. Along with this, I want to use only Javascript and HTML, along with CSS to build this.
My code is as follows:
HTML
<html>
<h1>Please join our email list</h1>
<body>
<script language="javascript" src="country.js"></script>
<form name="myForm">
<label for="email_address1">Email Address:</label>
<input type="text" id="email_address1" name="email_address1">
<span id="email_address1_error">*</span><br></br>
<label for="email_address2">Re-enter Email Address:</label>
<input type="text" id="email_address2" name="email_address2">
<span id="email_address2_error">*</span><br></br>
<label for="first_name">First Name:</label>
<input type="text" id="first_name" name="first_name">
<span id="first_name_error">*</span><br></br>
<label for="select_country">Select your country:</label>
<select id="myList" onchange="choice(),validate()">
<option value="0"></option>
<option value="1">United States</option>
<option value="2">Canada</option>
</select><span id="country_error"> *</span><br></br>
<span for="res_code" id="res_code_lbl">Zip/Province Code: </span><input type="text" id="res_code" name="res_code"><span id="res_code_error"> *</span>
<br></br>
<button type="button" id="joinButton" onclick="validate(),joinList()">Join Our List</button>
</form>
</body>
</html>
Javascript
function validate(){
var e = document.getElementById("myList");
var f = e.options[e.selectedIndex].value;
if(f == 0)
{
document.getElementById("country_error").innerHTML="Choose a country!";
}
else{
document.getElementById("country_error").innerHTML="*";
}
}
function choice(){
var e = document.getElementById("myList");
var f = e.options[e.selectedIndex].value;
if(f == 1){
document.getElementById("res_code_lbl").innerHTML="Zip Code: ";
}
else if(f == 2){
document.getElementById("res_code_lbl").innerHTML="Province Code: ";
}
}
function joinList(){
var e1 = document.getElementById("email_address1").value;
var e2 = document.getElementById("email_address2").value;
var n = document.getElementById("first_name").value;
var c = document.getElementById("res_code").value;
if(e1 == null){
document.getElementById("email_address1_error").innerHTML="Enter your email address!";
}
else{
document.getElementById("email_address1_error").innerHTML="*";
if(e1 != e2){
document.getElementById("email_address2_error").innerHTML="Your email address must match!";
}
else{
document.getElementById("email_address2_error").innerHTML="*";
if(n == null){
document.getElementById("first_name_error").innerHTML="Enter your first name!";
}
else{
document.getElementById("first_name_error").innerHTML="*";
if(c == null){
document.getElementById("res_code_error").innerHTML="Enter a valid State/Province Code!";
}
else{
document.getElementById("res_code_error").innerHTML="*";
if((e1 != null) && (e1 = e2) && (n != null) && (c != null)){
location.href='countryjoin.html';
}
}
}
}
}
}
I know this is a lot so I'll spare you the CSS :P Basically I want to validate that none of the inputs are null. When the validate function runs, it seems to allow all the fields through as though they were not null, even though they are, but never initiates the change in location.href. The only field that works correctly is the select list. That will work onchange and onclick with the submit button.
Any feedback is much appreciated! Thank you!
