Pushing array data from a button to a table in Angular - javascript

I have a list of buttons and each button has some data. The data represent payment costs of standard copays for a doctor's office copay $10, copay $20 etc. I am attempting to use this application like a cash register so that when the user clicks the copay button (from the left) or a button from the outstanding balance with the dollar amount, it will add it to a list of totals on the right within my table. The user may keep clicking copays and outstanding balances to add rows (that will be added together) in the table on the right. I have been able to add blank table rows to my totals table, but am unsure how to get the values from the button to the table. Thanks in advance.
angular
.module('myApp')
.controller('BillingCtrl', function($scope){
$scope.payments= [
{id:'1', paytype:'Copay', billing:'Epic', busunit:'Ohio Physicians', amount:10.00},
{id:'2',paytype:'Copay', billing:'Epic', busunit:'Ohio Physicians', amount:20.00},
{id:'3',paytype:'Copay', billing:'Epic', busunit:'Ohio Physicians', amount:35.00},
{id:'4',paytype:'Copay', billing:'Epic', busunit:'Ohio Physicians', amount:75.00}
];
$scope.outstanding=[
{busunit:'Ohio Physicians', date:'Fri, 18 Dec 2009 20:28:37 GMT', amount:100.00},
{busunit:'Ohio Physicians', date:'Wed, 06 Apr 2012 20:28:37 GMT', amount:100.00},
];
$scope.totals=[''];
$scope.addPayments= function (i) {
if($scope.totals.indexOf(i)<=1){
$scope.totals.push(i);
}
};
});
<div ng-controller="BillingCtrl">
<div class="container-fluid">
<hr>
<div class="row">
<div class="col-md-5">
<h4>Today's Payment</h4>
<form role="form" ng-submit="addPayment()">
<div class="list-group">
<button type="submit" value="Submit"class="list-group-item">
<div class="row vertical-align">
<div class="col-sm-8">
<p class="list-group-item-heading" ng-model="paytype">Copay</p>
</div>
<div class="col-sm-4">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="InputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="InputAmount" placeholder="Amount" ng-model="amount">
</div>
</div>
</form>
</div>
</div>
</button>
<button type="button" class="list-group-item" ng-repeat="payment in payments" ng-click="addPayments(selectedItem)" ng-model="selectedItem">
<div class="row vertical-align">
<div class="col-sm-4">
<p class="list-group-item-heading">{{payment.paytype}}</p>
</div>
<div class="col-sm-8">
<p class="pull-right">${{payment.amount}}</p>
</div>
</div>
</button>
<button type="button" class="list-group-item">
<div class="row vertical-align">
<div class="col-sm-8">
<p class="list-group-item-heading">Other</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-chevron-right pull-right"></span>
</div>
</div>
</button>
</div>
</form>
<br>
<h4>Outstanding Balances</h4>
<div class="list-group">
<button type="button" class="list-group-item" ng-repeat="balance in outstanding">
<div class="row vertical-align">
<div class="col-sm-8">
<p class="list-group-item-heading">{{balance.busunit}}</p>
<p class="list-group-item-text">{{balance.date}}</p>
</div>
<div class="col-sm-4">
<p class="pull-right">${{balance.amount}}</p>
</div>
</div>
</button>
</div>
</div>
<div class="col-md-1"></div>
<div class="col-md-6">
<div class="row vertical-align">
<div class="col-sm-6">
<p><span class="fa fa-user"> <strong>Sally Perkins</strong></span> <span>12345678</span></p>
</div>
<div class="col-sm-6">
<p class="pull-right">Dec 17, 2015</p>
</div>
</div>
<table class="table table-default">
<tr ng-repeat="total in totals track by $index">
<td>{{total.paytype}}</td>
<td>{{total.billing}}</td>
<td>{{total.busunit}}</td>
<td>{{total.amount}}</td>
</tr>
<hr>
<button class="btn btn-primary btn-block">Charge $0.00</button>
</div><!--closeright-hand column-->
</div>
</div>
</div>


I wouldn't use ng-submit. I would use ng-click at the buttons so you can pass the current object of ng-repeat that you can use inside of your addPayment method.
Also the currency filter is useful for displaying the amount values. Filters are used like this {{ number | currency }}. You can read more about it here.
Your markup is OK but hard to read during development of your app. I would recommend to keep the markup as simple as possible and improve styling later.
Please have a look at your updated code below or in this jsfiddle.
angular
.module('myApp', [])
.controller('BillingCtrl', function($scope) {
$scope.payments = [{
id: '1',
paytype: 'Copay',
billing: 'Epic',
busunit: 'Ohio Physicians',
amount: 10.00
}, {
id: '2',
paytype: 'Copay',
billing: 'Epic',
busunit: 'Ohio Physicians',
amount: 20.00
}, {
id: '3',
paytype: 'Copay',
billing: 'Epic',
busunit: 'Ohio Physicians',
amount: 35.00
}, {
id: '4',
paytype: 'Copay',
billing: 'Epic',
busunit: 'Ohio Physicians',
amount: 75.00
}
];
$scope.outstanding = [{
busunit: 'Ohio Physicians',
date: 'Fri, 18 Dec 2009 20:28:37 GMT',
amount: 100.00
}, {
busunit: 'Ohio Physicians',
date: 'Wed, 06 Apr 2012 20:28:37 GMT',
amount: 100.00
},
];
$scope.totals = [];
$scope.total = 0;
var calcTotal = function() {
var sum = 0;
angular.forEach($scope.totals, function(total) {
sum += total.amount;
});
return sum;
}
$scope.addPayments = function(payment) {
//if ($scope.totals.indexOf(i) <= 1) {
$scope.totals.push(payment);
$scope.total = calcTotal();
//console.log(payment, $scope.total);
//}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="BillingCtrl" ng-app="myApp">
<div class="container-fluid">
<hr>
<div class="row">
<div class="col-md-5">
<h4>Today's Payment</h4>
<form role="form">
<div class="list-group">
<button type="submit" value="Submit" class="list-group-item">
<div class="row vertical-align">
<div class="col-sm-8">
<p class="list-group-item-heading" ng-model="paytype">Copay</p>
</div>
<div class="col-sm-4">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="InputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="InputAmount" placeholder="Amount" ng-model="amount">
</div>
</div>
</form>
</div>
</div>
</button>
<button type="button" class="list-group-item" ng-repeat="payment in payments" ng-click="addPayments(payment)">
<!-- ng-model="selectedItem"> -->
<div class="row vertical-align">
<div class="col-sm-4">
<p class="list-group-item-heading">{{payment.paytype}}</p>
</div>
<div class="col-sm-8">
<p class="pull-right">${{payment.amount}}</p>
</div>
</div>
</button>
<button type="button" class="list-group-item">
<div class="row vertical-align">
<div class="col-sm-8">
<p class="list-group-item-heading">Other</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-chevron-right pull-right"></span>
</div>
</div>
</button>
</div>
</form>
<br>
<h4>Outstanding Balances</h4>
<div class="list-group">
<button type="button" class="list-group-item" ng-repeat="balance in outstanding" ng-click="addPayments(balance)">
<div class="row vertical-align">
<div class="col-sm-8">
<p class="list-group-item-heading">{{balance.busunit}}</p>
<p class="list-group-item-text">{{balance.date}}</p>
</div>
<div class="col-sm-4">
<p class="pull-right">${{balance.amount}}</p>
</div>
</div>
</button>
</div>
</div>
<div class="col-md-1"></div>
<div class="col-md-6">
<div class="row vertical-align">
<div class="col-sm-6">
<p><span class="fa fa-user"> <strong>Sally Perkins</strong></span> <span>12345678</span></p>
</div>
<div class="col-sm-6">
<p class="pull-right">Dec 17, 2015</p>
</div>
</div>
<p>
{{total | currency }}
</p>
<table class="table table-default">
<tr ng-repeat="total in totals track by $index">
<td>{{total.paytype}}</td>
<td>{{total.billing}}</td>
<td>{{total.busunit}}</td>
<td>{{total.amount | currency }}</td>
</tr>
<hr>
<button class="btn btn-primary btn-block">Charge $0.00</button>
</div>
<!--closeright-hand column-->
</div>
</div>
</div>

Related

Combine two filters with javascript

Hi I created an product page with two filter - price range and checkboxes. I am able to run both filter separately, but when I tried to combine both filters, one overlaps the others. I was searching in the internet but I couldn't really find a solution. Is there a way I can filter products with two different filters The codes below are my product page and my javascript codes
product.php
// CHECKBOXES
// CHECKBOXES
var $filterCheckboxes = $('input[type="checkbox"]');
var filterFunc = function() {
var selectedFilters = {};
$filterCheckboxes.filter(':checked').each(function() {
if (!selectedFilters.hasOwnProperty(this.name)) {
selectedFilters[this.name] = [];
}
selectedFilters[this.name].push(this.value);
});
var $filteredResults = $('.productFilter');
$.each(selectedFilters, function(name, filterValues) {
$filteredResults = $filteredResults.filter(function() {
var matched = false,
currentFilterValues = $(this).data('category').split(' ');
$.each(currentFilterValues, function(_, currentFilterValue) {
if ($.inArray(currentFilterValue, filterValues) != -1) {
matched = true;
return false;
}
});
return matched;
});
});
$('.productFilter').hide().filter($filteredResults).show();
}
$filterCheckboxes.on('change', filterFunc);
// CHECKBOXES
// CHECKBOXES
// PRICE RANGE
// PRICE RANGE
$('#price_range').slider({
range:true,
min:0,
max:1000,
values:[0, 1000],
step:50,
slide: function(e, ui) {
$('#price_show').html(ui.values[0] + ' - ' + ui.values[1]);
var min = Math.floor(ui.values[0]);
$('#hidden_minimum_price').html(min + 'm');
var max = Math.floor(ui.values[1]);
$('#hidden_maximum_price').html(max + '.');
$('.productFilter').each(function() {
var minPrice = (min);
var maxPrice = (max);
var value = $(this).data('start-price');
if ((parseInt(maxPrice) >= parseInt(value) && (parseInt(minPrice) <= parseInt(value))) ){
$(this).show();
} else {
$(this).hide();
}
});
}
});
// PRICE RANGE
// PRICE RANGE
<div class="list-group">
<h3>Price</h3>
<input type="hidden" id="hidden_minimum_price" value="0" /> <!-- 'value' will not display anything - is used for function at line 191 -->
<input type="hidden" id="hidden_maximum_price" value="1000" /> <!-- 'value' will not display anything - is used for function at line 191 -->
<p id="price_show">0 - 1000</p>
<div id="price_range"></div>
</div>
<div class="list-group">
<h3>Type</h3>
<div style="height: 200px; overflow-y: auto; overflow-x: hidden;"> <!-- 'overflow-y' will create the vertical scroll effect when elements are outside the box/ 'overflow-x' will hide the horizontal elements outside the box -->
<div class="list-group-item checkbox">
<label><input type="checkbox"class="common_selector brand" value="Headphone_Speaker" id="Headphone_Speaker">Headphone & Speaker</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="common_selector brand" value="Chair" id="Chair">Chair</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="common_selector brand" value="Cabinet" id="Cabinet">Cabinet</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="common_selector brand" value="Table" id="Table">Table</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="common_selector brand" value="Box" id="Box">Box</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Headphone_Speaker" data-start-price="600">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-2.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>PAVILION SPEAKER</h3>
<span class="price">$600</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Chair" data-start-price="780">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-3.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>LIGOMANCER</h3>
<span class="price">$780</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Cabinet" data-start-price="800">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-4.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>ALATO CABINET</h3>
<span class="price">$800</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Headphone_Speaker" data-start-price="100">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-5.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>EARING WIRELESS</h3>
<span class="price">$100</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Table" data-start-price="960">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-6.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>SCULPTURAL COFFEE TABLE</h3>
<span class="price">$960</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Chair" data-start-price="540">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-7.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>THE WW CHAIR</h3>
<span class="price">$540</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Box" data-start-price="55">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-8.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>HIMITSU MONEY BOX</h3>
<span class="price">$55</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Box" data-start-price="99">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-9.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>ARIANE PRIN</h3>
<span class="price">$99</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Chair" data-start-price="350">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-1.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>HAUTEVILLE CONCRETE ROCKING CHAIR</h3>
<span class="price">$350</span>
</div>
</div>
</div>
</div>
This is how my database/structure:

How to use formArrayName with a parent formGroup directive. Angular

I try to update my recipe which has collection of ingredients(formArray) and i have problem with that because of formArray.
I have error on console:
ERROR Error: formArrayName must be used with a parent formGroup directive
When i update recipe without formArray(ingredients) it's working fine.
Could you give me a hint ?
It's my first time when i'm working with formArrays..
My code:
Component.ts
export class RecipeEditComponent implements OnInit {
#ViewChild('editForm') editForm: NgForm;
recipe: IRecipe;
photos: IPhoto[] = [];
ingredients: IIngredient[] = [];
uploader: FileUploader;
hasBaseDropZoneOver = false;
baseUrl = environment.apiUrl;
currentMain: IPhoto;
constructor(private route: ActivatedRoute, private recipeService: RecipeService,
private toastr: ToastrService) { }
ngOnInit(): void {
this.loadRecipe();
}
Html
<div class="container mt-4 border" *ngIf="recipe">
<form #editForm="ngForm" id="editForm" (ngSubmit)="updateRecipe(recipe.id)" >
<h5 class=" text-center mt-2">Recipe details:</h5>
<div class="form-group mt-3">
<label for="city">Name</label>
<label for="city">{{recipe.id}}</label>
<input class="form-control" type="text" name="name" [(ngModel)]="recipe.name">
</div>
<div class="form-group">
<div formArrayName="ingredients"
*ngFor="let ingredient of recipe.ingredients; let i = index;">
<div formGroupName= {{i}} class="row">
<div class="form-group col-6">
<app-text-input formControlName="name" [label]='"Name"' name="ingredient[i].name"></app-text-input>
</div>
<div class="form-group col-6">
<app-text-input formControlName="amount" [label]='"Amount"' [type]="'number'" name="ingredient[i].amount"></app-text-input>
</div>
</div>
</div>
</div>
<h5 class=" text-center mt-4">Description</h5>
<angular-editor cols=100% rows="6" [placeholder]="'Your description'" [(ngModel)]="recipe.description" name="description"></angular-editor>
</form>
<h3 class="text-center">Photos</h3>
<div class="row">
<div class="col-sm-2" *ngFor="let photo of recipe.recipePhotos">
<img src="{{photo.url}}" class="img-thumbnail p-1" alt="">
<div class="text-center">
<button type="button" class="btn btn-sm mr-1 mb-2"
(click) = "setMainPhoto(photo)"
[disabled]="photo.isMain"
[ngClass] = "photo.isMain ? 'btn-danger active' : 'btn-secondary'"
>Main</button>
<button type="button" class="btn btn-sm btn-danger mb-2"
(click)="deletePhoto(photo.id)" >
<i class="fa fa-trash-o"></i></button>
</div>
</div>
</div>
<div class="row justify-content-md-center mt-5 border">
<div class="col col-sm-4">
<div class="mt-4 text-center">
Multiple
<input type="file" ng2FileSelect [uploader]="uploader" multiple="true" /><br/>
Single
<input type="file" ng2FileSelect [uploader]="uploader" />
</div>
</div>
<div class="col col-sm-6">
<div ng2FileDrop
[ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
(fileOver)="fileOverBase($event)"
[uploader]="uploader"
class="card bg-faded p-3 text-center mt-3 mb-3 my-drop-zone">
<i class="fa fa-upload fa-3x"></i>
Drop Photos Here
</div>
</div>
</div>
<div class="col-md-6 mt-5" style="margin-bottom: 40px" *ngIf="uploader?.queue?.length">
<h3 class="text-center">Upload queue</h3>
<p>Queue length: {{ uploader?.queue?.length }}</p>
<table class="table">
<thead>
<tr>
<th width="50%">Name</th>
<th>Size</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of uploader.queue">
<td><strong>{{ item?.file?.name }}</strong></td>
<td *ngIf="uploader.options.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
<td *ngIf="uploader.options.isHTML5">
</tr>
</tbody>
</table>
<div>
<div>
Queue progress:
<div class="progress mb-4" >
<div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
</div>
</div>
<button type="button" class="btn btn-success btn-s"
(click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
<span class="fa fa-upload"></span> Upload
</button>
<button type="button" class="btn btn-warning btn-s"
(click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
<span class="fa fa-ban"></span> Cancel
</button>
<button type="button" class="btn btn-danger btn-s"
(click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
<span class="fa fa-trash"></span> Remove
</button>
</div>
</div>
<button [disabled]="!editForm.dirty" form="editForm" class="btn btn-success btn-block mb-5 mt-5">Save changes</button>
</div>
This is how my recipe looks like with properties:

Problem Description
The directive formArrayName is a ReactiveForm directive and for it to work you must have below satisfied
Must have a parent formGroup
You must have imported ReactiveFormModule in your module
Solution
You may have to do some changes to implement this, see below
See Demo On Stackblitz
name = 'Angular ' + VERSION.major;
recipe = {
id: 1,
name: 'Test Recipe',
ingredients: [{
name: 'Chicken',
amount: 5
},
{
name: 'Pasta',
amount: 50
}],
description: 'Test Description'
}
ngForm = this.fb.group({
description: [this.recipe.description],
name: [this.recipe.name],
ingredients: this.fb.array(
this.recipe.ingredients.map(
ingredient => this.fb.group({
name: [ingredient.name],
amount: [ingredient.amount]
})
)
)
})
updateRecipe() {
}
<form [formGroup]="ngForm" id="editForm" (ngSubmit)="updateRecipe()">
<h5 class=" text-center mt-2">Recipe details:</h5>
<div class="form-group mt-3">
<label for="city">Name</label>
<label for="city">{{recipe.id}}</label>
<input class="form-control" type="text" formControlName='name'>
</div>
<div class="form-group">
<div formArrayName="ingredients" *ngFor="let ingredient of recipe.ingredients; let i = index;">
<div formGroupName={{i}} class="row">
<div class="form-group col-6">
<app-text-input formControlName="name" [label]='"Name"' name="ingredient[i].name">
</app-text-input>
</div>
<div class="form-group col-6">
<app-text-input formControlName="amount" [label]='"Amount"' [type]="'number'"
name="ingredient[i].amount"></app-text-input>
</div>
</div>
</div>
</div>
<h5 class=" text-center mt-4">Description</h5>
<angular-editor cols=100% rows="6" [placeholder]="'Your description'"
formControlName='description'></angular-editor>
</form>

Instead of using FormArrays in your template, try using NgModel for input data-binding:
<div class="form-group" *ngFor="let ingredient of recipe.ingredients; let i = index;">
<div class="form-group col-6">
<input [(ngModel)]="ingredient.name" />
</div>
<div class="form-group col-6">
<input [(ngModel)]="ingredient.amount" />
</div>
</div>

Get text of label sibling of checked checked using javascript

I want to be able to check if the input is checked and if it is checked then grab the data associated with that input and display it into another div. here is my code.
var levels = $('input:checked + label').map(function() {
return $(this).text();
}).get();
//alert(levels);
document.getElementById('listprice').innerHTML = levels;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sln-service sln-service--3181">
<div class="col-md-12">
<div class="row sln-steps-info sln-service-info">
<div class="col-xs-2 col-sm-1 sln-checkbox sln-steps-check sln-service-check">
<div class="sln-checkbox">
<input type="checkbox" name="sln[services][3181]" id="sln_services_3181" value="1" data-price="175" data-duration="180">
<label for="sln_services_3181"></label>
</div>
</div>
<div class="col-xs-10 col-sm-8">
<label for="sln_services_3181">
<h3 class="sln-steps-name sln-service-name">Service Title</h3> <!-- collect this -->
</label>
</div>
<div class="col-xs-2 visible-xs-block"></div>
<h3 class="col-xs-10 col-sm-3 sln-steps-price sln-service-price">$175</h3> <!-- collect this -->
</div>
<div class="row sln-steps-description sln-service-description">
<div class="col-md-12"><hr></div>
<div class="col-sm-1 hidden-xs"> </div>
<div class="col-sm-10 col-md-9">
<label for="sln_services_3181">
<p></p>
<span class="sln-steps-duration sln-service-duration"><small>Duration:</small> 03:00</span> <!-- collect this -->
</label>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-11">
<span class="errors-area" data-class="sln-alert sln-alert-medium sln-alert--problem">
<div class="sln-alert sln-alert-medium sln-alert--problem" style="display: none" id="availabilityerror">
Not enough time for this service
</div>
</span>
</div>
</div>
</div>
<div class="demo">
You are booking a
<div id="listprice">
<!-- display collected here -->
</div>
</div>
I would like to collect the data and show it back in a div somewhere else on the page. Any jquery to help achieve this would be great.

$(document).ready(function(){
var checkedItems = $('input[type=checkbox]:checked');
checkedItems.each(function(){
var serviceName = $(this).parents('.sln-service-info').find('.sln-service-name').html();
var servicePrice = $(this).parents('.sln-service-info').find('.sln-service-price').html();
$('#listprice').append('<div>Title - '+serviceName +' Price - ' +servicePrice +'</div>');
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row sln-service sln-service--3181">
<div class="col-md-12">
<div class="row sln-steps-info sln-service-info">
<div class="col-xs-2 col-sm-1 sln-checkbox sln-steps-check sln-service-check">
<div class="sln-checkbox">
<input type="checkbox" checked name="sln[services][3181]" id="sln_services_3181" value="1" data-price="175" data-duration="180">
<label for="sln_services_3181"></label>
</div>
</div>
<div class="col-xs-10 col-sm-8">
<label for="sln_services_3181">
<h3 class="sln-steps-name sln-service-name">Service Title</h3> <!-- collect this-->
</label>
</div>
<div class="col-xs-2 visible-xs-block"></div>
<h3 class="col-xs-10 col-sm-3 sln-steps-price sln-service-price">$175</h3> <!-- collect this -->
</div>
<div class="row sln-steps-description sln-service-description">
<div class="col-md-12"><hr></div>
<div class="col-sm-1 hidden-xs"> </div>
<div class="col-sm-10 col-md-9">
<label for="sln_services_3181">
<p></p>
<span class="sln-steps-duration sln-service-duration"><small>Duration:</small> 03:00</span> <!-- collect this -->
</label>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="demo">
You are booking a
<div id="listprice">
<!-- display collected here -->
</div>
</div>

Filter div with jQuery

I'm looking to filter some div with an input field :
I want to show all divs at the beginning and when user types into the input field, filter by the <p class="name"></p>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<input type="text" class="filter" id="myInput" placeholder="Recherche rapide...">
<div class="col-lg-6 col-md-6 col-sm-12" id="" style="visibility: visible; display: block;">
<div class="card all-patients" id="">
<div class="body">
<div class="row" id="">
<div class="col-md-4 col-sm-4 text-center m-b-0">
</div>
<div class="col-md-8 col-sm-8 m-b-0">
<p class="name">John Doe</p>
<p> 12 ans</p>
<p> 04 94 94 94 94</p>
<button type="button" class="btn waves-effect waves-cyan">Fiche du patient</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12" id="" style="visibility: visible; display: block;">
<div class="card all-patients" id="">
<div class="body">
<div class="row" id="">
<div class="col-md-4 col-sm-4 text-center m-b-0">
</div>
<div class="col-md-8 col-sm-8 m-b-0">
<p class="name">Samuel pelo</p>
<p> 12 ans</p>
<p> 04 94 94 94 94</p>
<button type="button" class="btn waves-effect waves-cyan">Fiche du patient</button>
</div>
</div>
</div>
</div>
</div>

This solution filter divs with names that contains value from input. Filtering is case-insensitive. Also, there is no setting any class, but if you need you can add this. Just change $card.show() to $card.addClass('visible') and change $card.hide() to $card.removeClass('visible').
$(document).ready(function() {
$('.filter').on('input', function() {
var $this = $(this);
var $cards = $('.card');
$filteredCards = $cards.each(function(i, card) {
var $card = $(card);
var name = $card.find('.name').first();
name = name.text().toLowerCase();
if(name.indexOf($this.val().toLowerCase()) !== -1) {
$card.show();
} else {
$card.hide();
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="filter" id="myInput" placeholder="Recherche rapide...">
<div class="col-lg-6 col-md-6 col-sm-12" id="" style="visibility: visible; display: block;">
<div class="card all-patients" id="">
<div class="body">
<div class="row" id="">
<div class="col-md-4 col-sm-4 text-center m-b-0">
</div>
<div class="col-md-8 col-sm-8 m-b-0">
<p class="name">John Doe</p>
<p> 12 ans</p>
<p> 04 94 94 94 94</p>
<button type="button" class="btn waves-effect waves-cyan">Fiche du patient</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12" id="" style="visibility: visible; display: block;">
<div class="card all-patients" id="">
<div class="body">
<div class="row" id="">
<div class="col-md-4 col-sm-4 text-center m-b-0">
</div>
<div class="col-md-8 col-sm-8 m-b-0">
<p class="name">Samuel pelo</p>
<p> 12 ans</p>
<p> 04 94 94 94 94</p>
<button type="button" class="btn waves-effect waves-cyan">Fiche du patient</button>
</div>
</div>
</div>
</div>
</div>

Assuming you need to filter with startsWith.
Use a class hide to hide the elements.
Loop over each .body elements.
Find the elements using this selector [class="name"].
Compare the text using startsWith function.
Look at this code snippet.
//<p class="name">John Doe</p>
$('#myInput').on('input', function() {
var enteredValue = $(this).val();
$('.body').each(function() {
var $parent = $(this);
$(this).find('[class="name"]').each(function() {
if ($(this).text().startsWith(enteredValue)) {
$parent.removeClass('hide');
} else {
$parent.addClass('hide');
}
})
});
});
.hide {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="filter" id="myInput" placeholder="Recherche rapide...">
<div class="col-lg-6 col-md-6 col-sm-12" style="visibility: visible; display: block;">
<div class="card all-patients" id="">
<div class="body">
<div class="row" id="">
<div class="col-md-4 col-sm-4 text-center m-b-0">
</div>
<div class="col-md-8 col-sm-8 m-b-0">
<p class="name">John Doe</p>
<p> 12 ans</p>
<p> 04 94 94 94 94</p>
<button type="button" class="btn waves-effect waves-cyan">Fiche du patient</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12" id="" style="visibility: visible; display: block;">
<div class="card all-patients" id="">
<div class="body">
<div class="row" id="">
<div class="col-md-4 col-sm-4 text-center m-b-0">
</div>
<div class="col-md-8 col-sm-8 m-b-0">
<p class="name">Samuel pelo</p>
<p> 12 ans</p>
<p> 04 94 94 94 94</p>
<button type="button" class="btn waves-effect waves-cyan">Fiche du patient</button>
</div>
</div>
</div>
</div>
</div>
See? the elements are being filtered.

Toggle Disabled to Unable Text Fields in Sections

I am working on a new concept to allow Users to made update their account profile without the need to reload the screen to allow for updates.
Currently, I have two sections that will display the information they already submitted. By default, all field are disabled. Each section contain an "Edit" button to allow for modifications.
The problem that I am facing is that my "Edit" buttons are enabling editing on all sections, not their own section.
Toggle Disabled fields for editing in Sections
Here's the HTML code:
<div class="container">
<p>User should use the "Edit" button to correct any information separated in the form sections, individually.
User should be allowed to submit individual sections with updated information.</p>
<br />
<form name="ReviewInformation" method="post" class="clearfix">
<section id="NameConfirmation" style="background-color: #F1F3F2; border-radius: 8px; clear: both;" class="border-gray">
<!-- FIRST AND NAME SECTION -->
<div class="col-lg-12 no-padding no-margin clearfix">
<div class="col-md-11 col-sm-11 col-xs-11 no-padding no-margin">
<h1 class="h1-header"><i class="fa fa-users"></i> First & Last Name Section</h1>
</div>
<div class="col-md-1 col-sm-1 col-xs-1 no-padding no-margin">
<div class="positioning">
<input type="button" class="btn btn-warning" value="Edit" />
</div>
</div>
<div class="col-md-12 spacer"></div>
<div class="col-mg-12 horizontal-line"></div>
<div class="col-md-12 spacer"></div>
</div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" id="UserEmail" name="UserEmail" class="form-control" placeholder="First Name" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" id="UserPhone" name="UserPhone" class="form-control" placeholder="Last Name" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
</div>
<div class="clearfix"></div>
<!-- /FIRST AND LAST NAME SECTION/ -->
</section>
<div class="col-lg-12 spacer"></div>
<hr class="horizontal-line" />
<div class="spacer"></div>
<section id="EmailPhoneConfirmation" style="background-color: #E5F2F5; border-radius: 8px; clear: both;" class="border-gray">
<!-- EMAIL AND PHONE SECTION -->
<div class="col-lg-12 no-padding no-margin clearfix">
<div class="col-md-11 col-sm-11 col-xs-11 no-padding no-margin">
<h1 class="h1-header"><i class="fa fa-envelope"></i> Email & Phone# Section</h1>
</div>
<div class="col-md-1 col-sm-1 col-xs-1 no-padding no-margin">
<div class="positioning">
<input type="button" class="btn btn-warning" value="Edit" />
</div>
</div>
<div class="col-md-12 spacer"></div>
<div class="col-mg-12 horizontal-line"></div>
<div class="col-md-12 spacer"></div>
</div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="emailaccount#isp.com" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="801-999-9999" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
</div>
<div class="clearfix"></div>
<!-- EMAIL AND PHONE SECTION -->
</section>
<div class="clearfix"></div>
<hr />
<div class="clearfix"></div>
<div class="align-text-center">
<button type="sumbit" id="myForm" class="btn btn-success">Submit Form</button>
</div>
</form>
</div>
Here's the JS:
<script>
(function($) {
$.fn.toggleDisabled = function() {
return this.each(function() {
var $this = $(this);
if ($this.attr('disabled')) $this.removeAttr('disabled');
else $this.attr('disabled', 'disabled');
});
};
})(jQuery);
$(function() {
//$('input:editlink').click(function() {
$('input:button').click(function() {
$('input:text').toggleDisabled();
});
});
</script>
Here's the DEMO: https://jsfiddle.net/UXEngineer/7tft16pt/35/
So, I am trying to get individual editing enable only the section they are associated with.
Can anyone help with this issue? I would appreciate any help, thanks!

You can use:
$(function() {
$('input:button').click(function() {
$(this).closest('.col-lg-12').next().find('input:text').toggleDisabled();
});
});
Demo: https://jsfiddle.net/7tft16pt/38/
Use closest() -> https://api.jquery.com/closest/ , and next() -> https://api.jquery.com/next/

Categories

Resources