I have a page with two radio buttons. One radio button is checked by default but if the other radio button is checked, without pressing a button, I want the header in my table to change.
Here are some snippets:
<table class="table table-sm table-secondary" style="margin-bottom: 0">
<thead style="background-color: #cb5797">
<tr>
<th scope="col" class="text-center">Duration (min)</th>
<th scope="col" class="text-center hideme" data-period="outdoor">
Speed1
</th>
<th scope="col" class="text-center">Incline (%)</th>
</tr>
</thead>
</table>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input
type="radio"
name="environment"
id="indoor"
value="indoor"
checked="checked"
/>
Indoor
</label>
<label class="btn btn-secondary">
<input type="radio" name="environment" id="outdoor" value="outdoor" />
Outdoor
</label>
</div>
I have tried to get this example to work but was not successful
Show/hide DIV based on selected with data-toggle="buttons" input radio button bootstrap 3
FYI, I'm new to javascript, therefore please provide plenty of details with your answer.
Every radio button (or checkbox) has an event called onchange. For radiobuttons and checkboxes, the onchange event occurs when the checked state has been changed. You can create two functions and add them as in the snippet below.
Since your table header has the data-period="outdoor" attribute, I'm guessing this is what you want to change. This can be done using the getElementById and setAttribute functions. I also added a bit of code to change the header background-color, for learning purposes.
function toggleIndoor() {
console.log("toggleIndoor changed!");
// Change the header data-period attribute
var headerCell = document.getElementById("tochange");
headerCell.setAttribute("data-period", "indoor");
printHeaderDataPeriod();
// Change the header color
var tableHeader = document.getElementById("table-head");
tableHeader.style.backgroundColor = "#cb5797";
}
function toggleOutdoor() {
console.log("toggleOutdoor changed!");
var headerCell = document.getElementById("tochange");
headerCell.setAttribute("data-period", "outdoor");
printHeaderDataPeriod();
// Change the header color
var tableHeader = document.getElementById("table-head");
tableHeader.style.backgroundColor = "#aa00bb";
}
function printHeaderDataPeriod() {
var headerCell = document.getElementById("tochange");
var headerAttr = headerCell.getAttribute("data-period");
console.log("Table has data-period: " + headerAttr);
}
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="environment" id="indoor" value="indoor" checked="checked" onchange="toggleIndoor()"> Indoor
</label>
<label class="btn btn-secondary">
<input type="radio" name="environment" id="outdoor" value="outdoor" onchange="toggleOutdoor()"> Outdoor
</label>
</div>
<table class="table table-sm table-secondary" style="margin-bottom: 0">
<thead style="background-color: #cb5797" id="table-head">
<tr>
<th scope="col" class="text-center">Duration (min)</th>
<th scope="col" class="text-center hideme" data-period="outdoor" id="tochange">Speed1</th>
<th scope="col" class="text-center">Incline (%)</th>
</tr>
</thead>
</table>
If you want to change the header style (color, size etc.), it can be easily done using the setAttribute function or doing element.style.<css-property-name> = <value>, once you got your element by class or by id. Stack overflow has thousands of question like this, about triggering or changing element properties using java-script.
Cheers!
Related
I'm trying to insert multiple rows to a table based on an input value, i used this code but it doesn't work:
function AddRows() {
var RowNumber = document.getElementById('quantite').value;
var table = document.getElementById('articleTable');
for (var i = 0; i < RowNumber; i++)
{
table.insertRow();
};
}
<div class="col-4">
<div class="form-group">
<label asp-for="Quantite" class="control-label"></label>
<input asp-for="Quantite" class="form-control" id="quantite" />
<span asp-validation-for="Quantite" class="text-danger"></span>
</div>
</div>
<button type="button" class="btn btn-primary" onclick="AddRows()">Add articles</button>
<table class="table table-bordered" id="articleTable" style="margin-top:10px;">
<thead>
<tr>
<th>Numero de Serie</th>
<th>Marque</th>
<th>Etat</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
So what's wrong in my code or is there any better way to add rows to html table based on an input value?
Am using Angular Reactive form and I have a dropdown list and a input field. I have a list of object called Category: {id, name, parent}. This list is displayed in a table which has edit button/link in each row. when a particular row's edit link is clicked, I want the data in that row to fill the input field and the select option will be selected automatically.
For example here are my form and Component:
<form [formGroup]="childCategoryForm" (ngSubmit)="saveOrUpdateChildCategory(childCategoryForm.value)" autoComplete="off">
<div class="form-group row" [ngClass]="{'error': !validateParentCategory()}">
<label class="col-form-label col-md-2" for="parent">Parent Category</label>
<div class="col-md-6">
<select [(ngModel)]="selectedValue" class="form-control" formControlName="parent" name="parent" id="parent">
<option [ngValue]=null>--- select parent category ---</option>
<option [ngValue]="parent" *ngFor="let parent of parentCategories">{{parent.name}}</option>
</select>
</div>
</div>
<div class="form-group row" [ngClass]="{'error': !validateCategoryName()}"> <!-- && categoryForm.controls.name?.errors.pattern -->
<label class="col-form-label col-md-2" for="name">Category Name</label>
<!--em *ngIf="!validateCategoryName()">Required</em>
<em *ngIf="!validateCategoryName()">Required</em-->
<div class="col-md-6">
<input type="text" formControlName="name" name="name" class="form-control" id="name" placeholder="Category name..." />
</div>
</div>
</div>
<div class="form-group row" *ngIf="childCategoryFormEditMode">
<label class="col-form-label col-md-2" for="name"></label>
<div class="btn-toolbar col-md-6">
<button type="button" (click)="cancelEditChildrenCategory()" class="btn btn-outline-secondary btn-sm mr-2">Cancel edit</button>
<button type="submit" class="btn btn-info btn-sm">Submit edit</button>
</div>
</div>
</form>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Parent</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let child of childrenCategories; index as i">
<th scope="row">{{i+1}}</th>
<td>{{child.name}}</td>
<td>{{child.parent['name']}}</td>
<td class="text-primary"><a class="deco-none" (click)="editChildCategory(child)"><i class="fa fa-edit"></i>Edit</a></td>
<td class="text-danger"><a class="deco-none" (click)="deleteCategory(child)" ><i class="fa fa-remove"></i>Delete</a></td>
</tr>
</tbody>
</table>
When a user clicks on the Edit link, I want the contents in that row to populate the form above. The means that parent column will be used to select the corresponding select option in the form.
The component looks like this:
export class AddCategoryComponent implements OnInit {
name: FormControl;
parent: FormControl;
childCategoryForm: FormGroup;
selectedValue: any;
ngOnInit() {
this.parent = new FormControl(this.selectedValue);
this.name = new FormControl('');
this.childCategoryForm = new FormGroup({name: this.name, parent: this.parent});
}
// THIS IS THE MAIN FUNCTION WHERE I AM TRYING TO DYNAMICALLY SELECT AN OPTION BASED ON THE VALUES IN THE ROW CLICKED BY THE USER. THIS IS THE FUNCTION THAT IS CALLED WHEN A USER CLICKS ON THE EDIT LINK
editChildCategory(category: Category) {
this.selectedValue = category.parent;
// this.childCategoryForm.setValue({name: category.name, parent: category.parent});
this.childCategoryForm.controls['name'].setValue(category.name);
this.childCategoryForm.controls['parent'].setValue(category.parent['name']);
this.selectedValue = category.parent['name'];
}
}
Some of the code in the above function are in comment because I have been trying different things but it's not working.
To me how you are setting the value prop of select is the prob.
Change html to below:
<option [ngValue]="parent.name" *ngFor="let parent of parentCategories">
Since, parent is an object not a string value to which you could match later on when edit link is clicked. Hope this helps!
I'm a little new to JQuery but I seem to be running into a challenge with cross-browser functionality. I have the following code inserted at the head of the form:
<script>
$(document).ready(function(){
/*wraps the action field in the Completed div with link to section*/
$('input[id^="tfa_5660"]').val(function(i,origText) {
$(this).wrap('Review this section');
return "";
});
/*wraps the action field in the To-Do div with link to section*/
$('input[id^="tfa_5714"]').val(function(i,origText) {
$(this).wrap('Start this section');
return "";
});
});
</script>
The jQuery function works on Chrome and Safari, but when I test it on Firefox, rather than wrapping it with the link from the input value it wraps the input with the url of the page itself. Any idea what might be causing the issues with Firefox but not Chrome or Safari?
See below for screenshots demonstrating the issue
Firefox:
Screenshot of Firefox not working
Below is the HTML of the form itself, generated by a WYSIWYG form editor called Form Assembly
<div class="htmlSection" id="tfa_5655"><div class="htmlContent" id="tfa_5655-HTML">Below is a list of the sections you've already completed.</div></div>
<table class="gridLayout ">
<thead><tr class="headerRow">
<th scope="col" id="tfa_5657[0]-GRID" class="">Section </th>
<th scope="col" id="tfa_5658[0]-GRID" class=""><b>Description</b> </th>
<th scope="col" id="tfa_5659[0]-GRID" class=""><b>Due Date</b> </th>
<th scope="col" id="tfa_5660[0]-GRID" class=""><b>Action </b> </th>
<th scope="col" id="tfa_5661[0]-GRID" class=" wf-acl-hidden">Click here to name this section </th>
</tr></thead>
<tbody>
<tr id="tfa_5656[0]" class="section repeat alternate-0 " data-repeatlabel=" ">
<td class=""><div class="oneField field-container-D " id="tfa_5657-D[0]"><div class="inputWrapper"><input type="text" id="tfa_5657[0]" name="tfa_5657[0]" value="Contact Information" placeholder="" default="Contact Information" readonly title="Section " class="readonly"></div></div></td>
<td class=""><div class="oneField field-container-D " id="tfa_5658-D[0]"><div class="inputWrapper"><textarea id="tfa_5658[0]" name="tfa_5658[0]" readonly title="Description " class="readonly">Tell us about yourself</textarea></div></div></td>
<td class=""><div class="oneField field-container-D " id="tfa_5659-D[0]"><div class="inputWrapper"><input type="text" id="tfa_5659[0]" name="tfa_5659[0]" value="" placeholder="" readonly title="Due Date " class="readonly"></div></div></td>
<td class=""><div class="oneField field-container-D " id="tfa_5660-D[0]"><div class="inputWrapper"><input type="text" id="tfa_5660[0]" name="tfa_5660[0]" value="" placeholder="" readonly title="Action " class="formula=LinkReview+IDReview readonly"></div></div></td>
<td class=" wf-acl-hidden"><fieldset id="tfa_5661[0]" class="section wf-acl-hidden">
<legend id="tfa_5661[0]-L">Click here to name this section </legend>
<div class="oneField field-container-D " id="tfa_5662-D[0]">
<label id="tfa_5662[0]-L" for="tfa_5662[0]" class="label preField "><b>ID</b> </label><br><div class="inputWrapper"><input type="text" id="tfa_5662[0]" name="tfa_5662[0]" value="00To000001mtE3aEAE" placeholder="" default="00To000001mtE3aEAE" readonly title="ID " class="calc-IDReview readonly"></div>
</div>
<div class="oneField field-container-D " id="tfa_5663-D[0]">
<label id="tfa_5663[0]-L" for="tfa_5663[0]" class="label preField "><b>Link</b> </label><br><div class="inputWrapper"><input type="text" id="tfa_5663[0]" name="tfa_5663[0]" value="https://www.tfaforms.com/4605490?what_id=" placeholder="" default="https://www.tfaforms.com/4605490?what_id=" readonly title="Link " class="calc-LinkReview readonly"></div>
</div>
Here is a link to the form itself, realized I probably should have included this from the start: https://www.tfaforms.com/4605382?contact_id=003o000000v6WOF
I use angularJS and I have one table on my page, I made one button to add row with input fields. My solution work good for adding rows and value of input fields in form, but doesn't work well where I need to delete particular row. I use one function for form, and another for adding and deleting rows.
It's like this:
<div ng-init="tmplCtr.newPeople()">
<div class="col-lg-12">
<input name="postsubmit" class="btn btn-default btn-sm" type="submit" value="Save table" ng-click="tmplCtr.newTable(tmplCtr.table)" />
<button class="btn btn-default btn-sm" ng-click="tmplCtr.editRow()">Add row</button>
</div>
<form name="peopleForm" novalidate>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th class="place-name">Name</th>
<th class="place-value">Lastname</th>
<th class="place-options">Options</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="people in tmplCtr.peoples">
<td class="place-name"><input type="text" name="" class="form-control" autocomplete="off" ng-model="tmplCtr.peoples.values[$index].name"></td>
<td class="place-last"><input type="text" name="" class="form-control" autocomplete="off" ng-model="tmplCtr.peoples.values[$index].lastname"></td>
<td class="place-options"><button class="btn btn-danger btn-md btn-delete" ng-click="tmplCtr.editRow($index)">Delete</button></td>
</tr>
</tbody>
</table>
</div>
</form>
When I press button add row I get row, but when I press delete row I delete row from screen but last row in array, not by index. Beside that also value of that row is not deleted from form scope. Function is:
function editRow(item) {
if(item == undefined) {
vm.peoples.push({});
} else {
vm.peoples.splice(item,1);
}
}
Can anyone help me?
I think its better to make two functions, the first one is for adding items, and the second one is for deleting like below:
function addEmptyItem(){
vm.peoples.push({});
}
function deleteItem(index){
vm.peoples.splice(index, 1);
}
Then in your view you can change tmplCtr.editRow($index) --> tmplCtr.deleteItem($index)
Furthermore it is strongly advised to use this syntax person.name etc in your repeat directive.
EDIT:
This is not tested by the way...
I want to show the value of a form on clicking of a checkbox and after selecting a checkbox I want that one of our input box of my form which is disabled show the name of checkbox in that field.I also want to get the id of that checkbox.
I am working in laravel .
<table class="table table-bordered" style="width: 80%;margin:5% 10%;background:slateblue">
<tr>
<th>#</th>
<th>item</th>
<th>item name</th>
<th>Added_at</th>
<tr>
<?php $i=1 ?>
#foreach($items as $item)
<tr>
<td><input type="checkbox" id="bought" name="{{$item->item_name}}" class="checkbox1"></td>
<td>{{$item->id}}</td>
<td>{{$item->item_name}}</td>
<td>{{$item->date}}
</tr>
#endforeach
</table>
<form class="shopped" method="post" action="{{url('post-data')}}" hidden><br>
{!! csrf_field()!!}
<h4 align="center">Add some information to mark as shopped</h4>
<label for ="item">Items</label>
<input type="text" class ="item" disabled><br>
<label for ="price">Price</label>
<input type="text" name="price"><br>
<label for ="store_name">Store</label>
<input type="text" name="store_name"><br>
<input type="submit" value="Add as purchased" class="btn btn-info" style="margin:20px 0 20px 60px"><br>
</form>
My Jquery Code....
$('.checkbox1').on('change',function(e){
e.preventDefault();
var a = this.name;
$('.item').attr('val',a);
$('.shopped').show();
});
Try this:
$('.checkbox1').on('change',function(e){
e.preventDefault();
var a = this.name;
$('.item').val(a);
$('.shopped').show();
});