I have multiple DIV radio buttons and would like to have the background (or class) change to blue if the the child input is changed and if I select other option of the same name group, the background for the div is set back to white.
Here is what i was hoping to achieve
I have tried to use .focusin or .focusout, but the style only affects the input radio button but not the div.
For example, if I select 80s, I want to add a class or change the background to blue for that specific div only.
SOLUTION - FIXED:
const allFormGroups = document.querySelectorAll('.questionGroup');
allFormGroups.forEach(questionGroup => {
questionGroup.addEventListener('change', (evt) => {
evt.currentTarget
.querySelectorAll('.questionclass-selected')
.forEach(element => {
element.classList.remove('questionclass-selected')
});
evt.target
.closest('.form-check')
.classList.add('questionclass-selected');
}, true);
});
.questionclass {
border-radius: var(--bs-border-radius-pill)!important;
color: #fff!important;
background-color: RGBA(13, 110, 253, var(--bs-bg-opacity, 1))!important;
}
.questionclass-selected {
border-radius: var(--bs-border-radius-pill)!important;
color: #000!important;
background-color: RGBA(255, 193, 7, var(--bs-bg-opacity, 1))!important;
}
.active {
color: red;
background-color: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>entr-radio-buttons</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<div class="container">
<p class="fs-2 text-primary">Hello music lover</p>
<div class="questionGroup">
<p>Which music genre you prefer?</p>
<div class="form-check border rounded-pill questionclass" name="musicgenre"><input class="form-check-input" type="radio" id="formCheck-1" name="musicgenre"><label class="form-check-label" for="formCheck-1" name="musicgenre">70s</label></div>
<div class="form-check border rounded-pill questionclass" name="musicgenre"><input class="form-check-input" type="radio" id="formCheck-2" name="musicgenre" selected=""><label class="form-check-label" for="formCheck-2" name="musicgenre">80s</label></div>
<div class="form-check border rounded-pill questionclass" name="musicgenre"><input class="form-check-input" type="radio" id="formCheck-4" name="musicgenre"><label class="form-check-label" for="formCheck-4" name="musicgenre">90s</label></div>
</div>
<div class="questionGroup">
<p>What kind of music you like?</p>
<div class="form-check border rounded-pill questionclass" name="musictype"><input class="form-check-input" type="radio" id="formCheck-3" name="musictype"><label class="form-check-label" for="formCheck-3" name="musictype">Classical</label></div>
<div class="form-check border rounded-pill questionclass" name="musictype"><input class="form-check-input" type="radio" id="formCheck-5" name="musictype"><label class="form-check-label" for="formCheck-5" name="musictype">Pop</label></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/_questionToggle.js"></script>
</body>
</html>
You can use the selector :has and look for :checked radios:
.form-check:has(:checked){
background:blue;
border-radius:10px;
}
<div class="container">
<p class="fs-2 text-primary">Hello music lover</p>
<div id="question1">
<p>Which music genre you prefer?</p>
<div class="form-check" name="musicgenre"><input class="form-check-input" type="radio" id="formCheck-1" name="musicgenre"><label class="form-check-label" for="formCheck-1" name="musicgenre">70s</label></div>
<div class="form-check" name="musicgenre"><input class="form-check-input" type="radio" id="formCheck-2" name="musicgenre"><label class="form-check-label" for="formCheck-2" name="musicgenre">80s</label></div>
<div class="form-check" name="musicgenre"><input class="form-check-input" type="radio" id="formCheck-4" name="musicgenre"><label class="form-check-label" for="formCheck-4" name="musicgenre">90s</label></div>
</div>
<div id="question2">
<p>What kind of music you like?</p>
<div class="form-check" name="musictype"><input class="form-check-input" type="radio" id="formCheck-3" name="musictype"><label class="form-check-label" for="formCheck-3" name="musictype">Classical</label></div>
<div class="form-check" name="musictype"><input class="form-check-input" type="radio" id="formCheck-5" name="musictype"><label class="form-check-label" for="formCheck-5" name="musictype">Pop</label></div>
<div class="form-check" name="musictype"><input class="form-check-input" type="radio" id="formCheck-6" name="musictype"><label class="form-check-label" for="formCheck-6" name="musictype">Country</label></div>
</div>
</div>
Related
I have multiple radio button with different name attribute and with different class names. I need to auto-update these value to the mysql database table.
I am able to auto-update the first value of radio button(i.e,"gender-type") and
when I click on second radio button(i.e,"skincolor") it's value is not updating into the database table.
Can anyone help me with this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="col-md-6 mb-4">
<h6 class="mb-2 pb-1 " style="font-size: 20px;">Gender: </h6>
<div class="form-check form-check-inline">
<input class="gender" type="radio" name="gender" value="Female" id="femaleGender" />
<label class="form-check-label " for="femaleGender">Female</label>
</div>
<div class="form-check form-check-inline">
<input class="gender" type="radio" name="gender" value="Male" id="maleGender" />
<label class="form-check-label " for="maleGender">Male</label>
</div>
<div class="form-check form-check-inline">
<input class="gender" type="radio" name="gender" value="Other" id="otherGender" />
<label class="form-check-label " for="otherGender">Other</label>
</div>
</div>
<div class="col-md-6 mb-4">
<h6 class="mb-2 pb-1 " style="font-size: 20px;">Skin Color: </h6>
<div class="form-check form-check-inline">
<input class="scolor" type="radio" name="s_color" value="color1" id="color1" />
<label class="form-check-label " for="color1">color1</label>
</div>
<div class="form-check form-check-inline">
<input class="scolor" type="radio" name="s_color" value="color2" id="color2" />
<label class="form-check-label " for="color2">color2</label>
</div>
<div class="form-check form-check-inline">
<input class="scolor" type="radio" name="s_color" value="color3" id="color3" />
<label class="form-check-label " for="color3">color3</label>
</div>
</div>
<script>
function autosave()
{
var gender = $("input:radio[name='gender']:checked").val();
var s_color = $("input:radio[name='s_color']:checked").val();
if(gender !=" "&& s_color !=" ")
{
$.ajax({
url:"fetch1.php",
method:"POST",
data:
{
send_gender:gender,
send_s_color:s_color,
send_id:id
},
dataType:"text",
success:function(data){
if(data != ""){
$("#post_id").val(data);
}
$("#autosave").text("Data saved");
} /* success */
}) /* ajax */
} /* filter */
}
</script>
</body>
</html>
It is not clear from the code given how the Javascript/jQuery function autosave is actually invoked and nor is it clear whether or not this is an issue with the PHP so the following might or might not be of interest. There is no jQuery in this small fragment of Javascript - I don't use it so would do it a disservice but this is simple vanilla Javascript.
A small modification to the HTML ( not absolutely necessary but syntactically correct ) would be to use a section to define each of the radio groupings - which has the benefit of allowing us to easily count the number of radio groupings on the page and to compare that with the number of checked radio buttons - when these are the same the ajax function will be sent - thus ensuring that all radio buttons are included in the POST request which should mean the PHP can update the db OK.
const d=document;
// 1 radio button from each of these MUST be checked before ajax request is sent
let oSections=d.querySelectorAll('section');
d.addEventListener('change',e=>{
if( e.target instanceof HTMLInputElement && e.target.type=='radio' ){
// Find ALL checked radio buttons
let col=d.querySelectorAll('section [type="radio"]:checked');
if( col.length === oSections.length ){
// 1 radio from EACH section is now checked, create
// the FormData payload to send via AJAX to the server.
let fd=new FormData();
col.forEach(n=>fd.set(n.name,n.value));
// Send the request
fetch( 'fetch1.php', { method:'post',body:fd } )
.then(r=>r.text())
.then(data=>{
d.querySelector('#post_id').value=data;
d.querySelector('#autosave').textContent='Data saved';
})
.catch(alert)
}
}
});
section{
border:1px dotted grey;
margin:0.25rem;
padding:0.5rem
}
h6{
margin:0 0 1rem 0;
}
<section class="col-md-6 mb-4">
<h6 class="mb-2 pb-1 " style="font-size: 20px;">Gender:</h6>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="gender" type="radio" name="gender" value="Female" />Female
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="gender" type="radio" name="gender" value="Male" />Male
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="gender" type="radio" name="gender" value="Other" />Other
</label>
</div>
</section>
<section class="col-md-6 mb-4">
<h6 class="mb-2 pb-1 " style="font-size: 20px;">Skin Color:</h6>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="scolor" type="radio" name="s_color" value="Green" />Green
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="scolor" type="radio" name="s_color" value="Orange" />Orange
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="scolor" type="radio" name="s_color" value="Purple" />Purple
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="scolor" type="radio" name="s_color" value="Red" />Red
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="scolor" type="radio" name="s_color" value="Gold" />Gold
</label>
</div>
</section>
in my html website i have few questions where each questions have radio buttons as answers, i want the user to proceed to next question only when he selects any radio button of the question, i did the following code:
$('div.question').hide().first().show();
$('a.display').on('click', function(e) {
e.preventDefault();
var that = $('div.question:visible'),
t = $(this).text();
if (t == 'next' && that.next('div.question').length > 0) {
if ($('input[type=radio]:checked').length > 0) {
$('div.question').hide();
that.next('div.question').show()
} else {
alert("Please Select an Option !");
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="question bg-white p-3 border-bottom">
<div class="d-flex flex-row question-title">
<h3 class="text-danger">1. </h3>
<h5 class="mt-1 ml-2">I try to be with people.</h5>
</div>
<div class="ans ml-2">
<div class="form-check">
<input class="form-check-input" name="q1" value="1" type="radio">
<input class="form-check-input" name="q1" type="radio" value="2">
<input class="form-check-input" name="q1" type="radio" value="3">
<input class="form-check-input" name="q1" type="radio" value="4">
</div>
</div>
</div>
<div class="question bg-white p-3 border-bottom">
<div class="d-flex flex-row question-title">
<h3 class="text-danger">1. </h3>
<h5 class="mt-1 ml-2">I am sincere with people.</h5>
</div>
<div class="ans ml-2">
<div class="form-check">
<input class="form-check-input" name="q2" value="1" type="radio">
<input class="form-check-input" name="q2" type="radio" value="2">
<input class="form-check-input" name="q2" type="radio" value="3">
<input class="form-check-input" name="q2" type="radio" value="4">
</div>
</div>
</div>
<a id="display" class="btn btn-info btn-sm display si">next</a>
here this works only for 1st question, after the 1st question, user is able to click next button without checking radio button, can anyone please tell me how to fix this, thanks in advance
You only have two questions in your snippet, I added on to test and found that you need to check the radios of the visible question to test if you can go next
Hiding the next on last question
const $questions = $('div.question').hide().first().show();
const $sub = $("#sub");
const $next = $('#display')
.on('click', function(e) {
e.preventDefault();
var that = $('div.question:visible'),
t = $(this).text(),
$nextQuestion = that.next('div.question'),
moreQuestions = $nextQuestion.length > 0;
if (t == 'next' && moreQuestions) {
if ($('input[type=radio]:checked', that).length > 0) {
$('div.question').hide();
$nextQuestion.show()
} else {
alert("Please Select an Option !");
}
}
const last = $nextQuestion.index() === $questions.length
$next.toggle(last);
$sub.toggle(!last);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="questions">
<div class="question bg-white p-3 border-bottom">
<div class="d-flex flex-row question-title">
<h3 class="text-danger">1. </h3>
<h5 class="mt-1 ml-2">I try to be with people.</h5>
</div>
<div class="ans ml-2">
<div class="form-check">
<input class="form-check-input" name="q1" value="1" type="radio">
<input class="form-check-input" name="q1" type="radio" value="2">
<input class="form-check-input" name="q1" type="radio" value="3">
<input class="form-check-input" name="q1" type="radio" value="4">
</div>
</div>
</div>
<div class="question bg-white p-3 border-bottom">
<div class="d-flex flex-row question-title">
<h3 class="text-danger">1. </h3>
<h5 class="mt-1 ml-2">I am sincere with people.</h5>
</div>
<div class="ans ml-2">
<div class="form-check">
<input class="form-check-input" name="q2" value="1" type="radio">
<input class="form-check-input" name="q2" type="radio" value="2">
<input class="form-check-input" name="q2" type="radio" value="3">
<input class="form-check-input" name="q2" type="radio" value="4">
</div>
</div>
</div>
<div class="question bg-white p-3 border-bottom">
<div class="d-flex flex-row question-title">
<h3 class="text-danger">1. </h3>
<h5 class="mt-1 ml-2">I am fed up with people.</h5>
</div>
<div class="ans ml-2">
<div class="form-check">
<input class="form-check-input" name="q2" value="1" type="radio">
<input class="form-check-input" name="q2" type="radio" value="2">
<input class="form-check-input" name="q2" type="radio" value="3">
<input class="form-check-input" name="q2" type="radio" value="4">
</div>
</div>
</div>
</div>
<a id="display" class="btn btn-info btn-sm display si">next</a>
<button type="submit" id="sub" hidden>Submit</button>
Based on below HTML snippet, manage to get two lines of radio button. When you click on the radio button on the first line, and then proceeds to click any of the radio button on the second line, the result of the radio button on the first line disappears.
How can I make sure, results of both lines of radio button appear together.
<!-- Start first Div -->
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
<label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>
</div>
<!-- End first Div -->
<!-- Start second Div -->
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio4" value="option1">
<label class="form-check-label" for="inlineRadio4">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio5" value="option2">
<label class="form-check-label" for="inlineRadio5">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio6" value="option3" disabled>
<label class="form-check-label" for="inlineRadio6">3 (disabled)</label>
</div>
</div>
<!-- End Second Div -->
Thanks
John
As stated in the MDN documentation on radio buttons:
A radio group is defined by giving each of radio buttons in the group
the same name. Once a radio group is established, selecting any radio
button in that group automatically deselects any currently-selected
radio button in the same group.
So, if you want the second <div> radio buttons to be separate, you have to use a different name for that set of buttons:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Start first Div -->
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
<label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>
</div>
<!-- End first Div -->
<!-- Start second Div -->
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions2" id="inlineRadio4" value="option1">
<label class="form-check-label" for="inlineRadio4">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions2" id="inlineRadio5" value="option2">
<label class="form-check-label" for="inlineRadio5">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions2" id="inlineRadio6" value="option3" disabled>
<label class="form-check-label" for="inlineRadio6">3 (disabled)</label>
</div>
</div>
<!-- End Second Div -->
I have created a survey in which i am showing question in tab and than showing the result.I want to add one more tab at the start and want user to inter his personal information which will shown with the result like name,age and email.Also when i print i want data should shown like personal info and than table of result.
below is the code.
Js File:-
function displayRadioValue() {
let section1 = document.querySelectorAll('.section-1 > input[type="radio"]')
let section2 = document.querySelectorAll('.section-2 > input[type="radio"]')
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
}
})
//Section 2
section2.forEach(function(radio, index) {
if (radio.checked) {
section1Question++
section2Total += +radio.value
}
})
//Final Results and validation
if (section1Total > 0 && section2Total > 0) {
finalResults.innerHTML += genTable(section1Question, section1Total, 1)
finalResults.innerHTML += genTable(section2Question, section2Total, 2)
document.getElementById("control").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 '
}
}
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
}
HTML File :-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Survey Question</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<style>
</style>
<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">Section 1</li>
<li class="nav-item">Section 2</li>
<li class="nav-item">Results</li>
</ul>
<br>
<div id="tabsContent" class="tab-content">
<div id="section1" class="tab-pane fade active show">
<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>
<div id="section2" class="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>
<div id="results" class="tab-pane fade">
<div class="final-results"></div>
<br>
<button type="button" class="btn btn-success" onclick="displayRadioValue()">
Show Results
</button>
<br>
<br>
<div id="control" style="display: none">
<a id="toemail" class="btn btn-link" href="mailto:youremail#domain.com?subject=Survey response&body=">Send to
email</a> <button onclick="window.print();" class="btn btn-warning">Send to PDF</button>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Style Sheet:-
#media print {
body * {
visibility: hidden;
}
.final-results * {
visibility: visible;
}
.final-results {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
}
table,
table tr th,
table tr td {
border: 1px solid black;
}
You can create another section in the start and add three bootstrap field name, email, age and get their values printed out after the before table results.
Ideally, you want to have separate function to and get a return from that function and apply all the personal info details to your final_results div
In addition, i have also added a validation where a user must enter name age and email to be be able to get the results.
Lastly, i have added functionality where you will be able to show personal details on your print PDF as well when you click on Send to PDF.
Live Working Demo:
function displayRadioValue() {
let section1 = document.querySelectorAll('.section-1 > input[type="radio"]')
let section2 = document.querySelectorAll('.section-2 > input[type="radio"]')
let fullName = document.querySelector('#fullName').value
let email = document.querySelector('#email').value
let age = document.querySelector('#age').value
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
}
})
//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)
document.getElementById("control").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 '
}
}
//Personal info
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
}
#media print {
body * {
visibility: hidden;
}
.form-control {
visibility: visible;
}
.final-results * {
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;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Survey Question</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<style>
</style>
<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">Personal Info</li>
<li class="nav-item">Section 1</li>
<li class="nav-item">Section 2</li>
<li class="nav-item">Results</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>
</div>
<div id="section1" class="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>
<div id="section2" class="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>
<div id="results" class="tab-pane fade">
<div class="final-results"></div>
<br>
<button type="button" class="btn btn-success" onclick="displayRadioValue()">
Show Results
</button>
<br>
<br>
<div id="control" style="display: none">
<a id="toemail" class="btn btn-link" href="mailto:youremail#domain.com?subject=Survey response&body=">Send to
email</a> <button onclick="window.print();" class="btn btn-warning">Send to PDF</button>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
I need to validate checkboxes using javascript, and if validation fails - show div with invalid-feedback under checkboxes.
Unfortunately when I add invalid-feedback class to my div, it disappears.
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="gridCheck1" oninput="validateCheckbox()">
<label class="form-check-label" for="gridCheck1">
checbkox1
</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="gridCheck2" oninput="validateCheckbox()">
<label class="form-check-label" for="gridCheck2">
Checbkox12
</label>
</div>
<div id="checkboxIdError">NEED TO HAVE invalid-feedback class</div>
</div>````
Here is the bootstrap validation http://bootstrapvalidator.votintsev.ru/validators/choice/