Several Javascript form validation issue
Question
I am trying to have Javascript check the required fields which are: Name, Phone number, at least one check box is checked and if the dropdown menu is on "other" then the additional information field is required to be filled in. I have been able to figure out how to display a pop up if the user has not enter the name and phone number fields but my problems are this:
I cannot get a pop-up to display if the user hasnt filled out the additional info box depending on if the drop down menu is set to "other", i also cant get a pop-up to display if the check box is not checked, and lastly, even if the required fields are filled in it will still give me a pop-up error message.. any advice?
<script>
var userInput = document.getElementById("text").value;
var userPhone = document.getElementById("phone").value;
var dropDownBox = document.getElementById("dropdown").value;
var addInfo = document.getElementById("textarea").value;
var otherOne = document.getElementById("oOther").value;
var checkBoxCheck = document.getElementById("checkers").checked;
function checking(){
if(userInput === undefined){
alert("Please fill in your name.");
}
if(userPhone === undefined){
alert("Please fill in your phone number.");
return false;
} else{
return true;
}
if(dropDownBox === "Other"){
if(addInfo === undefined){
alert("Please fill in your additional information.")
}
}
if(checkBoxCheck===undefined){
alert("Please select a day of the week to contact you.");
}
}
</script>
</head>
<body>
<div class="container-fluid">
<div class="page-header">
<table border="1" width="100%" Frame="below">
<thead>
<h1 style="color:purple" align="center"><span>C</span>aFe 80's</h1>
</thead>
</table>
</div>
<table border="0" width="20%" cellspacing="20">
<ul class="list-inline nav nav-tabs">
<li><a href="Lab-9CSSHomePageV6.html"><span class="glyphicon glyphicon-home"></span></a></li>
<li><a href="Lab-9CSSMenuPageV6.html">Menu</a></li>
<li class="active"><a href="Lab-9CSSContactPageV6.html">Contact Us</a></li>
</ul>
</table>
</div>
<div class="container" style= "height: 700px; position: relative; top: 60px">
<form action="lab-9CSSContactPageV6.html" method="POST">
<div class="form-group">
<label for="text">Name:</label>
<input type="text" class="form-control" id="text">
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="phone">Phone Number:</label>
<input type="phone" class="form-control" id="phone">
</div>
<div class="form-group">
<label for="dropdown">Reason for Inquiry:</label>
<select class="form-control" id="dropdown">
<option>Catering</option>
<option>Private Party</option>
<option>Feedback</option>
<option id="oOther">Other</option>
</select>
</div>
<div class="form-group">
<label for="textarea">Addition Imformation:</label>
<textarea class="form-control" rows="5" id="textarea"></textarea>
</div>
<div class="form-group" style="position:relative; right: 40px">
<div class="radio-inline">
<label class="radio-inline">Have you been to the restaurant?</label>
<label class="radio-inline"><input type="radio" name="rad" checked>No</label>
<label class="radio-inline"><input type="radio" name="rad">Yes</label>
</div>
</div>
<div class="form-group" style="position:relative; right: 40px">
<div class="checkbox-inline">
<label class="checkbox-inline">Best days to contact you:</label>
<label class="checkbox-inline"><input id="checkers" type="checkbox" value="">M</label>
<label class="checkbox-inline"><input id="checkers" type="checkbox" value="">T</label>
<label class="checkbox-inline"><input id="checkers" type="checkbox" value="">W</label>
<label class="checkbox-inline"><input id="checkers" type="checkbox" value="">TH</label>
<label class="checkbox-inline"><input id="checkers" type="checkbox" value="">F</label>
</div>
</div>
<div class="form-group" align="center">
<button onclick="return checking()"type="submit" class="btn btn-default">Send Request</button>
</div>
</form>
</div>
1 answers
solution1
0 2016-01-29 04:10:22
I understand you have figured out the first part of the question and am answering the second part.Incase you need the first part, please tell me.
I modified your dropdown to have values.
<select class="form-control" id="dropdown">
<option value="1">Catering</option>
<option value="2">Private Party</option>
<option value="3">Feedback</option>
<option value="4">Other</option>
</select>
In your javascript, add this function instead of the current one
if(document.getElementById("dropdown").value=="4")
{
alert("Other");
if(addInfo=="" ||addInfo==undefined)
alert("fill in the text area");
return false;
}
}
For the day part , here is the code:
JS
if(document.getElementById("checkers1").checked===true||
document.getElementById("checkers2").checked===true||
document.getElementById("checkers3").checked===true||
document.getElementById("checkers4").checked===true||
document.getElementById("checkers5").checked===true){
return true;
}
else{
alert("Please select a day");
return false;
}
HTML
<label class="checkbox-inline"><input id="checkers1" type="checkbox" value="">M</label>
<label class="checkbox-inline"><input id="checkers2" type="checkbox" value="">T</label>
<label class="checkbox-inline"><input id="checkers3" type="checkbox" value="">W</label>
<label class="checkbox-inline"><input id="checkers4" type="checkbox" value="">T</label>
<label class="checkbox-inline"><input id="checkers5" type="checkbox" value="">F</label>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.