you're help would be appreciated with this simple but mind boggling question.
I have a contact form on which the user click submit, will run a vigorous error checking function I hard-coded myself. The error checking will aplly a red border around every form element that doesn't pass the validation test followed by an alert pop up telling the user a detailed list of where the error is located and what the error is. This all works fine except for the border on each form element being set to red. It works for a split second, long enough for you to see, before strangely reverting back to the original border colour. What on Earth is going on? It is as if there is something else over-riding this code???
Another issue discovered
I also just discovered that it doesn't alert the user like it is supposed to when all the boolean check variables are true. I even ran this alert(fnameCheck + ", " + lnameCheck + ", " + emailCheck + ", " + topicCheck + ", " + messageCheck + ", " + termsAndConsCheck); and the alert just didn't show. There is something going on here... and I don't think it is that function. I could be wrong but I have used this function elsewhere and it worked (although it had less boolean variables to check)
Here is the code...
<div class="body" style="height:560px"> <!-- This is the body --><br />
<span style="font-size:50px">Contact Us</span><br />
<div style="margin-left:20px; text-align:left">
Please feel free to enter your details below to contact us.<br />
<span style="font-size:14px; color:grey">* = required field</span><br /><br />
<form name="contactForm"> <!-- This is a form -->
First name*:<br />
<input name="fname" type="text"><br />
Last name*:<br />
<input name="lname" type="text"><br />
Email*: <br /><input name="email" type="text"><br /><br />
My comment/ enquiry concerns*:<br />
<select id="topic">
<option value="Select a topic" selected>Select a topic</option>
<option value="Billing Questions">Billing Questions</option>
<option value="Returns/ Exchanges">Returns/ Exchanges</option>
<option value="Website Enquiries">Website Enquiries</option>
<option value="Product Enquiries">Product Enquiries</option>
<option value="Other">Other</option>
</select><br /><br />
Message*:<br /><textarea id="message"></textarea>
<br /><br />
If you'd like to send us a file, you may do so below but ensure that the file is no larger than 50MB.
<br /><input type="file" name="myFile">
<br><br />
You agree to the Privacy Policy (click to confirm)*.
<input name="tandc" type= "checkbox"><br /><br />
<button onclick="submitForm()">Hi</button>
<input type="reset" value="Reset">
</form>
</div>
</div>
Here is ALL of the Javascript (all of it isn't relevant but there may be something else in here causing the issue)
<script>
document.getElementById("cover").style.display = "none";
function getCookie(cname) {
var name = cname + "=";
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);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
var username="";
function checkCookie() {
username = getCookie("username");
if (username != "") {
document.getElementById("topnavbar").innerHTML = "Welcome, " + username + ". | ";
}
}
checkCookie();
/* THIS IS THE RELEVANT STUFF FROM HERE DOWN TO THE NEXT COMMENT */
var topic = "Select a topic";
document.getElementById('topic').addEventListener("change", function() {
switch(this.value){
case "Select a topic":
topic = "Select a topic"
break;
case "Billing Questions":
topic = "Billing Questions"
break;
case "Returns/ Exchanges":
topic = "Returns/ Exchanges"
break;
case "Website Enquiries":
topic = "Website Enquiries"
break;
case "Product Enquiries":
topic = "Product Enquiries"
break;
case "Other":
topic = "Other"
break;
}
});
function submitForm(){
var firstName = contactForm.fname.value;
var lastName = contactForm.lname.value;
var email = contactForm.email.value;
var message = contactForm.message.value;
var fnameCheck = false;
var lnameCheck = false;
var emailCheck = false;
var topicCheck = false;
var messageCheck = false;
var termsAndConsCheck = false;
var errorMsg = "";
if(isNaN(firstName)&&firstName!=""){
fnameCheck = true;
}else{
fnameCheck = false;
if(fnameCheck == ""){
errorMsg += "First Name - The field is empty \n";
}else{
errorMsg += "First Name - Please ensure it contains no numbers or symbols \n";
}
}
if(isNaN(lastName)&&lasttName!=""){
lnameCheck = true;
}else{
lnameCheck = false;
if(lnameCheck == ""){
errorMsg += "Last Name - The field is empty \n";
}else{
errorMsg += "Last Name - Please ensure it contains no numbers or symbols \n";
}
}
if(email.indexOf("@") == -1 || email == ""){
emailCheck == false;
if(email == ""){
errorMsg += "Email - The field is empty \n";
}else{
errorMsg += "Email - This is not a valid email address\n";
}
}else{
emailCheck = true;
}
if(topic == "Select a topic"){
topicCheck = false;
errorMsg += "Topic - Please select a topic \n";
}else{
topicCheck = true;
}
if(message == ""){
messageCheck = false;
errorMsg += "Message - Please enter a message \n";
}else{
messageCheck = true;
}
if(!contactForm.tandc.selected){
termsAndConsCheck = false;
errorMsg += "Terms and Conditions - Please tick the checkbox \n";
}else{
termsAndConsCheck = true;
}
if(fnameCheck && lnameCheck && emailCheck && topicCheck && messageCheck && termsAndConsCheck){
alert("form submitted!");
}else{
if(!fnameCheck){
contactForm.fname.style.borderColor = "red";
}
if(!lnameCheck){
contactForm.lname.style.borderColor = "red";
}
if(!emailCheck){
contactForm.email.style.borderColor = "red";
}
if(!topicCheck){
document.getElementById("topic").style.borderColor = "red";
}
if(!messageCheck){
contactForm.message.style.borderColor = "red";
}
if(!termsAndConsCheck){
contactForm.tandc.style.outline = "1px solid red";
}
alert("Please fix the fields listed below... \n\n" + errorMsg + "\nThank you.");
}
}
/* THIS IS THE END OF THE RELEVANT CODE */
</script>
<script type="text/javascript" src="./jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function() {
$("#slider").animate({
"left": $(".item:first").position().left + "px",
"width": $(".item:first").width() + "px"
}, 0);
$(".item").hover(function() {
$("#slider").stop();
$("#slider").animate({
"left": $(this).position().left + "px",
"width": $(this).width() + "px"
}, 500);
});
$(".item").on("mouseout", function() {
$("#slider").stop();
$("#slider").animate({
"left": $('#four').position().left + "px",
"width": $('#four').width() + "px"
}, 500);
});
});
</script>
