check all radio button checked and then move to next page - javascript

I want validate to check whether all radio buttons are checked and move to next division. There are five radio button groups. When I clicked submit button validate that five radio button groups to check whether clicked or not
HTML FILE:
<div class="RatContent animated slideInRight" id="question1">
<div class="row" style="border-bottom: 1px solid #f1f1f1 ;">
<div class="col col-60">
<div class="row">
<div class="col">
<h5>How cleanlines is in office?</h5>
</div>
</div>
</div>
<div class="col"><div class="row">
<div class="col">
<input type="radio" name="emotion" value="good" id="good" class="input-hidden" required />
<label for="good">
<i class="fa fa-thumbs-o-up"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion" value="ok" id="ok" class="input-hidden" required />
<label for="ok">
<i class="fa fa-smile-o"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion" value="bad" id="bad" class="input-hidden" required />
<label for="bad">
<i class="fa fa-thumbs-o-down"></i>
</label>
</div>
</div></div>
</div>
<div class="row" style="border-bottom: 1px solid #f1f1f1 ;">
<div class="col col-60">
<div class="row">
<div class="col">
<h5>How cleanlines is in office?</h5>
</div>
</div>
</div>
<div class="col"><div class="row">
<div class="col">
<input type="radio" name="emotion1" value="4" id="good1" class="input-hidden" required />
<label for="good1">
<i class="fa fa-thumbs-o-up"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion1" value="5" id="ok1" class="input-hidden" required />
<label for="ok1">
<i class="fa fa-smile-o"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion1" value="6" id="bad1" class="input-hidden" required />
<label for="bad1">
<i class="fa fa-thumbs-o-down"></i>
</label>
</div>
</div></div>
</div>
<div class="row" style="border-bottom: 1px solid #f1f1f1 ;">
<div class="col col-60">
<div class="row">
<div class="col">
<h5>How cleanlines is in office?</h5>
</div>
</div>
</div>
<div class="col"><div class="row">
<div class="col">
<input type="radio" name="emotion2" value="7" id="good2" class="input-hidden" required />
<label for="good2">
<i class="fa fa-thumbs-o-up"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion2" value="8" id="ok2" class="input-hidden" required />
<label for="ok2">
<i class="fa fa-smile-o"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion2" value="9" id="bad2" class="input-hidden" required />
<label for="bad2">
<i class="fa fa-thumbs-o-down"></i>
</label>
</div>
</div></div>
</div>
<div class="row" style="border-bottom: 1px solid #f1f1f1 ;">
<div class="col col-60">
<div class="row">
<div class="col">
<h5>How cleanlines is in office?</h5>
</div>
</div>
</div>
<div class="col"><div class="row">
<div class="col">
<input type="radio" name="emotion3" value="7" id="good3" class="input-hidden" required />
<label for="good3">
<i class="fa fa-thumbs-o-up"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion3" value="8" id="ok3" class="input-hidden" required />
<label for="ok3">
<i class="fa fa-smile-o"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion3" value="9" id="bad3" class="input-hidden" required />
<label for="bad3">
<i class="fa fa-thumbs-o-down"></i>
</label>
</div>
</div></div>
</div>
<div class="row" style="border-bottom: 1px solid #f1f1f1 ;">
<div class="col col-60">
<div class="row">
<div class="col">
<h5>How cleanlines is in office?</h5>
</div>
</div>
</div>
<div class="col"><div class="row">
<div class="col">
<input type="radio" name="emotion4" value="7" id="good4" class="input-hidden" required />
<label for="good4">
<i class="fa fa-thumbs-o-up"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion4" value="8" id="ok4" class="input-hidden" required />
<label for="ok4">
<i class="fa fa-smile-o"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion4" value="9" id="bad4" class="input-hidden" required />
<label for="bad4">
<i class="fa fa-thumbs-o-down"></i>
</label>
</div>
</div></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col next">
<button type="submit" class="right">
<i style="color:black;" ng-click="openCity(event, 'question2' , 'question1')" class="ionicons ion-arrow-right-c"></i>
</button>
</div>
</div>
<!-- End content-->
</div>
JS FILE:
$scope.openCity = function(evt, cityName , Currentdiv) {
var i, x;
x = document.getElementsByClassName("RatContent");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
var flag=0;
$("#"+Currentdiv).find("input[type='radio']").each(function(){
if($("input[type='radio']").is(':checked') == true ){
flag=1;
return false;
}
});
alert(flag);
if(flag==0){
document.getElementById(cityName).style.display = "block";
}
else{
alert("sfsdf");
}
}

You are using angular js library but not using ng-repeat directive. Create an array which is have radio structure example:
$scope.myArray = [
{
"header" : "First",
"radios" : [
{
"checked" : true,
"icon" : "fa-smile",
"id": "good"
},
{
"checked" : true,
"icon" : "fa-smile",
"id": "good"
}
]
},
{
"header" : "Second",
"radios" : [
{
"checked" : true,
"icon" : "fa-smile",
"id": "good"
},
{
"checked" : true,
"icon" : "fa-smile",
"id": "good"
}
]
}
]
In your html create rows and radios with ng-repeat :
<div class="row" style="border-bottom: 1px solid #f1f1f1 ;" ng-repeat="data in myArray">
<div class="col col-60">
<div class="row">
<div class="col">
<h5>{{data.header}}</h5>
</div>
</div>
</div>
<div class="col" ng-repeat="myRadio in data.radios">
<div class="row">
<div class="col">
<input type="radio" name="emotion" ng.model="myRadio" id="myRadio.id" class="input-hidden" required />
<label for="myRadio.id">
<i class="fa {{myRadio.icon}}"></i>
</label>
</div>
</div>
</div>
</div>

I'm not entirely sure if this is what you had in mind but check it out: http://codepen.io/Knollo/pen/EgXLaW
For the sake of simplicity I've modified your DOM somewhat.
HTML
<div class="question">
<p class="question__title">How cleanlines is in office?</p>
<div class="question__answer">
<input type="radio" name="emotion" value="good" id="good" class="input-hidden" required />
<label for="good">
<i class="fa fa-thumbs-o-up">good</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion" value="ok" id="ok" class="input-hidden" required />
<label for="ok">
<i class="fa fa-smile-o">ok</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion" value="bad" id="bad" class="input-hidden" required />
<label for="bad">
<i class="fa fa-thumbs-o-down">bad</i>
</label>
</div>
</div>
<div class="question">
<p class="question__title">How cleanlines is in office?</p>
<div class="question__answer">
<input type="radio" name="emotion1" value="4" id="good1" class="input-hidden" required />
<label for="good1">
<i class="fa fa-thumbs-o-up">good</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion1" value="5" id="ok1" class="input-hidden" required />
<label for="ok1">
<i class="fa fa-smile-o">okay</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion1" value="6" id="bad1" class="input-hidden" required />
<label for="bad1">
<i class="fa fa-thumbs-o-down">bad</i>
</label>
</div>
</div>
<div class="question">
<p class="question__title">How cleanlines is in office?</p>
<div class="question__answer">
<input type="radio" name="emotion2" value="7" id="good2" class="input-hidden" required />
<label for="good2">
<i class="fa fa-thumbs-o-up">good</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion2" value="8" id="ok2" class="input-hidden" required />
<label for="ok2">
<i class="fa fa-smile-o">okay</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion2" value="9" id="bad2" class="input-hidden" required />
<label for="bad2">
<i class="fa fa-thumbs-o-down">bad</i>
</label>
</div>
</div>
<div class="question">
<p class="question__title">How cleanlines is in office?</p>
<div class="question__answer">
<input type="radio" name="emotion3" value="7" id="good3" class="input-hidden" required />
<label for="good3">
<i class="fa fa-thumbs-o-up">good</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion3" value="8" id="ok3" class="input-hidden" required />
<label for="ok3">
<i class="fa fa-smile-o">okay</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion3" value="9" id="bad3" class="input-hidden" required />
<label for="bad3">
<i class="fa fa-thumbs-o-down">bad</i>
</label>
</div>
</div>
<div class="question">
<p class="question__title">How cleanlines is in office?</p>
<div class="question__answer">
<input type="radio" name="emotion4" value="7" id="good4" class="input-hidden" required />
<label for="good4">
<i class="fa fa-thumbs-o-up">good</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion4" value="8" id="ok4" class="input-hidden" required />
<label for="ok4">
<i class="fa fa-smile-o">okay</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion4" value="9" id="bad4" class="input-hidden" required />
<label for="bad4">
<i class="fa fa-thumbs-o-down">bad</i>
</label>
</div>
</div>
<button onclick="validateGroups()">submit</button>
CSS (scss)
.question {
margin: 10px 0;
padding: 20px 0;
border-bottom: 1px solid black;
&__title {
font-weigth: bold;
color: red;
margin: 0 0 10px;
}
}
Javascript
function validateGroups() {
$questions = $('.question');
$answeredQuestions = $questions.filter(checkForValidAnswer);
if ($answeredQuestions.length != $questions.length) {
alert('not all questions have been answered, yet.');
} else {
alert('all questions answered. proceeding...');
}
}
function checkForValidAnswer($index, question) {
// get all answers
$answers = $(question).find('.question__answer');
// try to find a checked answer
$selectedAnswer = $answers.find('input:checked');
// return false if no checked answer was found
if ($selectedAnswer.length < 1)
return false;
// true, otherwise
return true;
}

Related

disable radio input passed time button

I want to disable todays passed time.
For example:
if time 11:00 and 11:15 are passed then these button are not suppose to
be clickable.
Times input buttons are as follow:
11:00 11:15 11:30 11:45
12:00 12:15 12:30 12:45
13:00 13:15 13:30 13:45
19:00 19:15 19:30 19:45
20:00 20:15 20:30 20:45
21:00 21:15 21:30 21:45
I think I need to improve this check to disabled the input time buttons.
if ( c_hour >= o_hour && ( (c_minutes >= 15 ) ) ) {
option.prop('disabled', true);
Note:
o_hour - clicked button hour
o_minutes - clicked button minute
My function
function updateTimeWindow(type) {
let today = new Date();
let c_hour = today.getUTCHours();
let c_minutes = today.getUTCMinutes();
let next_hour = c_hour;
// $('#time_selector option').each(function () {
$("input[name='time_selector']").each(function () {
var option = $(this);
var o_hour = $(this).attr('data-hour');
var o_minutes = $(this).attr('data-minute');
let current_element_id = option.attr('id')
if (type == 1) { // today
// disable passed time.
// if (o_hour <= c_hour || (o_hour <= next_hour && o_minutes <= c_minutes)) {
if ( c_hour >= o_hour && ( (c_minutes >= 15 ) ) ) {
option.prop('disabled', true);
$('label[class="'+current_element_id+'"]').addClass('no-drop');
}
} else if (type == 2) { // tommorrow.
// enable all time.
option.prop('disabled', false);
$('label[class="' + current_element_id + ' no-drop"]').attr('class', current_element_id);
}
});
}
Time input radio are having following times
html
<div class="tab" style="display: block;">
<div class="row new-rcb ">
<div class="col-md-12 mb-2">
<h5>Time</h5>
</div>
<div class="col-12 text-center mb-2">
<h3>Midday</h3>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt1" name="time_selector" value="11:00" data-hour="11" data-minute="00" disabled="">
<label class="tt1 no-drop" for="tt1" style="justify-content: center;">11:00</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt2" name="time_selector" value="11:15" data-hour="11" data-minute="15" disabled="">
<label class="tt2 no-drop" for="tt2" style="justify-content: center;">11:15 </label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt3" name="time_selector" value="11:30" data-hour="11" data-minute="30" disabled="">
<label class="tt3 no-drop" for="tt3" style="justify-content: center;">11:30</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt4" name="time_selector" value="11:45" data-hour="11" data-minute="45" disabled="">
<label class="tt4 no-drop" for="tt4" style="justify-content: center;">11:45</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt5" name="time_selector" value="12:00" data-hour="12" data-minute="00" disabled="">
<label class="tt5 no-drop" for="tt5" style="justify-content: center;">12:00</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt6" name="time_selector" value="12:15" data-hour="12" data-minute="15" disabled="">
<label class="tt6 no-drop" for="tt6" style="justify-content: center;">12:15</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt7" name="time_selector" value="12:30" data-hour="12" data-minute="30" disabled="">
<label class="tt7 no-drop" for="tt7" style="justify-content: center;">12:30</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt8" name="time_selector" value="12:45" data-hour="12" data-minute="45" disabled="">
<label class="tt8 no-drop" for="tt8" style="justify-content: center;">12:45</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt9" name="time_selector" value="13:00" data-hour="13" data-minute="00" disabled="">
<label class="tt9 no-drop" for="tt9" style="justify-content: center;">13:00</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt10" name="time_selector" value="13:15" data-hour="13" data-minute="15" disabled="">
<label class="tt10 no-drop" for="tt10" style="justify-content: center;">13:15</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt11" name="time_selector" value="13:30" data-hour="13" data-minute="30" disabled="">
<label class="tt11 no-drop" for="tt11" style="justify-content: center;">13:30</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt12" name="time_selector" value="13:45" data-hour="13" data-minute="45">
<label class="tt12" for="tt12" style="justify-content: center;">13:45</label>
</div>
</div>
</div>
<div class="row new-rcb ">
<div class="col-12 text-center mb-2 mt-2">
<h3>Evening</h3>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t21" name="time_selector" value="19:00" data-hour="19" data-minute="00">
<label class="t21" for="t21" style="justify-content: center;">19:00</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t22" name="time_selector" value="19:15" data-hour="19" data-minute="15">
<label class="t22" for="t22" style="justify-content: center;">19:15</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t23" name="time_selector" value="19:30" data-hour="19" data-minute="30">
<label class="t23" for="t23" style="justify-content: center;">19:30</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t24" name="time_selector" value="19:45" data-hour="19" data-minute="45">
<label class="t24" for="t24" style="justify-content: center;">19:45</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t25" name="time_selector" value="20:00" data-hour="20" data-minute="00">
<label class="t25" for="t25" style="justify-content: center;">20:00</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t26" name="time_selector" value="20:15" data-hour="20" data-minute="15">
<label class="t26" for="t26" style="justify-content: center;">20:15</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t27" name="time_selector" value="20:30" data-hour="20" data-minute="30">
<label class="t27" for="t27" style="justify-content: center;">20:30</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t28" name="time_selector" value="20:45" data-hour="20" data-minute="45">
<label class="t28" for="t28" style="justify-content: center;">20:45</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t29" name="time_selector" value="21:00" data-hour="21" data-minute="00">
<label class="t29" for="t29" style="justify-content: center;">21:00</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t210" name="time_selector" value="21:15" data-hour="21" data-minute="15">
<label class="t210" for="t210" style="justify-content: center;">21:15</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t211" name="time_selector" value="21:30" data-hour="21" data-minute="30">
<label class="t211" for="t211" style="justify-content: center;">21:30</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t212" name="time_selector" value="21:45" data-hour="21" data-minute="45">
<label class="t212" for="t212" style="justify-content: center;">21:45</label>
</div>
</div>
</div>
</div>
The hardest part is to simplify ...
const
myform = document.querySelector('#my-form')
, timSelects_Rbuttons = document.querySelectorAll('input[name="time_selector"]')
;
updateTimeWindow(1)
function updateTimeWindow(type)
{
let today = new Date();
let c_HourMinut = (today.getUTCHours() * 60) + today.getUTCMinutes();
if (type===2) c_HourMinut = -1 // tommorrow case ??
if (myform.time_selector.value) // clear radio button time_selector selection
document.querySelector('input[name="time_selector"]:checked').checked = false;
timSelects_Rbuttons.forEach( rButton =>
{
let
[o_hour, o_minutes ] = rButton.value.split(':').map(Number)
, o_HourMinut = (o_hour *60 ) + o_minutes
, timOff = (o_HourMinut < c_HourMinut)
;
rButton.disabled = timOff
rButton.closest('label').classList.toggle('no-drop',timOff)
})
}
// testing part
myform.onsubmit = e =>
{
e.preventDefault() // disable submit for testing
console.clear()
console.log('myform.time_selector.value =', myform.time_selector.value )
}
.no-drop { color : orange }
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<form id="my-form">
<div class="tab">
<div class="row new-rcb ">
<div class="col-md-12 mb-2">
<h5>Time</h5>
</div>
<div class="col-12 text-center mb-2">
<h3>Midday</h3>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="11:00"> 11:00 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="11:15"> 11:15 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="11:30"> 11:30 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="11:45"> 11:45 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="12:00"> 12:00 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="12:15"> 12:15 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="12:30"> 12:30 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="12:45"> 12:45 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="13:00"> 13:00 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="13:15"> 13:15 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="13:30"> 13:30 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="13:45"> 13:45 </label>
</div>
</div>
<div class="row new-rcb ">
<div class="col-12 text-center mb-2 mt-2">
<h3>Evening</h3>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="19:00"> 19:00 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="19:15"> 19:15 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="19:30"> 19:30 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="19:45"> 19:45 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="20:00"> 20:00 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="20:15"> 20:15 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="20:30"> 20:30 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="20:45"> 20:45 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="21:00"> 21:00 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="21:15"> 21:15 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="21:30"> 21:30 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="21:45"> 21:45 </label>
</div>
</div>
</div>
<br><br><br><br><button type="submit"> get Selected (for testing) </button>
</form>

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/>

Print html form input value or specific div content in JS with CSS

I have a form of a prescription. I want to print out that prescription form while submit and also want a proper format in that printout page.
form html
<form role="form" class="registration-form" id="registration_form_id">
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3>Patient Information</h3>
</div>
<div class="form-top-right">
<i class="fa fa-user"></i>
</div>
</div>
<div class="form-bottom">
<div class="form-group">
<label for="form-first-name">Name</label>
<input type="text" name="form-first-name" placeholder="name" class="form-first-name form-control require" id="name">
</div>
<div class="form-group">
<label for="form-last-name">Age</label>
<input type="number" name="form-last-name" placeholder="Age" class="form-last-name form-control require" id="age" >
</div>
<div class="form-group">
<label for="form-last-name">Mobile Number</label>
<input type="number" name="form-last-name" placeholder="Mobile Number" class="form-last-name form-control require" id="mobile_number" >
</div>
<div class="form-group">
<label for="form-last-name">Religion</label>
<input type="text" name="form-last-name" placeholder="Religion" class="form-last-name form-control require" id="religion" >
</div>
<div class="form-group">
<label for="form-last-name">Occupation</label>
<input type="text" name="form-last-name" placeholder="Occupation" class="form-last-name form-control require" id="occupation" required>
</div>
<div class="form-group">
<h4>Gender</h4>
<div class="row">
<div class="col-md-4">
Male<input class="col-md-4" type="radio" name="gender" value="1">
</div>
<div class="col-md-4">
Female<input class="col-md-4" type="radio" name="gender" value="2">
</div>
<div class="col-md-4">
Other<input class="col-md-4" type="radio" name="gender" value="3">
</div>
</div>
</div>
<div class="form-group">
<h4>Marital status</h4>
<div class="row">
<div class="col-md-4">
Married<input type="radio" class="col-md-4" name="marital_status" value="1">
</div>
<div class="col-md-4">
Single<input type="radio" name="marital_status" class="col-md-4" value="1">
</div>
</div>
</div>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="form-about-yourself">Allergic history</label>
<textarea name="allergic_history" placeholder="Allergic history" class="form-about-yourself form-control " id="allergic_history" ></textarea>
</div>
<div class="form-group">
<label for="form-about-yourself">Personal history</label>
<textarea name="personal_history" placeholder="Personal history" class="form-about-yourself form-control " id="personal_history" ></textarea>
</div>
<button type="button" class="btn btn-previous">Previous</button>
<button type="button" class="btn" id="prescription_form_submition">Submit!</button>
</fieldset>
printout code in js
var divToPrint = document.getElementById('registration_form_id');
newWin= window.open("");
newWin.document.write('<html><style>#media print{body {font-size:16px;} #patient_doctor_info{border-bottom:1px solid #ccc;overflow:hidden;padding:20px 0 10px 0;} #patient_doctor_info span{font-size:18px;} #patient_info{float:left;} #doctor_info{float:right;} #patient_prescription_info{padding:20px 0;overflow:hidden;} #patient_old_prescription{padding-right:5%;border-bottom:1px solid #000;} #patient_new_prescription{overflow:hidden;padding:0 20px;} .new_prescription{font-size : 20px}}</style><body onload="window.print()"><div id="patient_doctor_info"><div id="patient_info"><p><lable>Name :</lable><span><b>'+name+'</b></span></p><p><lable>Mobile Number :</lable><span><b>'+mobile_no+'</b></span></p><p><lable>Age :</lable><span><b>'+age+'</b></span></p><p><lable>Gender :</lable><span><b>'+sex+'</b></span></p></div><div id="patient_prescription_info"><div id="patient_old_prescription"><p><lable>Allergy :</lable><span><b>'+allergic_history+'</b></span></p><p><lable>Social History :</lable><span><b>'+personal_history+'</b></span></p></div></div></body></html>');
newWin.print();
newWin.close();
the print pagelooks like the below image
But I want like below image
So my main questions are.....
how to printout specific div or form value of a webpage using javascript.
How to apply css in that print page?
I have googling this issue several times but still not getting proper solution.
Anybody help please ?

On click anchor tag scroll to div is not working?

On click of "a" tag page should scroll to div that has class called "cmntBox" I have done through jquery but it returning nothing actually when I click Write a review button it should scroll down to div.
HTML code
<i class="fa fa-pencil"></i> Write a review
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12 nopad cmntBox">
<div class="col-lg-6 col-sm-6 col-md-6 col-xs-12">
<div class="tab-pane active" id="tab-review">
<form class="form-horizontal">
<div id="review"></div>
<h3>Write a review</h3>
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label" for="input-name">Your Name</label>
<input type="text" name="name" value="" id="input-name" class="form-control" />
</div>
</div>
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label" for="input-review">Your Review</label>
<textarea name="text" rows="5" id="input-review" class="form-control"></textarea>
<div class="help-block"><span class="text-danger">Note:</span> HTML is not translated!</div>
</div>
</div>
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label">Rating</label>
Bad
<input type="radio" name="rating" value="1" />
<input type="radio" name="rating" value="2" />
<input type="radio" name="rating" value="3" />
<input type="radio" name="rating" value="4" />
<input type="radio" name="rating" value="5" />
Good</div>
</div>
<div class="form-group required">
<div class="col-sm-12">
<label class="control-label" for="input-captcha">Enter the code in the box below</label>
<input type="text" name="captcha" value="" id="input-captcha" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-sm-12"> <img src="index.php?route=tool/captcha" alt="" id="captcha" /> </div>
</div>
<div class="buttons">
<div class="pull-right">
<button type="button" id="button-review" data-loading-text="Loading..." class="btn btn-primary">Continue</button>
</div>
</div>
</form>
</div>
</div>
Jquery code,
$(".cmntBox").click(function() {
$('html, body').animate({
scrollBottom: $(".cmntBox").offset().bottom
}, 2000);
});
Replace with this code
scrollTop:$(".cmntBox").offset().top}, 2000);

Radio Button Conflict between Bootstrap And Angular js

<!-- Container -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="page-header text-center">
<h2>Radio Button Conclict between Bootstrap And Angular</h2>
</div>
</div>
</div>
<div class="row">
<!-- With data-toggle -->
<div class="col-lg-6">
<div class="row">
<h4 class="col-lg-12">
This has data-toggle property
</h4>
</div>
<div class="btn-group row" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection" name="options" value="option1" />
<span>Option 1</span>
</label>
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection" name="options" value="option2" />
<span>Option 2</span>
</label>
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection" name="options" value="option3" />
<span>Option 3</span>
</label>
</div>
<div class="row">
<div class="col-lg-6">
<p>Model: {{selection | json}}</p>
</div>
</div>
</div>
<!--/ With data-toggle -->
<!-- Without data-toggle -->
<div class="col-lg-6">
<div class="row">
<h4 class="col-lg-12">
This has NOT data-toggle property
</h4>
</div>
<div class="btn-group row">
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection2" name="options" value="option1" />
<span>Option 1</span>
</label>
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection2" name="options" value="option2" />
<span>Option 2</span>
</label>
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection2" name="options" value="option3" />
<span>Option 3</span>
</label>
</div>
<div class="row">
<div class="col-lg-6">
<p>Model: {{selection2 | json}}</p>
</div>
</div>
</div>
<!--/ Without data-toggle -->
</div>
</div>
<!--/ Container -->
" data-toggle="buttons" " tag does not allow the angular js to work properly as u can u see in this plnkr example too.. but if i remove then its working fine..
but i want ot keep it as it is..
http://plnkr.co/edit/l36UgnR7kltphXdEQLCk?p=preview
By hiding the radio buttons using the data-toggle="button" attribute on the btn-group, bootstrap is not allowing the click event to propagate down to the radio input. You can counter this effect by adding ng-click bindings to the .btn elements.
<div class="btn-group row" data-toggle="buttons">
<label class="btn btn-primary" ng-click="selection = 'option1'">
<input type="radio" data-ng-model="selection" name="options" value="option1" />
<span>Option 1</span>
</label>
<label class="btn btn-primary" ng-click="selection = 'option2'">
<input type="radio" data-ng-model="selection" name="options" value="option2" />
<span>Option 2</span>
</label>
<label class="btn btn-primary" ng-click="selection = 'option3'">
<input type="radio" data-ng-model="selection" name="options" value="option3" />
<span>Option 3</span>
</label>
</div>
PS. the reason you'll notice that clicking the top set of radio affects the bottom set is because they have the same name attribute. Change this as needed and you'll notice that each group works correctly/independently of the other
Because of same name for input this is happening.
<div class="row">
<div class="col-lg-12">
<div class="page-header text-center">
<h2>Radio Button Conclict between Bootstrap And Angular</h2>
</div>
</div>
</div>
<div class="row">
<!-- With data-toggle -->
<div class="col-lg-6">
<div class="row">
<h4 class="col-lg-12">
This has data-toggle property
</h4>
</div>
<div class="btn-group row" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection" name="group1" value="option1" />
<span>Option 1</span>
</label>
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection" name="group1" value="option2" />
<span>Option 2</span>
</label>
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection" name="group1" value="option3" />
<span>Option 3</span>
</label>
</div>
<div class="row">
<div class="col-lg-6">
<p>Model: {{selection | json}}</p>
</div>
</div>
</div>
<!--/ With data-toggle -->
<!-- Without data-toggle -->
<div class="col-lg-6">
<div class="row">
<h4 class="col-lg-12">
This has NOT data-toggle property
</h4>
</div>
<div class="btn-group row">
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection2" name="options" value="option1" />
<span>Option 1</span>
</label>
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection2" name="options" value="option2" />
<span>Option 2</span>
</label>
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection2" name="options" value="option3" />
<span>Option 3</span>
</label>
</div>
<div class="row">
<div class="col-lg-6">
<p>Model: {{selection2 | json}}</p>
</div>
</div>
</div>
<!--/ Without data-toggle -->
</div>
</div>
<!--/ Container -->
http://plnkr.co/edit/chzO8o7gx2STGkyQ8SNK?p=preview

Categories

Resources