I cant seem to get my form to prompt required for radio buttons if they have not been selected in my bootstrap template. The required field in a normal html file however when I have this form with the bootstrap template. The required field doesn't work
<head>
<script>
function depressionAssessor()
{
var amountCorrect = 0;
for(var i = 1; i <= 45; i++) {
var radios = document.getElementsByName('group'+i);
for(var j = 0; j < radios.length; j++) {
var radio = radios[j];
if(radio.value == "correct" && radio.checked) {
amountCorrect++;
}
}
}
if(amountCorrect >= 6){
document.getElementById('Assessment').innerHTML=document.getElementById('reccommendation').innerHTML;
}
if (amountCorrect <= 6){
document.getElementById('Assessment').innerHTML=document.getElementById('noreccommendation').innerHTML;
}
}
</script>
</head>
<body id="page-top" class="index">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Siza</a>
</div>
</div>
<!-- /.container-fluid -->
</nav>
<!--Content Section-->
<section id="assessmentlocation">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Assessment Tests</h2>
<hr class="star-primary">
<br>
<table align="center" cellspacing="10">
<tr>
<td onclick="document.getElementById('Assessment').innerHTML=document.getElementById('depression_assessment').innerHTML;"><h3><a href="#">Depression Assessment</a></h3></td>
</tr>
</table>
<hr>
</div>
<!-- Where the assessment content is placed -->
<div id="Assessment" align="center"></div>
<!-- reccomendation content-->
<div id="reccommendation" style="visibility: hidden;">
<p>You need help</p>
</div>
<div id="noreccommendation" style="visibility: hidden;">
<p>You Are not depressed</p>
</div>
<div id="depression_assessment" style="visibility:hidden;">
<form name="depressionquiz" method= "post" id="depressionquiz" onsubmit="return false">
<table class="table">
<h4>Depression Assessment</h4>
<h5>Answer yes or no for each question</h5>
<tbody>
<tr>
<td><h5>1)</h5></td>
<td><h5>Have you had persistent feelings of sadness, emptiness, pessimism or anxiety most of the day nearly every day?<hr></h5></td>
<td><input id="answer"type="radio" name="group1" value="correct" required>Yes</td>
<td><input id="answer" type="radio" name="group1" value="wrong">No</td>
</tr>
<tr>
<td><h5>2)</h5></td>
<td><h5>Have you lost interest or pleasure in all, or almost all, activities most of the day, nearly every day?<hr></h5></td>
<td><input id="answer"type="radio" name="group2" value="correct" required>Yes</td>
<td><input id="answer" type="radio" name="group2" value="wrong">No</td>
</tr>
<tr>
<td><h5>3)</h5></td>
<td><h5>Have you had significant weight loss or weight gain or an increase or decrease in appetite nearly every day?<hr></h5></td>
<td><input id="answer"type="radio" name="group3" value="correct" required>Yes</td>
<td><input id="answer" type="radio" name="group3" value="wrong">No</td>
</tr>
<tr>
<td><h5>4)</h5></td>
<td><h5>Have you had insomnia (not sleeping) or hypersomnia (oversleeping) nearly every day?<hr></h5></td>
<td><input id="answer"type="radio" name="group4" value="correct" required>Yes</td>
<td><input id="answer" type="radio" name="group4" value="wrong">No</td>
</tr>
<tr>
<td><h5>5)</h5></td>
<td><h5>Have others noticed that you are restless or lethargic nearly every day?<hr></h5></td>
<td><input id="answer"type="radio" name="group5" value="correct" required>Yes</td>
<td><input id="answer" type="radio" name="group5" value="wrong">No</td>
</tr>
<tr>
<td><h5>6)</h5></td>
<td><h5>Have you noticed that you have a loss of energy and fatigue nearly every day?<hr></h5></td>
<td><input id="answer"type="radio" name="group6" value="correct" required>Yes</td>
<td><input id="answer" type="radio" name="group6" value="wrong">No</td>
<br/>
</tr>
<tr>
<td><h5>7)</h5></td>
<td><h5>Have you had feelings of worthlessness or excessive or unjustified guilt nearly every day?<hr></h5></td>
<td><input id="answer"type="radio" name="group7" value="correct" required>Yes</td>
<td><input id="answer" type="radio" name="group7" value="wrong">No</td>
</tr>
<tr>
<td><h5>8)</h5></td>
<td><h5>Have you noticed that you have difficulty concentrating or thinking, or in making decisions nearly every day which you have noticed or others have noticed?<hr></h5></td>
<td><input id="answer"type="radio" name="group8" value="correct" required>Yes</td>
<td><input id="answer" type="radio" name="group8" value="wrong">No</td>
</tr>
<tr>
<td><h5>9)</h5></td>
<td><h5>Have you had recurring thoughts of death (not just fear of dying), recurring thoughts of committing suicide but without a specific plan; or have you made a suicide attempt; or do you have a specific plan for committing suicide?<hr></h5></td>
<td><input id="answer"type="radio" name="group9" value="correct" required>Yes</td>
<td><input id="answer" type="radio" name="group9" value="wrong">No</td>
</tr>
<tr>
<td colspan="3" align="center"><button class="submit btn btn-success btn-lg" onclick="return depressionAssessor();" type="submit">Submit</button></td> <!--btn btn-success btn-lg-->
</tr>
</tbody>
</table>
</form>
</div> <!-- 9 questions-->
</div>
</div>
</section>
<!-- Scroll to Top Button (Only visible on small and extra-small screen sizes) -->
<div class="scroll-top page-scroll visible-xs visible-sm">
<a class="btn btn-primary" href="#page-top">
<i class="fa fa-chevron-up"></i>
</a>
</div>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpAnimatedHeader.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/freelancer.js"></script>
</body>
it works with jsfiddle but not with in an html file loading with the chrome browser.
Aucun commentaire:
Enregistrer un commentaire