How to make required be empty after selecting radio button - javascript

I am trying to change the name of required when it is not selected and I did it. When I click "Send" without selecting it first, it will show an error, but when I selected it again but not the first radio button where I put the required syntax it still shows the same error that forced me to select the first radio button. Is there a way to make it right, please? Thank you for the help.
This is my code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<form method="post" action="" id="form">
<div class="container">
<div class="intro-text left-0 text-left text-black p-4 rounded " style="background-color: #ffbe76">
<div class="section-heading-upper">
<p class="mb-3 lead">1. ......?
</p>
</div>
<div class="row ml-2">
<div class="col-auto">
<div class="form-group mx-auto option">
<h2 class="section-heading mb-2">
<span class="text-center section-heading-upper">Layanan</span>
</h2>
<div class="form-check">
<input class="form-check-input" type="radio" name="penting1" id="1penting1" value="100.00" required="" oninvalid="this.setCustomValidity('Pick one')" oninput="this.setCustomValidity('')">
<label class="form-check-label" for="exampleRadios1">
Sangat Penting
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="penting1" id="1penting2" value="81.25">
<label class="form-check-label" for="exampleRadios2">
Penting
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="penting1" id="1penting3" value="62.50">
<label class="form-check-label" for="exampleRadios3">
Tidak Penting
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="penting1" id="1penting4" value="43.75">
<label class="form-check-label" for="exampleRadios4">
Sangat Tidak Penting
</label>
</div>
</div>
</div>
<div class="col-auto">
<div class="form-group mx-auto option">
<h2 class="section-heading mb-2">
<span class="text-center section-heading-upper">Kepuasan Layanan</span>
</h2>
<div class="form-check">
<input class="form-check-input" type="radio" name="puas1" id="1puas1" value="100.00" required oninvalid="this.setCustomValidity('Pick one')" oninput="setCustomValidity('')">
<label class="form-check-label" for="exampleRadios1">
Sangat Puas
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="puas1" id="1puas2" value="81.25">
<label class="form-check-label" for="exampleRadios2">
Puas
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="puas1" id="1puas3" value="62.50">
<label class="form-check-label" for="exampleRadios3">
Tidak Puas
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="puas1" id="1puas4" value="43.75">
<label class="form-check-label" for="exampleRadios4">
Sangat Tidak Puas
</label>
</div>
</div>
</div>
</div>
<div class="text-center mt-2">
<input class="btn btn-primary btn-lg" value="Send" id="singlebutton" name="submit" type="submit" onclick="check()">
</div>
</form>

You can remove required attributes and test whether a specific one is checked using jQuery as follows:
if ($('input[name=penting1]:checked').length > 0) {
//selected
}
if ($('input[name=puas1]:checked').length > 0) {
//selected
}
it will work :)

Related

How to put condition on questions to grey out (having questions in HTML with radio button answer ) using NA button for each question?

I have created one HTML/JS application in which i have created 5 questions with radio button answer.i have given user to do click NA for not applicable questions.but i want to put condition that user only able to grey out 3 questions.Not more than that here i am confused how to do it.below is the code.Also i have put Next button with condition so each question which is not grey out should be answer :-
HTML :-
<div class="section-1-questions">
<div style="background-color:greenyellow;"> <b>Section 1:</b> </div><br>
<fieldset class="form-group">
<div class="row1">
<div class = "question1">
<legend id="q1" class="col-form-label col-sm-8 pt-0"><b>1) Question 1</b></legend>
<div class="col-sm-10">
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios1" value="1" >
<label class="form-check-label" for="gridRadios1">
Never
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios2" value="2">
<label class="form-check-label" for="gridRadios2">
Rarely
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios3" value="3">
<label class="form-check-label" for="gridRadios3">
Occasionally
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios4" value="4">
<label class="form-check-label" for="gridRadios4">
Often
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question1" id="gridRadios5" value="5">
<label class="form-check-label" for="gridRadios5">
Always
</label>
</div>
<div class="form-group">
<input type="button" name="q1Remark" value="Remark" onclick="onButtonClick(1)" />
<input class="hide" type="text" id="textInput1" value="" oninput="updateTextBox()" />
<p>Remaining Characters: <span id="chars-left">100</span></p>
</div>
<div class="form-group">
<input type="button" name="disable1" id = "na1" value="N/A"/>
</div>
</div></div>
</div>
{{!-- <input type="button" id="remarks" value="Remarks" /> --}}
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q2" class="col-form-label col-sm-8 pt-3"><b>2) Question 2</b></legend>
<div class="col-sm-10">
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios6" value="1">
<label class="form-check-label" for="gridRadios6">
Never
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios7" value="2">
<label class="form-check-label" for="gridRadios7">
Rarely
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios8" value="3">
<label class="form-check-label" for="gridRadios8">
Occasionally
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios9" value="4">
<label class="form-check-label" for="gridRadios9">
Often
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question2" id="gridRadios10" value="5">
<label class="form-check-label" for="gridRadios10">
Always
</label>
</div>
<div class="form-group">
<input type="button" name="q2Remark" value="Remark" onclick="onButtonClick(2)" />
<input class="hide" type="text" id="textInput2" value="" />
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q3" class="col-form-label col-sm-8 pt-3"><b>3) Question 3</b></legend>
<div class="col-sm-10">
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question3" id="gridRadios11" value="1">
<label class="form-check-label" for="gridRadios11">
Never
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input " type="radio" name="question3" id="gridRadios12" value="2">
<label class="form-check-label" for="gridRadios12">
Rarely
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question3" id="gridRadios13" value="3">
<label class="form-check-label" for="gridRadios13">
Occasionally
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question3" id="gridRadios14" value="4">
<label class="form-check-label" for="gridRadios14">
Often
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question3" id="gridRadios15" value="5">
<label class="form-check-label" for="gridRadios15">
Always
</label>
</div>
<div class="form-group">
<input type="button" name="q3Remark" value="Remark" onclick="onButtonClick(3)" />
<input class="hide" type="text" id="textInput3" value="" />
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q4" class="col-form-label col-sm-8 pt-3"><b>4) Question 4</b></legend>
<div class="col-sm-10">
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question4" id="gridRadios16" value="1">
<label class="form-check-label" for="gridRadios16">
Never
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question4" id="gridRadios17" value="2">
<label class="form-check-label" for="gridRadios17">
Rarely
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question4" id="gridRadios18" value="3">
<label class="form-check-label" for="gridRadios18">
Occasionally
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question4" id="gridRadios19" value="4">
<label class="form-check-label" for="gridRadios19">
Often
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question4" id="gridRadios20" value="5">
<label class="form-check-label" for="gridRadios20">
Always
</label>
</div>
<div class="form-group">
<input type="button" name="q4Remark" value="Remark" onclick="onButtonClick(4)" />
<input class="hide" type="text" id="textInput4" value="" />
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q5" class="col-form-label col-sm-8 pt-3"><b>5) QUESTION 5</b></legend>
<div class="col-sm-10">
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question5" id="gridRadios21" value="1">
<label class="form-check-label" for="gridRadios21">
Never
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question5" id="gridRadios22" value="2">
<label class="form-check-label" for="gridRadios22">
Rarely
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question5" id="gridRadios23" value="3">
<label class="form-check-label" for="gridRadios23">
Occasionally
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question5" id="gridRadios24" value="4">
<label class="form-check-label" for="gridRadios24">
Often
</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question5" id="gridRadios25" value="5">
<label class="form-check-label" for="gridRadios25">
Always
</label>
</div>
<div class="form-group">
<input type="button" name="q5Remark" value="Remark" onclick="onButtonClick(5)" />
<input class="hide" type="text" id="textInput5" value="" />
</div>
</div>
</div>
</fieldset>
<div class="form-group">
<label for="remarks"><b>Remarks / Observations </b></label>
<input type="name" class="form-control" name="Remarks1" id="remarks1" aria-describedby="nameHelp" placeholder="Please enter your Remarks / Observations">
<small id="nameHelp" class="form-text text-muted">Please enter your Remarks / Observations about these questions.</small>
</div>
</div>
<br>
<a class="btn btn-primary btnPrevious" >Previous</a>
<a class="btn btn-primary btnNextS1" >Next</a>
</div>
JS :-
$(document).ready(function () {
$("#na1").click(function() {
console.log("na is working");
$(".question1 input").attr('disabled', true);
})
});
$('.btnNextS1').click(function(){
if($('div.row1:not(:has(:radio:checked))').length){
$('div.row1:not(:has(:radio:checked))').parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please Answer this question</div>");
}else {
// e.stopPropagation();
$('ul.nav-tabs li.nav-item a.active').closest('li').next('li').find('a').trigger('click');
}});
As each question has identical information, why not do it once and repeat.
For the NA button, we just add a class onto the enclosing div which helps us with styling and also gives us a selector to test for legnth. When it's over 3 we prevent it from continuing.
Sorry I changed the code, but hopefully this will give you some insight on how to make your code more lean, managable and responsive. Now if you want to update the answers, you can do it once and it works for them all.
$(document).ready(function() {
let ctr = 1;
$('.answers').each(function(index) {
let i = index + 1
let html = ` <div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="1">
<label class="form-check-label" for="gridRadios${ctr}"> Never</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="2">
<label class="form-check-label" for="gridRadios${ctr}">Rarely</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="3">
<label class="form-check-label" for="gridRadios${ctr}">Occasionally</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="4">
<label class="form-check-label" for="gridRadios${ctr}">Often</label>
</div>
<div class="form-check-inline section-1">
<input class="form-check-input" type="radio" name="question${i}" id="gridRadios${ctr}" value="5">
<label class="form-check-label" for="gridRadios${ctr}">Always</label>
</div>
<div class="form-group">
<input type="button" name="q${i}Remark" value="Remark" onclick="onButtonClick(${i})" />
<input class="hide" type="text" id="textInput${i}" value="" oninput="updateTextBox()" />
<p>Remaining Characters: <span id="chars-left">100</span></p>
</div>
<div class="form-group">
<button name="disable${i}" id="na${i}" class='btn-na'>N/A</button>
</div>
`
$(this).html(html);
ctr++;
})
$(".btn-na").click(function() {
let n = $('.answers.disabled').length
if (n >= 3) {
alert('You can only disable 3');
return
}
$(this).closest('.answers').find("input").attr('disabled', true);
$(this).closest('.answers').addClass('disabled')
})
});
$('.btnNextS1').click(function() {
if ($('div.row1:not(:has(:radio:checked))').length) {
$('div.row1:not(:has(:radio:checked))').parent().after("<div class='validation' style='color:red;margin-bottom: 20px;'>Please Answer this question</div>");
} else {
// e.stopPropagation();
$('ul.nav-tabs li.nav-item a.active').closest('li').next('li').find('a').trigger('click');
}
});
.answers.disabled {
opacity: .5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section-1-questions">
<div style="background-color:greenyellow;"> <b>Section 1:</b> </div><br>
<fieldset class="form-group">
<div class="row1">
<div class="question1">
<legend id="q1" class="col-form-label col-sm-8 pt-0"><b>1) Question 1</b></legend>
<div class="col-sm-10 answers">
</div>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q2" class="col-form-label col-sm-8 pt-3"><b>2) Question 2</b></legend>
<div class="col-sm-10 answers">
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q3" class="col-form-label col-sm-8 pt-3"><b>3) Question 3</b></legend>
<div class="col-sm-10 answers">
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q4" class="col-form-label col-sm-8 pt-3"><b>4) Question 4</b></legend>
<div class="col-sm-10 answers">
</div>
</div>
</fieldset>
<fieldset class="form-group">
<div class="row1">
<legend id="q5" class="col-form-label col-sm-8 pt-3"><b>5) QUESTION 5</b></legend>
<div class="col-sm-10 answers">
</div>
</div>
</fieldset>
<div class="form-group">
<label for="remarks"><b>Remarks / Observations </b></label>
<input type="name" class="form-control" name="Remarks1" id="remarks1" aria-describedby="nameHelp" placeholder="Please enter your Remarks / Observations">
<small id="nameHelp" class="form-text text-muted">Please enter your Remarks / Observations about these questions.</small>
</div>
</div>
<br>
<a class="btn btn-primary btnPrevious">Previous</a>
<a class="btn btn-primary btnNextS1">Next</a>
</div>
You want to use the disabled html attribute along with the jquery prop function.
$(".class").prop( "disabled", true );
It's important to note that using disabled and required on the same element can cause problems for users. This is because they won't be able to submit the form because a input is disabled, preventing input, but it's also required.
EDIT
You'll want to define a "counter" variable var disableCount = 0; which will increment every time a question is disabled. Once the counter variable is incremented three times. The click function should 1 Stop incrementing the counter and 2 stop disabling questions.
Something like this should work:
var disableCount = 0;
$("#na1").click(function() {
if(disableCount >= 3) return;
console.log("na is working");
$(".question1 input").attr('disabled', true);
disableCount++;
});

Jquery getting checked items returns unchecked boxes?

This has been driving me crazy for hours. I'm trying to get an array with the values of all "checked" checkboxes when "All" is selected. For some reason, on my site, when I check "All" it returns an empty set, but when I uncheck it the correct values are returned.
The craziest part is that I made a CodePen with the stripped down code and it works as expected, and I can't figure out what is different about my site.
The checkbox is the one above the States that says "All" here: https://dev.vmc.w3.uvm.edu/xana/climateIndicators/table
//check all state checkboxes
$('#all_states').click(function() {
checkCheckboxes(this.id, 'all_states__checkboxes');
});
function checkCheckboxes(id, pID) {
$('#' + pID).find(':checkbox').each(function() {
jQuery(this).prop('checked', $('#' + id).is(':checked'));
});
}
//state filter
$('.state_checkbox').on('click', function() {
var search = [];
$('.state_sub_checkbox:checked').each(function() {
var group = $(this).val();
search.push(group.trim());
});
console.log(search);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
My HTML code: ```
<div class="px-3 py-3">
<form>
<div class="form-group form-check mb-2">
<input type="checkbox" class="form-check-input state_checkbox" id="all_states">
<label class="form-check-label" for="All">All</label>
</div>
<div class="row pl-3" id="all_states__checkboxes">
<div class="col-lg">
<div class="form-group form-check mb-0">
<input type="checkbox" class="form-check-input state_sub_checkbox" value="CT" id="Connecticut">
<label class="form-check-label" for="Connecticut">Connecticut</label>
</div>
<div class="form-group form-check mb-0">
<input type="checkbox" class="form-check-input state_sub_checkbox" value="ME" id="Maine">
<label class="form-check-label" for="Maine">Maine</label>
</div>
<div class="form-group form-check mb-0">
<input type="checkbox" class="form-check-input state_sub_checkbox" value="MA" id="Massachussetts">
<label class="form-check-label" for="Massachussetts">Massachussetts</label>
</div>
</div>
<div class="col-lg">
<div class="form-group form-check mb-0">
<input type="checkbox" class="form-check-input state_sub_checkbox" value="NH" id="NewHampshire">
<label class="form-check-label" for="NewHampshire">New Hampshire</label>
</div>
<div class="form-group form-check mb-0">
<input type="checkbox" class="form-check-input state_sub_checkbox" value="NY" id="NewYork">
<label class="form-check-label" for="NewYork">New York</label>
</div>
<div class="form-group form-check mb-0">
<input type="checkbox" class="form-check-input state_sub_checkbox" value="VT" id="NewYork">
<label class="form-check-label" for="Vermont">Vermont</label>
</div>
</div>
</div>
</form>
</div>
Try
$('#all_states__checkboxes').on('click', function() {
const all= $('[type=checkbox]',this).length
const checked = $('[type=checkbox]:checked',this).length
$('#all_states').prop('checked', all===checked);
});
$('#all_states').on('click',function() {
$('#all_states__checkboxes [type=checkbox]').attr('checked',this.checked)
})

Send HTML/Js page result to mailbox with user typed email address

I have created js/html page and result of this page i am trying to send to mail box.Currently i am using
<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>
But it is opening the option to select a mail box and than you can send it typing mail id.But i want something like a box in which whatever mail id i have write mail should be send to that mail box.
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 add a form HTML with email input in it to store the email address user entered so that can use to send to mail
On clicking Send to email button you will just a form where user can type in the email address with send button in it. If user decide to change the mind i have added a close button as well to hide the form.
When you have entered the email address you can press send button and its will generate the href data so that can be used as mail data. In there you will the user typed email address will be there as to Email.
Lastly, if you did not type anything in the email address input you will see an alert will popup which will tell you enter an email address.
Live Working Demo:
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";
} 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
}
//Show email input form
let showEmailInput = document.querySelector('.toemail-form')
function toEmail() {
showEmailInput.classList.remove('d-none') //show form
let finalResults = document.querySelector('.final-results').innerText;
let sendEmail = document.querySelector('.toEmail')
sendEmail.addEventListener('click', function() {
let getEmail = document.querySelector('#exampleInputEmail1') //get value
if (getEmail.value == '') {
alert('Please enter a valid email address')
} else {
sendEmail.href = 'mailto:' + getEmail.value + '?subject=Survey response&body=' + finalResults //assign the email structure
getEmail.value = '' //set value to null
}
})
}
//Close email input form
function closeToEmail(e) {
e.preventDefault()
showEmailInput.classList.add('d-none') //hide form
}
#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;
}
<!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-info" onclick="displayRadioValue()">
Show Results
</button>
<br>
<br>
<div id="control" style="display: none">
<button class="btn btn-primary" onclick="toEmail()">Send to Mail</button> <button onclick="window.print();" class="btn btn-warning">Send to PDF</button>
</div>
<form>
<div class="form-group d-none toemail-form">
<label for="exampleInputEmail1">Enter Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">Enter email address above</small>
<a class="btn btn-success toEmail" href="#" role="button">Send</a>
<button class="btn btn-danger" onclick="closeToEmail(event)">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
</body>
</html>

programmatically hide Bootstrap accordion

In my code I use a bootstrap accordion for extra option. When click start, I want to collapse (close) it. I tried
$('#accordion2').collapse({
hide: true
});
But the accordion close and then reopen. A second click do not do anything more. What I miss here? As written in the Bootstrap documentation I use the data-parent to close it.
The code is:
<div id="accordion2" style="width:802px;">
<div class="card">
<div class="card-header" id="headingImgOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseImgOne" aria-expanded="true" aria-controls="collapseImgOne">
Testrun Optionen
</button>
</h5>
</div>
<div id="collapseImgOne" class="collapse" aria-labelledby="headingImgOne" data-parent="#accordion2">
<div class="card-body">
<div class="form-group row">
<label for="text" class="col-4 col-form-label">Server</label>
<div class="col-7">
<div class="input-group">
<div class="form-check">
<label>
<input type="checkbox" name="c06" id="c06" checked> <span class="label-text">c06</span>
</label>
<label>
<input type="checkbox" name="c07" id="c07" checked> <span class="label-text">c07</span>
</label>
<label>
<input type="checkbox" name="c08" id="c08" checked> <span class="label-text">c08</span>
</label>
<label>
<input type="checkbox" name="c09" id="c09"> <span class="label-text">c09</span>
</label>
<label>
<input type="checkbox" name="c10" id="c10"> <span class="label-text">c10</span>
</label>
<label>
<input type="checkbox" name="c11" id="c11"> <span class="label-text">c11</span>
</label>
<label>
<input type="checkbox" name="c12" id="c12"> <span class="label-text">c12</span>
</label>
<label>
<input type="checkbox" name="c13" id="c13"> <span class="label-text">c13</span>
</label>
<label>
<input type="checkbox" name="c14" id="c14"> <span class="label-text">c14</span>
</label>
<label>
<input type="checkbox" name="c15" id="c15"> <span class="label-text">c15</span>
</label>
<label>
<input type="checkbox" name="c16" id="c16"> <span class="label-text">c16</span>
</label>
<label>
<input type="checkbox" name="c17" id="c17"> <span class="label-text">c17</span>
</label>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="select" class="col-4 col-form-label">Server Domain</label>
<div class="col-7">
<select id="imgdomain" name="select" class="custom-select">
<option value="domain.com" selected>domain.com</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<br/>

How to make Input text inline with Radio Button in Button

i am new to bootstrap building a web page .my code segment of HTML page is
<form class="form-horizontal">
<div class="control-group">
<p>Create a promo code</p>
</div>
<div class="control-group">
<div> Promo description * </div>
<div class="controls">
<textarea rows="3"></textarea>
</div>
</div>
<div class="control-group">
<div>Promo Type</div>
<div class="controls">
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked></input>
Instant Discount
</label>
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"></input>
Cash back
</label>
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionRadios3" value="option3"> </input>
Other Gratification
</label>
</div>
</div>
<div class="control-group">
<div> Promo Value * </div>
<div class="controls">
<label class="radio inline">
<input type="radio" name="optionsRadios1" id="optionsRadios4" value="option1" checked></input>
Percentage
<label for="hello" class="inline">Upper Limit</label>
<input id="hello" type="text" class="inline" placeholder="Text input">
</label>
<label class="radio inline">
<input type="radio" name="optionsRadios1" id="optionRadios6" value="option3"> </input>
Fixed Amount
</label>
</div>
</div>
</form>
a screen shot of page generated by this code is
as you can see percentage radio button and Upperlimit label and text input are not inline to each other .i want to make them inline.can any one please help how to accomplish this ??
Update
i tried the suggestion in the comment this time my html segment is
<form class="form-horizontal">
<div class="control-group">
<p>Create a promo code</p>
</div>
<div class="control-group">
<div> Promo description * </div>
<div class="controls">
<textarea rows="3"></textarea>
</div>
</div>
<div class="control-group">
<div>Promo Type</div>
<div class="controls">
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked></input>
Instant Discount
</label>
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"></input>
Cash back
</label>
<label class="radio inline">
<input type="radio" name="optionsRadios" id="optionRadios3" value="option3"> </input>
Other Gratification
</label>
</div>
</div>
<div class="control-group">
<div> Promo Value * </div>
<div class="controls">
<label class="radio inline" id="label1">
<input type="radio" name="optionsRadios1" id="optionsRadios4" value="option1" checked></input>
Percentage
</label>
<label for="hello" class="inline" id="label2">Upper Limit
<input id="hello" type="text" class="inline" placeholder="Text input">
</label>
<label class="radio inline" id="label3" >
<input type="radio" name="optionsRadios1" id="optionRadios6" value="option3"> </input>
Fixed Amount
</label>
</div>
</div>
<div class="control-group">
<div> Promo-code usage count *
</div>
<div class="controls">
<label class="radio inline">
<input type="radio" name="optionsRadios2" id="optionsRadios5" value="option1" checked></input>
Unlimited
<label for="hello1" class="inline">Limited
<input id="hello" type="radio" class="radio inline">
</label>
<input id="hello" type="text" class="inline">
</div>
</div>
</form>
and main.css is
#hello,#optionsRadios4#optionRadios6#label1#label2#label3 {
display: inline-block; float: left;
}
and i am getting the screen shot and it is not the expected any other suggestions ??
Does this JSBin look like what you want?

Categories

Resources