Develop Reference

how to make radio button independent of others in vuejs

I am making a checklist, I have the categories and each category has its intervention, you have to check according to what corresponds to the problem that is that for example.
CheckList.vue
<table class="table table-bordered">
<thead>
<tr>
<th rowspan="2" style="vertical-align: top">Categoria</th>
<th colspan="2">Existe</th>
<th colspan="3">Estado</th>
<th colspan="2" rowspan="2" style="vertical-align: top">
Observación
</th>
</tr>
<tr>
<th>Si</th>
<th>No</th>
<th>Bueno</th>
<th>Regular</th>
<th>Malo</th>
</tr>
</thead>
<tbody
v-for="(formatchecklist, index) in formatchecklists"
:key="index"
>
<tr>
<td colspan="8" class="table-secondary">
<em>{{ index + 1 }}.- {{ formatchecklist.categoria }}</em>
</td>
</tr>
<tr
v-for="intervencion in formatchecklist.intervenciones"
:key="intervencion.id"
>
<td>{{ intervencion.intervencion }}</td>
<td class="text-center">
<input
type="radio"
name="existe"
value="si"
v-model="checkExiste"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
name="existe"
value="no"
v-model="checkExiste"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
name="estado"
value="bueno"
v-model="checkEstado"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
name="estado"
value="regular"
v-model="checkEstado"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
name="estado"
value="malo"
v-model="checkEstado"
/>
<label></label>
</td>
<td>
<textarea
name="observacion"
class="form-control"
></textarea>
</td>
<td>
<a
class="btn btn-warning btn-sm"
#click.prevent=""
title="Editar"
>
<i class="fas fa-edit"></i>
</a>
</td>
</tr>
</tbody>
</table>
When selecting the first radio there is no problem, the problem is when selecting the second radio of the second row, intervention 2, the first one is deselected.
https://codepen.io/lucascardemil/pen/GRMejWK
and how can i get that data

The radios' names are the same so each rows' radio whose name is existe will action like radio group,so only one is selected.
In other words, you need to assign different names for each rows' radio button group.And the model-binding you also need to be changed to save it correctly corresponding to each intervencion if necessary.
Below is my sample code in vuejs 2 which you could refer to.
<template>
<div>
<table class="table table-bordered" style="width: 100%;">
<thead>
<tr>
<th rowspan="2" style="vertical-align: top">Categoria</th>
<th colspan="2">Existe</th>
<th colspan="3">Estado</th>
<th colspan="2" rowspan="2" style="vertical-align: top">
Observación
</th>
</tr>
<tr>
<th>Si</th>
<th>No</th>
<th>Bueno</th>
<th>Regular</th>
<th>Malo</th>
</tr>
</thead>
<tbody
v-for="(formatchecklist, index) in formatchecklists"
:key="index"
>
<tr>
<td colspan="8" class="table-secondary">
<em>{{ index + 1 }}.- {{ formatchecklist.categoria }}</em>
</td>
</tr>
<tr
v-for="intervencion in formatchecklist.intervenciones"
:key="intervencion.id"
>
<td>{{ intervencion.intervencion }}</td>
<td class="text-center">
<input
type="radio"
:name="'existe' + intervencion.id"
value="si"
v-model="intervencion.existeValue"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
:name="'existe' + intervencion.id"
value="no"
v-model="intervencion.existeValue"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
:name="'estado' + intervencion.id"
value="bueno"
v-model="intervencion.estadoValue"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
:name="'estado' + intervencion.id"
value="regular"
v-model="intervencion.estadoValue"
/>
<label></label>
</td>
<td class="text-center">
<input
type="radio"
:name="'estado' + intervencion.id"
value="malo"
v-model="intervencion.estadoValue"
/>
<label></label>
</td>
<td>
<textarea
:name="'observacion' + intervencion.id"
v-model="intervencion.observacion"
class="form-control"
></textarea>
</td>
<td>
<a
class="btn btn-warning btn-sm"
#click.prevent=""
title="Editar"
>
<i class="fas fa-edit"></i>
</a>
</td>
</tr>
</tbody>
</table>
<pre>
{{JSON.stringify(formatchecklists, null, 2)}}
</pre>
</div>
</template>
<script>
export default {
data() {
return {
formatchecklists :[{
"categoria":"category1",
"intervenciones":[{
"id":1,
"intervencion":"intervencion1",
"existeValue":"",
"estadoValue":"",
"observacion":""
},
{
"id":2,
"intervencion":"intervencion2",
"existeValue":"",
"estadoValue":"",
"observacion":""
}]
},
{
"categoria":"category2",
"intervenciones":[{
"id":3,
"intervencion":"intervencion3",
"existeValue":"",
"estadoValue":"",
"observacion":""
},
{
"id":4,
"intervencion":"intervencion4",
"existeValue":"",
"estadoValue":"",
"observacion":""
}]
}]
};
}
};
</script>

How to auto calculate the html table using jQuery?

Can someone or anybody help me on how to auto calculate total price in the table? Please see the image below:
Here's my code (I will included only the code that I used in the Image):
HTML:
<div class="col-12">
<div class="col drop">
<table name="services">
<tr name="services">
<td>
<select class="form-control serv" name="txt-service" id="txt-service"> //dynamic services (from database)
<option value="" readonly>--- Select Service ---</option>
<?php include "include/connect.php";
$sql="SELECT service_id,services,price FROM tbl_serviceoffered";
foreach ($con->query($sql) as $row){
echo "<option value=$row[service_id] data-price=$row[price] data-service=$row[services]>$row[services]</option>";
}
echo "</select>";
?>
</td>
<td><input type="hidden" style="text-align:right" class="form-control" name="service" id="showservice" readonly></td>
<td><input type="text" style="text-align:right" class="form-control" name="price" id="showprice" readonly></td>
<td><input type="text" style="text-align:right" class="form-control" name="item_total" id="item_total"></td>
<td><button class="btn btn-primary" name="add">Add</button></td>
</tr>
</table>
</div>
</div>
<div class="table-responsive">
<table class="table table-hover table-bordered table-striped" name="transactions" id="transactions">
<thead>
<th></th>
<th style="text-align:center">Service Name</th>
<th style="text-align:center">Service Price</th>
<th style="text-align:center">Service Total</th>
</thead>
<tbody>
</tbody>
</table>
<td colspan="2" class="tr"> </td>
<div class="text-right">
<tr>
<td><b>Total</b></td>
<td colspan="2" style="text-align: right"><input class="form-control input-sm" style="width:300px;margin-left:auto" style="text-align:right; font-weight:bold" class="form-control" name="grand_total" id="grand_total" placeholder="Total"></td>
</tr>
<tr>
<td>Cash Tendered</td>
<td colspan="2" style="text-align: right"><input class="form-control input-sm" style="width:300px;margin-left:auto" type="text" name="cashtendered" placeholder="Cash Tendered"></td>
</tr>
<tr>
<td>Change</td>
<td colspan="2" style="text-align: right"><input class="form-control input-sm" style="width:300px;margin-left:auto" type="text" name="change" placeholder="Change"></td>
</div>
</div>
</div>
<div class="text-right">
<button type="button" class="btn btn-primary btn-icon icon-right" name="btnSaveTransaction" id="btnSaveTransaction"><i class="fas fa-file-invoice"></i> Process Payment</a>
</div>
JS:
var id = 1;
/*Assigning id and class for tr and td tags for separation.*/
$("button[name=add]").click(function() {
var newid = id++;
$("table[name=transactions]").append('<tr id="'+newid+'">\n\
<td style="text-align:center;"><a class="btn btn-primary" href="javascript:void(0);" id="remove">Remove</a></td>\n\
<td width="100px" style="display:none;">' +newid+ '</td>\n\
<td style="text-align:center; display:none;" class="num'+newid+'">' + $("#txt-transact_num").val() + '</td>\n\
<td style="text-align:center; display:none;" class="date'+newid+'">' + $("#txt-transact_date").val() + '</td>\n\
<td style="text-align:center; display:none;" class="patientid'+newid+'">' + $("#txt-patient_id").val() + '</td>\n\
<td style="text-align:center;" class="serv'+newid+'">' + $("#showservice").val() + '</td>\n\
<td style="text-align:center; display:none;" class="servid'+newid+'">' + $(".serv option:selected").val() + '</td>\n\
<td style="text-align:right;" class="price'+newid+'">₱' + $("#showprice").val() + '</td>\n\
<td style="text-align:right;" name="txt" class="totalprice'+newid+'">₱' + $("#item_total").val() + '</td>');
$("#txt-service").val("");
$("#showprice").val("");
$("#item_total").val("0.00");
calculateSum();
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$("tbody").each(function () {
//add only if the value is number
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#grand_total").val(sum.toFixed(2));
}
$("#transactions").on('click', '#remove', function() {
$(this).parent().parent().remove();
calculateSum();
});
As you can see, in the image above, when I add or pick some services that shows the total each of them, the textbox "total" fetch 0.00 only.
I'm still beginner in this programming language. I hope everyone can help me for our Capstone Project. Thank you!

Show/hide cascading tr using angularjs

I am trying to show/hide on button click.
I tried,
<tr>
<td colspan="2">
<button ng-click="visible = true">Calibration</button>
</td>
<td colspan="2"> Offsset
</td>
<td colspan="3" > Multiplier
</td>
</tr>
<tr ng-if="visible" >
<td colspan="5">
True value:
</td>
<td colspan="2">
<button ng-click="visible = false">Cancel</button>
<button ng-click="visible1 = true">OK</button>
</td>
</tr>
<tr ng-if="visible1" >
<td colspan="5" >
True value: <input type="text" name="val1" id="val1" style="width:50%"/>
</td>
<td colspan="2">
<button ng-click="visible1 = false" >Cancel</button>
<button> OK </button>
</td>
</tr>
controller is like,
$scope.visible = false;
$scope.visible1 = false;
issue is that calibration button works.But another ok cancel buttons are not working.

use ng-show in place of ng-if
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr>
<td colspan="2">
<button ng-click="visible = true">Calibration</button>
</td>
<td colspan="2"> Offsset
</td>
<td colspan="3" > Multiplier
</td>
</tr>
<tr ng-show="visible" >
<td colspan="5">
True value:
</td>
<td colspan="2">
<div>
<button ng-click="visible = false">Cancel</button>
<button ng-click="visible1 = true">OK</button>
</div>
</td>
</tr>
<tr ng-show="visible1" >
<td colspan="5" >
True value: <input type="text" name="val1" id="val1" style="width:50%"/>
</td>
<td colspan="2">
<button ng-click="visible1 = false" >Cancel</button>
<button> OK </button>
</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.visible = false;
$scope.visible1 = false;
});
</script>
<p>Use the ng-bind directive to bind the innerHTML of an element to a property in the data model.</p>
</body>
</html>

getting total popup data when even that crossed window width

here is my task.
I want to print my popup data but here my problem is I can print popup that had cover only window (actually my popup is very large than window ) but needs to print total popup data . can anyone know about it
Here is my code (whatever I got from the internet)
<div class="modal fade bd-example-modal-lg print" id="printview" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<!--Content-->
<div class="modal-content popup-style">
<!--Body-->
<div class="modal-body">
<div class="table-responsive" id="md-table-template">
<table md-colresize="md-colresize" class="table md-table table-data4 tablestyle">
<thead>
<tr>
<th> </th>
<th>Care Plan Name </th>
<th>Type</th>
<th>Category </th>
<th>Start Date </th>
<th> Present on Admission</th>
<th><a href="javascript:window.print()"><i class="fa fa-print color-blue" aria-hidden="true"></i>
</a></th>
</tr>
</thead>
<tbody>
<tr ng-show="noResidentsData"><td colspan="6" >NO RECORDS FOUND</td></tr>
<tr ng-repeat-start="c in residentCareplans" class="md-table-content-row class_{{c.ResidentCarePlanID}}" ng-style="{'text-decoration':(c.CarePlanStatusID==constants.CAREPLAN_STATUS.RETRACT?'line-through':'none')}">
<td><a ng-click="expand = !expand; "><i class="fa fa-angle-right" aria-hidden="true"></i></a></td>
<td ng-class="customClass[h.field]" class="md-table-content">{{c.ProblemDescription}}</td>
<td ng-class="customClass[h.field]" class="md-table-content">{{c.CarePlanTypeID == 1 ? 'Ongoing':(c.CarePlanTypeID == 2)?'Acute':'Discharge'}}</td>
<td ng-class="customClass[h.field]" class="md-table-content">{{c.CategoryDescription}}</td>
<td ng-class="customClass[h.field]" class="md-table-content">{{ (c.StartDate | date:'MM/dd/yyyy') }}</td>
<td ng-class="customClass[h.field]" class="md-table-content"><i ng-if="c.PresentOnAdmission == true" class="fa fa-check"></i></td>
<td ng-class="customClass[h.field]" class="md-table-content"> </td>
</tr>
<tr ng-repeat-end="" >
<td colspan="7" class="tableviewexpand">
<div class="col-md-12 scrolldata">
<div class="col-md-12">
<p>Diagnosis:</p>
<div class="col-md-12">
<div class="col-md-6"></div>
<div class="col-md-6">
<span class="pull-right"><input type="checkbox" value="true"> Include Inactive components</span>
<!--<span class="pull-right"><input type="checkbox" value="true">Include Care Plan Notes</span>-->
<span class="pull-right" ><input type="checkbox" value="true" ng-model="includenotes" ng-click="getNotes();">Include Care Plan Notes</span>
</div>
</div>
<div class="col-md-12 gray-bg-1">
<table class="table-goals" width="100%">
<tbody>
<tr>
<td>
<p>Goal:</p>
</td>
<td>
<p>Interventions:</p>
</td>
</tr>
<tr ng-repeat="c in careplan.careGoals track by $index">
<td>
<p>{{c.GoalDescription}}</p>
<table width="100%" class="data-dispay">
<tbody>
<tr>
<td align="left" valign="top">Review Date:</td>
<td align="left" valign="top">{{c.GoalReviewDate | date:'MM/dd/yyyy'}}</td>
</tr>
<tr>
<td align="left" valign="top"> Start Date:</td>
<td align="left" valign="top">{{c.GoalStartDate | date:'MM/dd/yyyy' }}</td>
</tr>
</tbody>
</table>
</td>
<td>
<div class="loop-div" ng-repeat="i in c.rcp_interventions track by $index">
<p>{{i.InterventionDescription}}</p>
<table width="100%" class="data-dispay">
<tbody>
<tr>
<td align="left" valign="top">Review Date:</td>
<td align="left" valign="top">{{i.InterventionReviewDate | date:'MM/dd/yyyy' }}</td>
</tr>
<tr>
<td align="left" valign="top">Roles:</td>
<td align="left" valign="top"><span ng-repeat="r in i.rcp_interventionroles">{{r.rolebase.RoleName}}, </span></td>
</tr>
<tr>
<td align="left" valign="top">Frequency:</td>
<td align="left" valign="top"><span ng-repeat="f in i.rcp_interventionfrequency.schedules">{{f.scheduletype.UnitDescription}} </span> </td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div ng-show="includenotes"><p>Care Plan Notes: </p>
<span ng-repeat="list in notes">{{list.Text}}, </span>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
and css:
#media print
{
.no-print { display: none; }
.print { display: block; }
}
and javascript:
<script>
function Quoter($scope) {
$scope.clientName="TBC";
$scope.projectName="TBC";
$scope.templateNames="";
$scope.amountOfTemplates=1;
$scope.timePerTemplate=4;
$scope.initialSetup=8;
$scope.javascript=10;
$scope.responsiveIncrease=35;
$scope.testingIncrease=30;
$scope.aaAccessibility=30;
$scope.standardTotal=function(){
var totSum=$scope.amountOfTemplates * $scope.timePerTemplate + $scope.initialSetup + $scope.javascript;
return totSum;
};
$scope.percentageOfTotal=function(){
var percent=Math.ceil($scope.responsiveIncrease/100 * $scope.standardTotal());
return percent;
};
$scope.sumResponsive= function() {
if($scope.responsiveBoolean){
var resHrs = Math.ceil($scope.responsiveIncrease/100 * $scope.standardTotal());
}else{
resHrs = 0;
}
return resHrs;
};
$scope.sumTesting= function() {
if($scope.testingBoolean){
var testHrs = Math.ceil($scope.testingIncrease/100 * $scope.standardTotal());
}else{
testHrs = 0;
}
return testHrs;
};
$scope.sumAccessibility= function() {
if($scope.aaAccessibilityBoolean){
var accessibilityHrs = Math.ceil($scope.aaAccessibility/100 * $scope.standardTotal());
}else{
accessibilityHrs = 0;
}
return accessibilityHrs;
};
$scope.total= function() {
var totComp = Math.ceil($scope.standardTotal() + $scope.sumResponsive() + $scope.sumTesting() + $scope.sumAccessibility());
return totComp;
};
$scope.removeTodo = function() {
$scope.todos.pop();
};
$scope.addTodo = function() {
$scope.todos.push({text:$scope.todoText, done:false});
$scope.todoText = '';
};
//$scope.nameTemplates = function() {
// if(templateNames!=""){
// alert("true");
//}
//};
}
</script>

Jquery moving to next row's input element by id

$('#Cart tbody tr #quantity').on('keydown', function (e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
$(this).closest('tr').next().find('input[type=number]').focus();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="Cart" style="border-color: transparent;" class="table table-hover table-striped well">
<thead class="thead-inverse">
<tr>
<th class="col-lg-1 text-center">Quanity</th>
<th class="col-lg-3 text-center">Comment</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
<tbody>
<tr id="7392036">
<td class="col-lg-1 text-center">
<input type="number" class="form-control" id="quantity" value="0">
</td>
<td class="text-center col-lg-3">
<input type="text" maxlength="15" class="form-control" id="inputforcomment" value="">
</td>
<td class="col-lg-1 text-center">
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
<tr id="7392036">
<td class="col-lg-1 text-center">
<input type="number" class="form-control" id="quantity" value="0">
</td>
<td class="text-center col-lg-3">
<input type="text" maxlength="15" class="form-control" id="inputforcomment" value="">
</td>
<td class="col-lg-1 text-center">
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
<tr id="7392036">
<td class="col-lg-1 text-center">
<input type="number" class="form-control" id="quantity" value="0">
</td>
<td class="text-center col-lg-3">
<input type="text" maxlength="15" class="form-control" id="inputforcomment" value="">
</td>
<td class="col-lg-1 text-center">
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
<tr id="7392036">
<td class="col-lg-1 text-center">
<input type="number" class="form-control" id="quantity" value="0">
</td>
<td class="text-center col-lg-3">
<input type="text" maxlength="15" class="form-control" id="inputforcomment" value="">
</td>
<td class="col-lg-1 text-center">
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
</tbody>
</table>
I have a table with multiple rows and each row has two inputs. Both have different ids. I'm trying to focus on next row's input element by selecting the id when user presses tab key . Here's my code:
$('#Cart tbody tr #quantity').on('keydown', function (e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
$(this).closest('tr').next().find('#quantity').focus();
}
});
While doing this, it selects the wrong textbox on the next row.Any help would be appreciated. thanks

No jQuery required. Just use the tabindex attribute and hook into the browser's native behaviour for applying focus state on tab key presses.
Example:
<table>
<tr>
<td>
<input type="text" tabindex="1">
</td>
</tr>
<tr>
<td>
<input type="text" tabindex="2">
</td>
</tr>
</table>
Recommended for accessibility too.