I have table which consists of multiple rows and each row consists of Radio button in the first column as follows:
<table class="table table-condensed span8" id="AllocationTable">
<thead>
<tr>
<th title="Entity to Allocate" style="width: 30%">Entity</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.EntityAllocations)
{
<tr>
<td>
<input type="radio" name="radio" id="#item.ID" class="EntityRadioSelect" value="#item.ID" onclick="EntitySelect(this)" disabled="disabled" >
</td>
</tr>
}
</tbody>
</table>
Now I want to capture the Ids of the last clicked radio button
I have tried something like this
function EntitySelect(select) {
if ($(select).parent().data("lastClicked")){
alert($(select).parent().data("lastClicked"));
}
$(select).parent().data("lastClicked", select.id);
}
But I am getting the wrong value as it is giving me current value and sometime other values which is not accepted answer.
var clicked='';
var preClicked='';
$("#AllocationTable").on("click",".EntityRadioSelect",function(){
preClicked=clicked;
clicked=$(this).attr("id");
});
remove onclick="EntitySelect(this)"
try this:
function EntitySelect(select) {
var parent=$(select).parents('#AllocationTable');
if (parent.data("lastClicked")){
alert(parent.data("lastClicked"));
}
parent.data("lastClicked", select.id);
}
Related
I have a table with some values, the last input is a checkbox.
I need to save the id of the input into an array only when is checked.
This is my partial table:
<table id="produtcTable" class="table">
<thead class="thead-dark">
<tr>
<th scope="col">Producto</th>
<th scope="col">Precio de lista</th>
<th scope="col">Agregar</th>
</tr>
</thead>
<tbody>
<tr th:each="stock : ${stockList}">
<td th:text="${stock.productName}"></td>
<td th:text="${stock.price}"></td>
<td class="text-center">
<input class="form-check-input" type="checkbox" th:attr="id=${stock.stockCode}" onclick="myFunction(this)" aria-label="...">
this is my javascript that does not work:
<script >
function myFunction(product) {
var arr= [];
$('input[id='+ product.id +']:checked').each(function () {
arr.push(product.id);
});
alert(arr.toString());
};
</script>
what am I doing wrong?
I can't see a id attribute on you checkbox in you snippets. But there is some code i can not identify (not mentioned in post) setting the id. Please make sure there is an id in your current DOM (Browser Development tools: inspector). According to your snippet you can try the follwing:
<input type="checkbox" id="cb1" onclick="myFunction(this)"/>
<input type="checkbox" id="cb2" onclick="myFunction(this)"/>
and the following JS code would update an global array the the clicked checkbox id:
var arr= [];
function myFunction(inputCB) {
arr.push(inputCB.id);
alert(arr);
}
When I run the following code the alert comes back as 'undefined' when I would like is to return True or False depending on if the checkbox is check at the time that the user triggers the JavaScript to run.
The user is triggering it with a button. Currently when the user presses the button the script returns a 'undefined' for each row of the table.
Eventually I would like to create a JavaScript array that I will pass back to the server with an Ajax call but this is of little use if I can cannot determine the state of the check boxes for every row of the table.
Also, I'm using Jinja2 templating which explains the curly brackets but this should be of little consequence because the table is being created without issue when the HTML renders.
var table = document.getElementById("filterTable");
for (var i=1; i<table.rows.length; i++){
var isChecked = (table.rows[i].cells[2].checked);
alert(isChecked);
My table looks like this:
<table class="table table-condensed table hover" id = "filterTable">
<thead>
<tr>
<th>Origin</th>
<th>Destination</th>
<th>Active</th>
</tr>
</thead>
<tbody>
{% for dep in dependencies %}
<tr class="row">
<td><p>{{dep.origin}}</p></td>
<td><p>{{dep.destination}}</p></td>
<td>
<input type="checkbox" value="isSelected"/>
</td>
</tr>
{% endfor %}
</tbody>
</table>
The checkbox is the first child of td not the td itself (cells[2] returns third td) so checked property of td element would be always undefined.
You can get the checkbox from children property.
var isChecked = table.rows[i].cells[2].children[0].checked;
var table = document.getElementById("filterTable");
for (var i = 1; i < table.rows.length; i++) {
var isChecked = (table.rows[i].cells[2].children[0].checked);
alert(isChecked);
}
<table id="filterTable">
<thead>
<tr>
<th>Origin</th>
<th>Destination</th>
<th>Active</th>
</tr>
</thead>
<tbody>
<tr class="row">
<td>
<p>{{dep.origin}}</p>
</td>
<td>
<p>{{dep.destination}}</p>
</td>
<td>
<input type="checkbox" value="isSelected" />
</td>
</tr>
</tbody>
</table>
In case there are other elements as the child then you can get it using querySelector() method with attribute equals selector.
var isChecked = table.rows[i].cells[2].querySelector('[type="checkbox"]').checked;
var table = document.getElementById("filterTable");
for (var i = 1; i < table.rows.length; i++) {
var isChecked = (table.rows[i].cells[2].querySelector('[type="checkbox"]').checked);
alert(isChecked);
}
<table id="filterTable">
<thead>
<tr>
<th>Origin</th>
<th>Destination</th>
<th>Active</th>
</tr>
</thead>
<tbody>
<tr class="row">
<td>
<p>{{dep.origin}}</p>
</td>
<td>
<p>{{dep.destination}}</p>
</td>
<td>
<input type="checkbox" value="isSelected" />
</td>
</tr>
</tbody>
</table>
table.rows[i].cells[2] only find the td that contains the checkbox.
You need to query for the checkbox before you check the property.
var td = table.rows[i].cells[2];
var checkbox = td..querySelector('input[type="checkbox"]');
var isChecked = checkbox.checked;
Here is my html table that is used in the Asp.net MVC razor view
<table class="table-striped table-bordered">
<thead>
<tr>
<th class="col-md-2">
Id
</th>
<th class="col-md-4">
Description
</th>
<th class="col-md-3">
Quantity
</th>
<th class="col-md-3">
AssetType
</th>
</tr>
</thead>
<tbody>
#foreach (var i in Model)
{
<tr>
<td class="col-md-2">
#i.Id
</td>
<td class="col-md-4">
#i.Description
</td>
<td class="col-md-3">
#i.Count
</td>
<td class="col-md-3">
#i.AssetType
</td>
<td>
<a onclick="getId()">Edit</a>
</td>
</tr>
}
</tbody>
</table>
My Js Code
<script type="text/javascript">
var getId = function () {
//get current row
var currentRow = $(this).closest('tr');
// get the id from the current row. or is there any better way ?
}
</script>
Hi In the above code. all i want to do is when the user selects the edit link of the given row in the table. i want to extract id value of the selected row.
Could anyone please guide me in this one? I have seen articles that says how to get a given cell value from each row but didnt have any luck in finding articles that explains how to extract the data cell value from a given row.
You already have it since you are generating the HTML from server side, when the user clicks pass the id to the funcion to do whatever you want with it.
<td>
<a onclick="getId('#i.Id')">Edit</a>
</td>
function getId(id) {...}
or if you prefer you can use something like this:
<a onclick="getId(this)">Edit</a>
function getId(dom){
var id = $(dom).parent().find('.col-md-2').html();
}
You can put the id value to data-id attribute in the Edit link as below
<a data-id="#i.Id" class="edit-button" href="#">Edit</a>
Add the click event handler to the edit link, you can get the id value by using $(this).data('id')
<script type="text/javascript">
$('.edit-button').on('click', function (e) {
e.preventDefault();
alert($(this).data('id'));
});
</script>
Working fiddle: http://jsfiddle.net/ds4t6jur/
Good day,
I have a dynamic table where you can add and remove table when you press X button, in each row there is a Current Qty field and Adjusted Qty field and also there is a New Qty field which is derived when you input a number on the Adjusted Qty Field, and its all working correctly but I want to add a functionality that will change every total Qty Field base on checked radio box above the table. Like if you click the IN (radio button), the operation will be ADD, and if you click the OUT (radio button), the operation will be MINUS and all the rows should be affected by every 'onchange' event of the radio button. Can anyone please help me :)
HTML:
<div class="col-xs-12">
<div class="box">
<div class="box-body table-responsive">
<div id="records">
<div class="form-group">
<label for="departments">Department</label>
<select name="departments" id="">
#foreach($departments as $department)
<option value="{{$department->xid}}">{{$department->department}}</option>
#endforeach
</select>
</div>
<br>
<label for="radio">Adjustment Type</label>
<div class="radio">
<label><input type="radio" class="adjType" value="in" id="radioIn" name="optradio">Inventory In</label>
</div>
<div class="radio">
<label><input type="radio" class="adjType" value="out" id="radioOut" name="optradio">Inventory Out</label>
</div>
</div>
<label for="remarks">Remarks</label>
<input type="text" name="remarks" required id="memo" placeholder="Text input" class="form-control">
<br>
<table class="table table-condensed" id="adjustmentTable">
<thead>
<tr>
<th width="30%">Item</th>
<th width="10%">Qty on Hand</th>
<th width="10%">Adjusted Qty</th>
<th width="10%">new Qty</th>
<th width="10%">Current Cost</th>
<th width="10%">Adjusted Cost</th>
<th width="10%">Cost Diff</th>
<th width="10%">Expiration Date</th>
<th width="10%">Remove</th>
</tr>
</thead>
<tbody>
<tbody>
<tr>
<td>Item 1</td>
<td>20</td>
<td>10</td>
<td>30</td>
<td>10.40</td>
<td>12.00</td>
<td>.60</td>
<td>11/21/1016</td>
<td>X</td>
</tr>
<tr>
<td>Item 31</td>
<td>230</td>
<td>16</td>
<td>246</td>
<td>31.40</td>
<td>20.00</td>
<td>-11.40</td>
<td>11/21/1019</td>
<td>X</td>
</tr>
<tr>
<td>Item 6</td>
<td>12</td>
<td>19</td>
<td>31</td>
<td>22.40</td>
<td>30.00</td>
<td>7.60</td>
<td>11/21/1016</td>
<td>X</td>
</tr>
</tbody>
</tbody>
</table>
JS:
<script>
var $this = $(document);
$this.on("change",'input[name="optradio"]',function(){
var rowCount = $('#adjustmentTable tr').length - 1;
});
You need to create event handlers for the "change" event on those radio buttons. These event handlers will then loop through all the rows of your table, and apply the AutoCalculateDifference function to each row. Something like this:
$("#radioIn, #radioOut").change(function() {
// The user clicked a radio button. Now loop through all the
// rows in the table. NOTE: You should be more specific with
// this jQuery selector to refer to the exact ID of the table.
$("table tr").each(function() {
autoCalculateDifferenceOnRow(this);
});
});
If you do this, then you will need to refactor your AutoCalculateDifference function a little bit to be able to handle an incoming parameter representing the row, rather than always using "this". For example,
function autoCalculateDifferenceOnRow(currentRow) {
if(document.getElementById('radioIn').checked) {
var type = 1;
}else if(document.getElementById('radioOut').checked) {
var type = 0;
}
var $adjQty = $(currentRow).find('.adjQty');
var $newCost = $(currentRow).find('.newCost');
var $onHandQty = $(currentRow).find('p.onHandQty');
var $qtyDiff = $(currentRow).find('p.qtydiff');
var $currentCost = $(currentRow).find('p.currentCost');
var $costDiff = $(currentRow).find('p.costDiff');
// Update Quantity
var onHandQty = parseInt($onHandQty.text(),10);
if(type == 1)
{
var difference = onHandQty + parseInt($adjQty.val());
}
else if(type==0)
{
var difference = onHandQty - parseInt($adjQty.val());
}
$qtyDiff.text(difference);
// Update Cost
var currentCost = $currentCost.text();
var difference = $newCost.val() - currentCost;
$costDiff.text(difference);
}
I haven't tested the above code, but hopefully it helps you head in the right direction.
I was wondering if it is possible to 'Checked=true' the checkBox of the ROW when data is entered in textbox inside a table.
here is the code jquery code to do this, but is checking all the checkboxes. I will appreciate any help.
jquery code:
<script>
jQuery('[id$="enteredValue"]').change(function() {
jQuery('[id$="check"]').attr('checked', true);
});
</script>
html code
<table id="table-2">
<thead>
<tr>
<th>Select</th>
<th>Enter Qty</th>
<th> Suggested Units</th>
<th> Cost</th>
<th>Brand</th>
</tr>
<thead>
<tbody>
<tr>
<td><apex:inputCheckbox id="check" value="{!objectRow.selected}"/> </td>
<td><apex:inputText id="enteredValue" value=" {!objectRow.EnteredValue}" /></td>
<td><apex:outputText value="{!objectRow.Reorder_Amount}"/></td>
<td><apex:outputText value="{!objectRow.Reorder_Cost}" /></td>
<td><apex:outputText value="{!objectRow.Brand}" /></td>
</tr>
</tbody>
</table>
Try this..
<script>
jQuery('[id$="enteredValue"]').change(function() {
$(this).closest('tr').find('[id$="check"]').prop('checked', true);
if(this.val()=="")
{
$(this).closest('tr').find('[id$="check"]').prop('checked', false);
}
});
</script>
That's because you are selecting all checkboxes. Only select the one that is in the row of the text input:
$(this).closest('tr').find('[id$="check"]').prop('checked', true);
If you pass a boolean as value, use prop instead. See https://api.jquery.com/attr/ for more info.