I have a dynamic table which has the input field in each row. I would like to get the value entered by the user through Javascript. I am able to get the HTML code for the input field 'quantity' but not the value.
Here is the part of the javascript code :
var table = document.getElementById("mactable");
var row_count = table.getElementsByTagName("tr").length;
var grand_total = document.getElementById("grand_total");
var grand_price = 0.00;
for (var i = 1, row; row = table.rows[i]; i++)
{
var price = row.cells[4].innerHTML;
var quantity = row.cells[2].innerHTML;
alert(quantity);
if(isNumber(price))
{
var num = parseFloat(price);
grand_price = grand_price + num;
}
}
Any idea how can it be done ?
Instead of reading table cell innerHTML you can find inner input element and then read its value property:
var quantity = Number(row.cells[2].querySelector('input').value);
Here row.cells[2] is a td element. Using querySelector('input') you can find the first children input.
Also note, that since the value of the field is a string, you might want to cast it to number, for example with Number function.
Related
Newbie here.. I was making an expense note app(just a noob app). I have this button function on which when I select one table row.. It will be deleted and the table row input text value will return to the input bar text area(name, date, amount, remarks). I was happy when it work.
But it only work once.
Because when I select different table row data. It will be deleted but the same "first input data value" will always return to the input text bar..
It seems the first table data are being saved in the empty array function that can be reuse again. What I am hoping for is when I use the empty array function it will be empty again to be use in another different table row data.
I am using array methods but failed or my If statement is wrong. Hopefully you can answer this :) thanks
document
.getElementById("editSelection")
.addEventListener("click", editSelection);
function editSelection() {
var editName = [];
var editDate = [];
var editAmount = [];
var editRemarks = [];
let selectedRows = document.getElementsByClassName("selected-row ");
while (selectedRows.length > 0) {
editName.push(cell0.innerText);
editDate.push(cell1.innerText);
editAmount.push(cell2.innerText);
editRemarks.push(cell3.innerText);
selectedRows[0].parentNode.removeChild(selectedRows[0]);
var name = document.getElementById("inputName");
name.value = editName.join("\n");
var date = document.getElementById("inputDate");
date.value = editDate.join("\n");
var amount = document.getElementById("inputAmount");
amount.value = editAmount.join("\n");
var remarks = document.getElementById("inputRemarks");
remarks.value = editRemarks.join("\n");
}
if (name || date || amount || remarks) {
editName.splice([0], editName.length);
editDate.splice([0], editDate.length);
editAmount.splice([0], editAmount.length);
editRemarks.splice([0], editRemarks.length);
}
}
If you define an empty array
var editName = [];
and fill it with values you can empty it again with
editName = [];
I have a button to dynamically create select elements, which i created like this:
var units = units_array[0];
//ingredient unit of measurement drop down
var cell3= row.insertCell(2);
var unit_of_measure = document.createElement("select");
unit_of_measure.name = "unit_of_measure_select";
cell3.appendChild(unit_of_measure);
//Create and append the options
for (var i = 0; i < units.length; i++) {
var option = document.createElement("option");
option.value = units[i];
option.text = units[i];
unit_of_measure.appendChild(option);
}
However, when I select it inside (inside a loop from another function) i get this error in the console:
Uncaught TypeError: Cannot read property 'undefined' of undefined
Here is the code i am using to get to the select element which sits inside a table.
var table = document.getElementById('selected_ingredients');
var rowCount = table.rows.length; //empty table has 2 rows (header + something else?)
var cellsCount = table.rows[0].cells.length -1 ; //table width in cells by counting headers minus the last cell (delete)
for (var r = 1; r < rowCount; r++) { //loop through all rows (r) in table
var $ingredient_dict = {}; //initiate dictionary for this ingredient
for (var c = 0; c < cellsCount; c++) { //loop through each cell (c) in row
var $cell = table.rows[r].cells[c];
if ($cell.innerHTML.includes("select")) { //if its is 3rd iteration (3rd cell along = select box)
alert("test");
//not working - undefined value from generated select element
var UOM = $cell.options[$cell.selectedIndex].value;
alert(UOM);
I would like to return the value of the selected option in var UOM. I'm relatively new to js so apologies if this is simple.
in your if statement you can grab a handle to the select element:
$select = $cell.querySelector('select');
//then to grab the option and value
var UOM = $select.selectedOptions[0].value;
alert(UOM);
I would also recommend that in your if statement instead of checking for text in the innerHTML you:
$cell.querySelector('select');
This will return null which is the equivalent of false if no select element is present, but return true when an element is present. The advantage is that if one of the cells contains the word 'select' for whatever reason if you are checking for the string 'select' it will return true and try to select the element that does not exist, however if you are looking for an element you just found it. Hope this helps.
I am trying to get value of dynamic generated inputs. Here is my code and what I want actually
Here is my Code:
function activehead_standard(){
var cnt = 4;
for(i=1;i<=cnt;i++){
var active_head = document.getElementById('standard_'.i).value;
}
}
I want to get values of input:
standard_1
standard_2
standard_3
standard_4
but its not getting the value of input through ids I am sure its actually not getting the ids of inputs
use + for concatenation in javascript
function activehead_standard(){
var cnt = 4;
for(i=1;i<=cnt;i++){
var active_head = document.getElementById('standard_'+i).value;
}
}
The thing is this: I have a GridView control which is populated with data from an SQL table. Each column has simple data such as strings or int numbers. My last column is a "Select CommandField", which pops up a form when clicked. I am trying to make a function in JavaScript which needs to use the value of the first column of the selected row; how is the syntax for this?
Like in C# it would be
myGridView.Rows[myGridView.SelectedIndex].Cells[0].Text
so in JavaScript it should be something like
var grid = document.getElementById('myGridView');
var gridRow = grid.rows[<what_Should_I_Type_Here?>].cells[0].text
Thank you very much in advance!
var grid = document.getElementById('myGridView');
var gridRow = grid.rows[document.getElementById("myGridView").selectedIndex].cells[0].text;
function Redirect(row) {
var rowData = row.parentNode.parentNode;
var rowIndex = rowData.rowIndex;
var grid = document.getElementById('ContentPlaceHolder1_Grd_Dashboard');
var value = grid.rows[rowIndex].cells[0].innerText;
alert(value);
window.location = "PoTracking.aspx?Pid=" + value;
return false;
}
I have a listbox that I am trying to read through all the data in it and put those values in a textbox. I thought I this would use a for loop but it only runs once and then quits.
var listbox = $('#<%=listBox.ClientID%>');
for (var count = 0 ; count <= $('#<%=listBox.ClientID%>').length; count++) {
var existing = $('#<%=stringTextBox.ClientID%>').val();
var value = listbox[count].value;
document.getElementById("<%=stringTextBox.ClientID%>").value = "," + value + existing
}
First: #<%=listBox.ClientID%> is an selector by ID. The idee of IDs is that there is always at most one element with this ID.
Second: var value = should be something like var value = $(<listboxselector>).get(count).val()