I am to set up Javascript to validate required form fields. If a form field is missing a pop-up will come up on users screen. I have been able to figure most of it out however the problem is with the check-box. If the user does not click a check-box they are to get an error message. The way I have my code written, if the user checks "monday" the form is processed, but if they check any other days except monday then they will still get the error message, any thoughts?
function checked() {
var userName = document.getElementById("text").value;
var userPhone = document.getElementById("phone").value;
var checkBoxCheck = document.getElementById("checkers").checked;
var otherOne = document.getElementById("dropdown").value;
var addInfo = document.getElementById("textarea").value;
if (userName == "" || userPhone == "" || checkBoxCheck == "") {
alert("Please fill in: name, phone number, days of week.");
if (otherOne == "Other") {
if (addInfo == "") {
alert("Please fill in your additional information.");
}
}
return false;
} else {
return true;
}
}
<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 onsubmit="return checked()" 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 type="submit" class="btn btn-default">Send Request</button>
</div>
</form>
</div>
Aucun commentaire:
Enregistrer un commentaire