append()方法无法为HTML/JS应用程序的按钮设置条件

Question

我已经使用HTML/JS创建了一个问卷调查应用程序。但我被困在一个地方，我正在使用下一个按钮转到下一个问题部分，但我想设置条件来检查所有问题是否都是我使用append()的答案，但它对我不起作用，我使用了以下代码部分：

$('input[type="radio"]').on("change", function () {
let all_radio = $(this).closest(".section_main").find('input[type="radio"]');
let checked_radio = $(this).closest(".section_main").find('input[type="radio"]:checked');
if (checked_radio.length == all_radio.length / 3) {
$(this).closest(".section_main").find(".btn-nav-group").append('<a href="" class="btn btn-primary btnNext">Next</a>');
}
});

我正试图在下一个按钮上设置条件，这样，如果所有问题都没有得到回答，它将不会移动到下一个部分，并显示警告消息。请有人帮我。详细代码如下：

function displayRadioValue() {
let section1 = document.querySelectorAll('.section-1 > input[type="radio"]');
let section2 = document.querySelectorAll('.section-2 > input[type="radio"]');
let sectionnew = document.querySelectorAll("#section1").values;
let fullName = document.querySelector("#fullName").value;
let email = document.querySelector("#email").value;
let age = document.querySelector("#age").value;
var ctx = document.querySelector("#resultsChart").getContext("2d");
let section1Total = 0;
let section2Total = 0;
let section1Question = 0;
let section2Question = 0;
let finalResults = document.querySelector(".final-results");
let result1 = "";
let result2 = "";
finalResults.innerHTML = "";
//Section 1
section1.forEach(function (radio, index) {
if (radio.checked) {
section2Question++;
section1Total += +radio.value;
}
});
console.log("radio value:", $("input[name='question1']:checked").val());
// console.log( $("input[name=‘question1’]:checked").val());
console.log("Ruchir");
//Section 2
section2.forEach(function (radio, index) {
if (radio.checked) {
section1Question++;
section2Total += +radio.value;
}
});
//Final Results and validation
if (fullName.value != "" && email.value != "" && age.value != "") {
if (section1Total > 0 && section2Total > 0) {
finalResults.innerHTML += genDetails(fullName, email, age);
finalResults.innerHTML += "<h2>Results</h2>";
finalResults.innerHTML += genTable(section1Question, section1Total, 1);
finalResults.innerHTML += genTable(section2Question, section2Total, 2);
finalResults.innerHTML += $("input[name='question1']:checked").val();
finalResults.innerHTML += "<h2>Chart Results</h2>";
document.getElementById("control").style.display = "block";
document.getElementById("resultsChart").style.display = "block";
document.getElementById("toemail").href += document.querySelector(".final-results").innerText;
} else {
finalResults.innerHTML = "Snap! Please select the atleast one survey question from each section ";
}
} else {
finalResults.innerHTML = "Snap! Please enter your name, emial, age in the first section ";
}
}
function genDetails(name, email, age) {
var result = "<h2>Personal Info</h2>";
result += "<b>Full name:</b> <span>" + name + "</span><br>";
result += "<b>Email name:</b> <span>" + email + "</span><br>";
result += "<b>Age: </b> <span>" + age + "</span><br>";
return result;
}
function genTable(ques, total, section) {
var result = "<b>Section " + section + ":</b><br>";
var tr = "<tr><th>" + total + "</th><th>" + ((total / (ques * 3)) * 100).toFixed(2) + "</th></tr>";
result += "<table><thead><tr><th>Total Score</th><th>Percentage</th></tr></thead><tbody>" + tr + "</tbody></table>";
return result;
}
$('input[type="radio"]').on("change", function () {
let all_radio = $(this).closest(".section_main").find('input[type="radio"]');
let checked_radio = $(this).closest(".section_main").find('input[type="radio"]:checked');
if (checked_radio.length == all_radio.length / 3) {
$(this).closest(".section_main").find(".btn-nav-group").append('<a href="" class="btn btn-primary btnNext">Next</a>');
}
});
$(document).ready(function () {
$(".btnNext").click(function (e) {
e.preventDefault();
$("ul.nav-tabs li.nav-item a.active").closest("li").next("li").find("a").trigger("click");
});
$(".btnPrevious").click(function (e) {
e.preventDefault();
$("ul.nav-tabs li.nav-item a.active").closest("li").next("li").find("a").trigger("click");
});
});

canvas {
display: none;
}
@media print {
body * {
visibility: hidden;
}
canvas {
visibility: visible;
margin-top: 30%;
}
.form-control {
visibility: visible;
}
.final-results * {
visibility: visible;
}
.spider-chart * {
visibility: visible;
}
.final-results,
.form-control {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
}
table,
table tr th,
table tr td {
border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="container py-4">
<div class="row">
<div class="col-md-12">
<h2>Survey</h2>
<ul id="tabs" class="nav nav-tabs">
<li class="nav-item"><a href="" data-target="#personalInfo" data-toggle="tab" class="nav-link small text-uppercase active">Personal Info</a></li>
<li class="nav-item"><a href="" data-target="#section1" data-toggle="tab" class="nav-link small text-uppercase">Section 1</a></li>
<li class="nav-item"><a href="" data-target="#section2" data-toggle="tab" class="nav-link small text-uppercase">Section 2</a></li>
<li class="nav-item"><a href="" data-target="#results" data-toggle="tab" class="nav-link small text-uppercase">Results</a></li>
</ul>
<br />
<div id="tabsContent" class="tab-content">
<div id="personalInfo" class="tab-pane fade active show">
<div class="form-group">
<label for="fullName">Full Name address</label>
<input type="email" class="form-control" id="fullName" aria-describedby="nameHelp" placeholder="Enter full name" />
<small id="nameHelp" class="form-text text-muted">Please enter your full name.</small>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" aria-describedby="email" placeholder="Enter email" />
<small id="email" class="form-text text-muted">Please enter your valid email address.</small>
</div>
<div class="form-group">
<label for="age">Password</label>
<input type="number" class="form-control" id="age" aria-describedby="age" placeholder="Age" />
<small id="age" class="form-text text-muted">Please enter your age in number.</small>
</div>
<a class="btn btn-primary btnNext">Next</a>
</div>
<div id="section1" class="section_main tab-pane fade">
<div class="section-1-questions">
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Question 1:</legend>
<div class="col-sm-10">
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios1" value="1" />
<label class="form-check-label" for="gridRadios1">
1
</label>
</div>
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios2" value="2" />
<label class="form-check-label" for="gridRadios2">
2
</label>
</div>
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios3" value="3" />
<label class="form-check-label" for="gridRadios3">
3
</label>
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Question 2:</legend>
<div class="col-sm-10">
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios4" value="1" />
<label class="form-check-label" for="gridRadios4">
1
</label>
</div>
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios5" value="2" />
<label class="form-check-label" for="gridRadios5">
2
</label>
</div>
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios6" value="3" />
<label class="form-check-label" for="gridRadios6">
3
</label>
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Question 3:</legend>
<div class="col-sm-10">
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question3" id="gridRadios7" value="1" />
<label class="form-check-label" for="gridRadios7">
1
</label>
</div>
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question3" id="gridRadios8" value="2" />
<label class="form-check-label" for="gridRadios8">
2
</label>
</div>
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question3" id="gridRadios9" value="3" />
<label class="form-check-label" for="gridRadios9">
3
</label>
</div>
</div>
</div>
</fieldset>
</div>
<div class="btn-nav-group">
<a href="" class="btn btn-primary btnNext">Next</a>
</div>
<div class="btn-nav-group">
<a href="" class="btn btn-primary btnPrevious">Previous</a>
</div>
<!-- <a class="btn btn-primary btnNext" >Next</a>
<a class="btn btn-primary btnPrevious" >Previous</a> -->
</div>
<div id="section2" class="section_main tab-pane fade">
<div class="section-2-question">
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Question 4:</legend>
<div class="col-sm-10">
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question4" id="gridRadios10" value="1" />
<label class="form-check-label" for="gridRadios10">
1
</label>
</div>
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question4" id="gridRadios11" value="2" />
<label class="form-check-label" for="gridRadios11">
2
</label>
</div>
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question4" id="gridRadios12" value="3" />
<label class="form-check-label" for="gridRadios12">
3
</label>
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Question 5:</legend>
<div class="col-sm-10">
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question5" id="gridRadios13" value="1" />
<label class="form-check-label" for="gridRadios13">
1
</label>
</div>
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question5" id="gridRadios14" value="2" />
<label class="form-check-label" for="gridRadios14">
2
</label>
</div>
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question5" id="gridRadios15" value="3" />
<label class="form-check-label" for="gridRadios15">
3
</label>
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Question 4:</legend>
<div class="col-sm-10">
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question6" id="gridRadios16" value="1" />
<label class="form-check-label" for="gridRadios16">
1
</label>
</div>
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question6" id="gridRadios17" value="2" />
<label class="form-check-label" for="gridRadios17">
2
</label>
</div>
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question6" id="gridRadios18" value="3" />
<label class="form-check-label" for="gridRadios18">
3
</label>
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Question 4:</legend>
<div class="col-sm-10">
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question7" id="gridRadios19" value="1" />
<label class="form-check-label" for="gridRadios19">
1
</label>
</div>
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question7" id="gridRadios20" value="2" />
<label class="form-check-label" for="gridRadios20">
2
</label>
</div>
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question7" id="gridRadios21" value="3" />
<label class="form-check-label" for="gridRadios21">
3
</label>
</div>
</div>
</div>
</fieldset>
</div>
<div class="btn-nav-group">
<a href="" class="btn btn-primary btnNext">Next</a>
</div>
<div class="btn-nav-group">
<a href="" class="btn btn-primary btnPrevious">Previous</a>
</div>
<!-- <a class="btn btn-primary btnNext" >Next</a>
<a class="btn btn-primary btnPrevious" >Previous</a> -->
</div>
<div id="results" class="tab-pane fade">
<div class="final-results"></div>
<br />
<canvas id="resultsChart"></canvas>
<br />
<button type="button" class="btn btn-success" onclick="displayRadioValue()">
Show Results
</button>
<br />
<div class="spider-chart" id="container2" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto;"></div>
<br />
<div id="control" style="display: none;">
<a id="toemail" class="btn btn-link" href="mailto:[e-mail]?subject=Survey response&body=">Send to email</a>&nbsp;<button onclick="window.print();" class="btn btn-warning">Send to PDF</button>
</div>
</div>
</div>
</div>
</div>
</section>

Answer 1

在html代码中编写此代码，默认情况下该代码不应为：

<div class="btn-nav-group">
<a href="" class="btn btn-primary btnNext">Next</a>
</div>

在前面的问题中，我故意去掉了<a href="" class="btn btn-primary btnNext">Next</a>，只留下了<a href="" class="btn btn-primary btnPrevious">Previous</a>。比如：

<div class="btn-nav-group">
<a href="" class="btn btn-primary btnPrevious">Previous</a>
</div>

因为Next按钮将使用append()方法自动添加：

$(this).closest(".section_main").find(".btn-nav-group").append('<a href="" class="btn btn-primary btnNext">Next</a>');

此按钮Next添加到具有类btn-nav-group的同一div中。比如：

<div class="btn-nav-group">
<a href="" class="btn btn-primary btnPrevious">Previous</a>
<a href="" class="btn btn-primary btnNext">Next</a>
</div>

function displayRadioValue() {
let section1 = document.querySelectorAll('.section-1 > input[type="radio"]');
let section2 = document.querySelectorAll('.section-2 > input[type="radio"]');
let sectionnew = document.querySelectorAll("#section1").values;
let fullName = document.querySelector("#fullName").value;
let email = document.querySelector("#email").value;
let age = document.querySelector("#age").value;
var ctx = document.querySelector("#resultsChart").getContext("2d");
let section1Total = 0;
let section2Total = 0;
let section1Question = 0;
let section2Question = 0;
let finalResults = document.querySelector(".final-results");
let result1 = "";
let result2 = "";
finalResults.innerHTML = "";
//Section 1
section1.forEach(function (radio, index) {
if (radio.checked) {
section2Question++;
section1Total += +radio.value;
}
});
console.log("radio value:", $("input[name='question1']:checked").val());
// console.log( $("input[name=‘question1’]:checked").val());
console.log("Ruchir");
//Section 2
section2.forEach(function (radio, index) {
if (radio.checked) {
section1Question++;
section2Total += +radio.value;
}
});
//Final Results and validation
if (fullName.value != "" && email.value != "" && age.value != "") {
if (section1Total > 0 && section2Total > 0) {
finalResults.innerHTML += genDetails(fullName, email, age);
finalResults.innerHTML += "<h2>Results</h2>";
finalResults.innerHTML += genTable(section1Question, section1Total, 1);
finalResults.innerHTML += genTable(section2Question, section2Total, 2);
finalResults.innerHTML += $("input[name='question1']:checked").val();
finalResults.innerHTML += "<h2>Chart Results</h2>";
document.getElementById("control").style.display = "block";
document.getElementById("resultsChart").style.display = "block";
document.getElementById("toemail").href += document.querySelector(".final-results").innerText;
} else {
finalResults.innerHTML = "Snap! Please select the atleast one survey question from each section ";
}
} else {
finalResults.innerHTML = "Snap! Please enter your name, emial, age in the first section ";
}
}
function genDetails(name, email, age) {
var result = "<h2>Personal Info</h2>";
result += "<b>Full name:</b> <span>" + name + "</span><br>";
result += "<b>Email name:</b> <span>" + email + "</span><br>";
result += "<b>Age: </b> <span>" + age + "</span><br>";
return result;
}
function genTable(ques, total, section) {
var result = "<b>Section " + section + ":</b><br>";
var tr = "<tr><th>" + total + "</th><th>" + ((total / (ques * 3)) * 100).toFixed(2) + "</th></tr>";
result += "<table><thead><tr><th>Total Score</th><th>Percentage</th></tr></thead><tbody>" + tr + "</tbody></table>";
return result;
}
$('input[type="radio"]').on("change", function () {
let all_radio = $(this).closest(".section_main").find('input[type="radio"]');
let checked_radio = $(this).closest(".section_main").find('input[type="radio"]:checked');
if (checked_radio.length == all_radio.length / 3) {
$(this).closest(".section_main").find(".btn-nav-group").append('<a href="" class="btn btn-primary btnNext">Next</a>');
}
});
$(document).ready(function () {
$(".btnNext").click(function (e) {
e.preventDefault();
$("ul.nav-tabs li.nav-item a.active").closest("li").next("li").find("a").trigger("click");
});
$(".btnPrevious").click(function (e) {
e.preventDefault();
$("ul.nav-tabs li.nav-item a.active").closest("li").next("li").find("a").trigger("click");
});
});

canvas {
display: none;
}
@media print {
body * {
visibility: hidden;
}
canvas {
visibility: visible;
margin-top: 30%;
}
.form-control {
visibility: visible;
}
.final-results * {
visibility: visible;
}
.spider-chart * {
visibility: visible;
}
.final-results,
.form-control {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
}
table,
table tr th,
table tr td {
border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="container py-4">
<div class="row">
<div class="col-md-12">
<h2>Survey</h2>
<ul id="tabs" class="nav nav-tabs">
<li class="nav-item"><a href="" data-target="#personalInfo" data-toggle="tab" class="nav-link small text-uppercase active">Personal Info</a></li>
<li class="nav-item"><a href="" data-target="#section1" data-toggle="tab" class="nav-link small text-uppercase">Section 1</a></li>
<li class="nav-item"><a href="" data-target="#section2" data-toggle="tab" class="nav-link small text-uppercase">Section 2</a></li>
<li class="nav-item"><a href="" data-target="#results" data-toggle="tab" class="nav-link small text-uppercase">Results</a></li>
</ul>
<br />
<div id="tabsContent" class="tab-content">
<div id="personalInfo" class="tab-pane fade active show">
<div class="form-group">
<label for="fullName">Full Name address</label>
<input type="email" class="form-control" id="fullName" aria-describedby="nameHelp" placeholder="Enter full name" />
<small id="nameHelp" class="form-text text-muted">Please enter your full name.</small>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" aria-describedby="email" placeholder="Enter email" />
<small id="email" class="form-text text-muted">Please enter your valid email address.</small>
</div>
<div class="form-group">
<label for="age">Password</label>
<input type="number" class="form-control" id="age" aria-describedby="age" placeholder="Age" />
<small id="age" class="form-text text-muted">Please enter your age in number.</small>
</div>
<!--a class="btn btn-primary btnNext">Next</a-->
</div>
<div id="section1" class="section_main tab-pane fade">
<div class="section-1-questions">
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Question 1:</legend>
<div class="col-sm-10">
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios1" value="1" />
<label class="form-check-label" for="gridRadios1">
1
</label>
</div>
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios2" value="2" />
<label class="form-check-label" for="gridRadios2">
2
</label>
</div>
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios3" value="3" />
<label class="form-check-label" for="gridRadios3">
3
</label>
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Question 2:</legend>
<div class="col-sm-10">
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios4" value="1" />
<label class="form-check-label" for="gridRadios4">
1
</label>
</div>
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios5" value="2" />
<label class="form-check-label" for="gridRadios5">
2
</label>
</div>
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios6" value="3" />
<label class="form-check-label" for="gridRadios6">
3
</label>
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Question 3:</legend>
<div class="col-sm-10">
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question3" id="gridRadios7" value="1" />
<label class="form-check-label" for="gridRadios7">
1
</label>
</div>
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question3" id="gridRadios8" value="2" />
<label class="form-check-label" for="gridRadios8">
2
</label>
</div>
<div class="form-check section-1">
<input class="form-check-input" type="radio" name="question3" id="gridRadios9" value="3" />
<label class="form-check-label" for="gridRadios9">
3
</label>
</div>
</div>
</div>
</fieldset>
</div>
<div class="btn-nav-group">
<a href="" class="btn btn-primary btnPrevious">Previous</a>
</div>
<!-- <a class="btn btn-primary btnNext" >Next</a>
<a class="btn btn-primary btnPrevious" >Previous</a> -->
</div>
<div id="section2" class="section_main tab-pane fade">
<div class="section-2-question">
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Question 4:</legend>
<div class="col-sm-10">
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question4" id="gridRadios10" value="1" />
<label class="form-check-label" for="gridRadios10">
1
</label>
</div>
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question4" id="gridRadios11" value="2" />
<label class="form-check-label" for="gridRadios11">
2
</label>
</div>
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question4" id="gridRadios12" value="3" />
<label class="form-check-label" for="gridRadios12">
3
</label>
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Question 5:</legend>
<div class="col-sm-10">
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question5" id="gridRadios13" value="1" />
<label class="form-check-label" for="gridRadios13">
1
</label>
</div>
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question5" id="gridRadios14" value="2" />
<label class="form-check-label" for="gridRadios14">
2
</label>
</div>
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question5" id="gridRadios15" value="3" />
<label class="form-check-label" for="gridRadios15">
3
</label>
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Question 4:</legend>
<div class="col-sm-10">
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question6" id="gridRadios16" value="1" />
<label class="form-check-label" for="gridRadios16">
1
</label>
</div>
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question6" id="gridRadios17" value="2" />
<label class="form-check-label" for="gridRadios17">
2
</label>
</div>
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question6" id="gridRadios18" value="3" />
<label class="form-check-label" for="gridRadios18">
3
</label>
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Question 4:</legend>
<div class="col-sm-10">
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question7" id="gridRadios19" value="1" />
<label class="form-check-label" for="gridRadios19">
1
</label>
</div>
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question7" id="gridRadios20" value="2" />
<label class="form-check-label" for="gridRadios20">
2
</label>
</div>
<div class="form-check section-2">
<input class="form-check-input" type="radio" name="question7" id="gridRadios21" value="3" />
<label class="form-check-label" for="gridRadios21">
3
</label>
</div>
</div>
</div>
</fieldset>
</div>
<div class="btn-nav-group">
<a href="" class="btn btn-primary btnPrevious">Previous</a>
</div>
<!-- <a class="btn btn-primary btnNext" >Next</a>
<a class="btn btn-primary btnPrevious" >Previous</a> -->
</div>
<div id="results" class="tab-pane fade">
<div class="final-results"></div>
<br />
<canvas id="resultsChart"></canvas>
<br />
<button type="button" class="btn btn-success" onclick="displayRadioValue()">
Show Results
</button>
<br />
<div class="spider-chart" id="container2" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto;"></div>
<br />
<div id="control" style="display: none;">
<a id="toemail" class="btn btn-link" href="mailto:[e-mail]?subject=Survey response&body=">Send to email</a>&nbsp;<button onclick="window.print();" class="btn btn-warning">Send to PDF</button>
</div>
</div>
</div>
</div>
</div>
</section>