Append() Method Is Not Working For Putting Condition On Button For Html/js Application
I have created a questionnaire application using HTML/JS.But i am stuck in one place i am using next button to go to next section of questions but i wanted to put condition to chec
Solution 1:
In the html code you write this code, which should not be in this html by default:
<divclass="btn-nav-group"><ahref=""class="btn btn-primary btnNext">Next</a></div>
In the previous question, I deliberately removed <a href="" class="btn btn-primary btnNext">Next</a>
, leaving only <a href="" class="btn btn-primary btnPrevious">Previous</a>
. Like that:
<divclass="btn-nav-group"><ahref=""class="btn btn-primary btnPrevious">Previous</a></div>
Because the Next button will be added automatically, using the append()
method:
$(this).closest(".section_main").find(".btn-nav-group").append('<a href=""class="btn btn-primary btnNext">Next</a>');
This button is Next added to the same div with class btn-nav-group
. Like that:
<divclass="btn-nav-group"><ahref=""class="btn btn-primary btnPrevious">Previous</a><ahref=""class="btn btn-primary btnNext">Next</a></div>
functiondisplayRadioValue() {
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 validationif (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 ";
}
}
functiongenDetails(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;
}
functiongenTable(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,
tabletrth,
tabletrtd {
border: 1px solid black;
}
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><sectionclass="container py-4"><divclass="row"><divclass="col-md-12"><h2>Survey</h2><ulid="tabs"class="nav nav-tabs"><liclass="nav-item"><ahref=""data-target="#personalInfo"data-toggle="tab"class="nav-link small text-uppercase active">Personal Info</a></li><liclass="nav-item"><ahref=""data-target="#section1"data-toggle="tab"class="nav-link small text-uppercase">Section 1</a></li><liclass="nav-item"><ahref=""data-target="#section2"data-toggle="tab"class="nav-link small text-uppercase">Section 2</a></li><liclass="nav-item"><ahref=""data-target="#results"data-toggle="tab"class="nav-link small text-uppercase">Results</a></li></ul><br /><divid="tabsContent"class="tab-content"><divid="personalInfo"class="tab-pane fade active show"><divclass="form-group"><labelfor="fullName">Full Name address</label><inputtype="email"class="form-control"id="fullName"aria-describedby="nameHelp"placeholder="Enter full name" /><smallid="nameHelp"class="form-text text-muted">Please enter your full name.</small></div><divclass="form-group"><labelfor="email">Email address</label><inputtype="email"class="form-control"id="email"aria-describedby="email"placeholder="Enter email" /><smallid="email"class="form-text text-muted">Please enter your valid email address.</small></div><divclass="form-group"><labelfor="age">Password</label><inputtype="number"class="form-control"id="age"aria-describedby="age"placeholder="Age" /><smallid="age"class="form-text text-muted">Please enter your age in number.</small></div><!--a class="btn btn-primary btnNext">Next</a--></div><divid="section1"class="section_main tab-pane fade"><divclass="section-1-questions"><fieldsetclass="form-group"><divclass="row"><legendclass="col-form-label col-sm-2 pt-0">Question 1:</legend><divclass="col-sm-10"><divclass="form-check section-1"><inputclass="form-check-input"type="radio"name="question1"id="gridRadios1"value="1" /><labelclass="form-check-label"for="gridRadios1">
1
</label></div><divclass="form-check section-1"><inputclass="form-check-input"type="radio"name="question1"id="gridRadios2"value="2" /><labelclass="form-check-label"for="gridRadios2">
2
</label></div><divclass="form-check section-1"><inputclass="form-check-input"type="radio"name="question1"id="gridRadios3"value="3" /><labelclass="form-check-label"for="gridRadios3">
3
</label></div></div></div></fieldset><fieldsetclass="form-group"><divclass="row"><legendclass="col-form-label col-sm-2 pt-0">Question 2:</legend><divclass="col-sm-10"><divclass="form-check section-1"><inputclass="form-check-input"type="radio"name="question2"id="gridRadios4"value="1" /><labelclass="form-check-label"for="gridRadios4">
1
</label></div><divclass="form-check section-1"><inputclass="form-check-input"type="radio"name="question2"id="gridRadios5"value="2" /><labelclass="form-check-label"for="gridRadios5">
2
</label></div><divclass="form-check section-1"><inputclass="form-check-input"type="radio"name="question2"id="gridRadios6"value="3" /><labelclass="form-check-label"for="gridRadios6">
3
</label></div></div></div></fieldset><fieldsetclass="form-group"><divclass="row"><legendclass="col-form-label col-sm-2 pt-0">Question 3:</legend><divclass="col-sm-10"><divclass="form-check section-1"><inputclass="form-check-input"type="radio"name="question3"id="gridRadios7"value="1" /><labelclass="form-check-label"for="gridRadios7">
1
</label></div><divclass="form-check section-1"><inputclass="form-check-input"type="radio"name="question3"id="gridRadios8"value="2" /><labelclass="form-check-label"for="gridRadios8">
2
</label></div><divclass="form-check section-1"><inputclass="form-check-input"type="radio"name="question3"id="gridRadios9"value="3" /><labelclass="form-check-label"for="gridRadios9">
3
</label></div></div></div></fieldset></div><divclass="btn-nav-group"><ahref=""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><divid="section2"class="section_main tab-pane fade"><divclass="section-2-question"><fieldsetclass="form-group"><divclass="row"><legendclass="col-form-label col-sm-2 pt-0">Question 4:</legend><divclass="col-sm-10"><divclass="form-check section-2"><inputclass="form-check-input"type="radio"name="question4"id="gridRadios10"value="1" /><labelclass="form-check-label"for="gridRadios10">
1
</label></div><divclass="form-check section-2"><inputclass="form-check-input"type="radio"name="question4"id="gridRadios11"value="2" /><labelclass="form-check-label"for="gridRadios11">
2
</label></div><divclass="form-check section-2"><inputclass="form-check-input"type="radio"name="question4"id="gridRadios12"value="3" /><labelclass="form-check-label"for="gridRadios12">
3
</label></div></div></div></fieldset><fieldsetclass="form-group"><divclass="row"><legendclass="col-form-label col-sm-2 pt-0">Question 5:</legend><divclass="col-sm-10"><divclass="form-check section-2"><inputclass="form-check-input"type="radio"name="question5"id="gridRadios13"value="1" /><labelclass="form-check-label"for="gridRadios13">
1
</label></div><divclass="form-check section-2"><inputclass="form-check-input"type="radio"name="question5"id="gridRadios14"value="2" /><labelclass="form-check-label"for="gridRadios14">
2
</label></div><divclass="form-check section-2"><inputclass="form-check-input"type="radio"name="question5"id="gridRadios15"value="3" /><labelclass="form-check-label"for="gridRadios15">
3
</label></div></div></div></fieldset><fieldsetclass="form-group"><divclass="row"><legendclass="col-form-label col-sm-2 pt-0">Question 4:</legend><divclass="col-sm-10"><divclass="form-check section-2"><inputclass="form-check-input"type="radio"name="question6"id="gridRadios16"value="1" /><labelclass="form-check-label"for="gridRadios16">
1
</label></div><divclass="form-check section-2"><inputclass="form-check-input"type="radio"name="question6"id="gridRadios17"value="2" /><labelclass="form-check-label"for="gridRadios17">
2
</label></div><divclass="form-check section-2"><inputclass="form-check-input"type="radio"name="question6"id="gridRadios18"value="3" /><labelclass="form-check-label"for="gridRadios18">
3
</label></div></div></div></fieldset><fieldsetclass="form-group"><divclass="row"><legendclass="col-form-label col-sm-2 pt-0">Question 4:</legend><divclass="col-sm-10"><divclass="form-check section-2"><inputclass="form-check-input"type="radio"name="question7"id="gridRadios19"value="1" /><labelclass="form-check-label"for="gridRadios19">
1
</label></div><divclass="form-check section-2"><inputclass="form-check-input"type="radio"name="question7"id="gridRadios20"value="2" /><labelclass="form-check-label"for="gridRadios20">
2
</label></div><divclass="form-check section-2"><inputclass="form-check-input"type="radio"name="question7"id="gridRadios21"value="3" /><labelclass="form-check-label"for="gridRadios21">
3
</label></div></div></div></fieldset></div><divclass="btn-nav-group"><ahref=""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><divid="results"class="tab-pane fade"><divclass="final-results"></div><br /><canvasid="resultsChart"></canvas><br /><buttontype="button"class="btn btn-success"onclick="displayRadioValue()">
Show Results
</button><br /><divclass="spider-chart"id="container2"style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto;"></div><br /><divid="control"style="display: none;"><aid="toemail"class="btn btn-link"href="mailto:youremail@domain.com?subject=Survey response&body=">Send to email</a> <buttononclick="window.print();"class="btn btn-warning">Send to PDF</button></div></div></div></div></div></section>
Post a Comment for "Append() Method Is Not Working For Putting Condition On Button For Html/js Application"