how to sum table columns contains input fields using javascript - javascript

I am creating a billing web application in laravel
I created a form and a button (on click button call addtoinvoice() ) function, then it will add rows in table and created input fields .
so i want to get sum of all product_values[] columns
<script type="text/javascript">
function addtoinvoice()
{
var products = document.getElementById("product");
var productsvalue = products.options[products.selectedIndex].value;
var client = document.getElementById("client");
var clientvalue = client.options[client.selectedIndex].value;
//----verify product or client input is not nulll------------
if(productsvalue == "")
{
alert("Please select an product");
}else if(clientvalue==""){
alert("Please select an client");
}else
{
var index,table = document.getElementById("products");
//-----------Insert Rows 1 ---------------
var row = table.insertRow(1);
//----------------insert Columns-----------------
var product_name = row.insertCell(0);
var product_input_tag = document.createElement("input");
product_input_tag.type = "text";
product_input_tag.name="product_name[]";
product_input_tag.readOnly=true;
var product_name_value = document.getElementById("product");
product_input_tag.value = product_name_value.options[product_name_value.selectedIndex].text;
product_name.appendChild(product_input_tag);
var product_description = row.insertCell(1);
var product_description_input_tag = document.createElement("input");
product_description_input_tag.type = "text";
product_description_input_tag.name="product_desciption[]";
product_description_input_tag.readOnly=true;
var product_description_value = document.getElementById("pro_description");
product_description_input_tag.value = product_description_value.value;
product_description.appendChild(product_description_input_tag);
var product_uom = row.insertCell(2);
var product_uom_input_tag = document.createElement("input");
product_uom_input_tag.type = "text";
product_uom_input_tag.name="product_uom[]";
product_uom_input_tag.readOnly=true;
var product_uom_value = document.getElementById("uom");
product_uom_input_tag.value = product_uom_value.value;
product_uom.appendChild(product_uom_input_tag);
var product_qty = row.insertCell(3);
var product_qty_input_tag = document.createElement("input");
product_qty_input_tag.type = "number";
product_qty_input_tag.name="product_qty[]";
product_qty_input_tag.readOnly=true;
var product_qty_value = document.getElementById("qty");
product_qty_input_tag.value = product_qty_value.value;
product_qty.appendChild(product_qty_input_tag);
var product_unitprice = row.insertCell(4);
var product_unitprice_input_tag = document.createElement("input");
product_unitprice_input_tag.type = "number";
product_unitprice_input_tag.name="product_uniprice[]";
product_unitprice_input_tag.readOnly=true;
var product_unitprice_value = document.getElementById("unit_price");
product_unitprice_input_tag.value = product_unitprice_value.value;
product_unitprice.appendChild(product_unitprice_input_tag);
var product_discount = row.insertCell(5);
var product_discount_input_tag = document.createElement("input");
product_discount_input_tag.type = "number";
product_discount_input_tag.name="product_discount[]";
product_discount_input_tag.readOnly=true;
var product_discount_value = document.getElementById("discount");
product_discount_input_tag.value = product_discount_value.value;
var discount = product_discount_value.value;
product_discount.appendChild(product_discount_input_tag);
var product_value = row.insertCell(6);
var product_value_input_tag = document.createElement("input");
product_value_input_tag.type = "number";
product_value_input_tag.name="product_value[]";
product_value_input_tag.readOnly=true;
var original = (product_unitprice_value.value)*(product_qty_value.value);
var newdiscount = (original/100)*discount;
var total_discount = original-newdiscount;
var result = Math.round(total_discount*100)/100;
product_value_input_tag.value = result;
product_value.appendChild(product_value_input_tag);
var product_cgst = row.insertCell(7);
var product_cgst_input_tag = document.createElement("input");
product_cgst_input_tag.type = "number";
product_cgst_input_tag.name="product_cgst[]";
product_cgst_input_tag.readOnly=true;
product_cgst_input_tag.value = 0;
product_cgst.appendChild(product_cgst_input_tag);
var product_sgst = row.insertCell(8);
var product_sgst_input_tag = document.createElement("input");
product_sgst_input_tag.type = "number";
product_sgst_input_tag.name="product_cgst[]";
product_sgst_input_tag.readOnly=true;
product_sgst_input_tag.value = 0;
product_sgst.appendChild(product_sgst_input_tag);
var product_igst = row.insertCell(9);
var product_igst_tag = document.createElement("input");
product_igst_tag.type = "text";
product_igst_tag.name="product_igst[]";
product_igst_tag.readOnly=true;
var product_igst_value = document.getElementById("tax");
var igst = product_igst_value.options[product_igst_value.selectedIndex].value;
var tax = (total_discount/100)*igst;
product_igst_tag.value = Math.round(tax*100)/100;
product_igst.appendChild(product_igst_tag);
var remove_row = row.insertCell(10);
var product_remove = document.createElement("span");
product_remove.className="btn btn-danger";
var button_name = document.createTextNode("Remove");
product_remove.appendChild(button_name);
remove_row.appendChild(product_remove);
//------------Cells Insert End----------------
//--------Remove Rows start----------
for(var i = 1; i<table.rows.length; i++)
{
table.rows[i].cells[10].onclick = function()
{
var c = confirm("do you want to remove this product ?");
if(c == true)
{
index = this.parentElement.rowIndex;
table.deleteRow(index);
}
}
}
//-------Remove Rows End-------------
//----------Calculate All sums subtotal,discount,tax etc..------------
}
}
</script>

Related

The appearance of a new input element does not work on addEventListener

I have a javascript form.
I need to make sure that when I select a specific item from the drop-down menu, I have an additional input.
I tried to do it via addEventListener, but so far I have no result.
In the code, this place is located after the comment: "Creating a drop-down menu with prices, transferring data to the form"
What could I have done wrong? How can the error be corrected?
let buttons = document.querySelectorAll('.buy_product_form');
buttons.forEach(el => {
el.addEventListener('click', e => {
let button = e.target;
let atr = button.dataset.title;
let id = button.dataset.id;
let options = button.dataset.options;
let price = button.dataset.price;
let item_id = button.dataset.item-id;
let item = button.dataset.item;
button.id = id;
/*Creating tag*/
......
......
......
/* Creating a drop-down menu with prices, transferring data to the form */
if (options !== null) {
options = JSON.parse(options);
var select = document.createElement('select');
select.addEventListener('change', function (e) {
if('this.options[this.selectedIndex].value' == 0) {
let input = document.createElement('input');
this.insertAdjacentElement('afterEnd', input);
}
});
select.id = 'price';
select.name = 'option_id';
select.required = true;
for (var prop in options) {
var option = document.createElement("option");
option.text = options[prop].name + ' за ' + options[prop].value + ' руб.';
option.value = options[prop].option_id;
select.appendChild(option);
}
_form.appendChild(select);
/* Hide the dropdown menu */
} else {
.........
/* Creating the rest of the form elements */
var input = document.createElement('input');
input.id = 'item_id';
input.type = 'hidden';
input.name = 'item_id';
input.value = item_id;
_form.appendChild(input);
var input = document.createElement('input');
input.id = 'item';
input.type = 'hidden';
input.name = 'item';
input.value = item;
_form.appendChild(input);
_form.innerHTML += "\n <div>\n <input class='btn-gray' type=\"submit\" value=\"\u041E\u0442\u043F\u0440\u0430\u0432\u0438\u0442\u044C\" />\n </div>\n <p id=\"req_form\"></p>\n ";
var pop = new Modal('#' + button.id, _form, function () {
var name = new Input_Validation('name', /./, 'Это обязательное поле.');
var email = new Input_Validation('email', /.+#.+\..+/i, 'Это обязательное поле.', 'Укажите действительный адрес электронной почты!');
var price = new Input_Validation('price', /./i, 'Это обязательное поле.', 'Укажите вариант!');
var phone = new Input_Validation('phone', /^(\s*)?(\+)?([- _():=+]?\d[- _():=+]?){10,14}(\s*)?$/, 'Это обязательное поле.');
});
});
});
Version 2(Edit 1)
I made all the creation of the form from the start, now all elements are created dynamically.
What is wrong with my addEventListener function?
let buttons = document.querySelectorAll('.buy_product_form');
buttons.forEach(el => {
el.addEventListener('click', e => {
let button = e.target;
let atr = button.dataset.title;
let id = button.dataset.id;
let options = button.dataset.options;
let price = button.dataset.price;
let item_id = button.dataset.item-id;
let item = button.dataset.item;
button.id = id;
/*Creating tag*/
.........
/*Creating name field*/
var _item1 = document.createElement('div');
_item1.className = 'item';
_form.appendChild(_item1);
var _inputName = document.createElement('input');
_inputName.placeholder = "Ваше имя";
_inputName.required = true;
_inputName.type = "text";
_inputName.name = "name";
_inputName.id = "name";
_item1.appendChild(_inputName);
var _reqNameDiv = document.createElement('div');
_reqNameDiv.id = "req_name";
_item1.appendChild(_reqNameDiv);
/*Creating Email field*/
...............
/*Creating Phone field*/
.............
/* Creating a drop-down menu with prices, transferring data to the form */
if (options !== null) {
options = JSON.parse(options);
var select = document.createElement('select');
select.id = 'price';
select.name = 'option_id';
select.required = true;
for (var prop in options) {
var option = document.createElement("option");
option.text = options[prop].name + ' за ' + options[prop].value + ' руб.';
option.value = options[prop].option_id;
select.appendChild(option);
}
_form.appendChild(select);
select.addEventListener('change', function (e) {
if(this.options[this.selectedIndex].value == 0) {
let input = document.createElement('input');
input.placeholder = "Своя цена";
input.type = "number";
input.name = "your_rice";
input.id = "your_price";
_form.appendChild(input);
// this.insertAdjacentElement('afterEnd', input);
}
});
/* Hide the dropdown menu */
} else {
................
/* Creating the rest of the form elements */
var input = document.createElement('input');
input.id = 'item_id';
input.type = 'hidden';
input.name = 'item_id';
input.value = item_id;
_form.appendChild(input);
var input = document.createElement('input');
input.id = 'item';
input.type = 'hidden';
input.name = 'item';
input.value = item;
_form.appendChild(input);
var _buttonDiv = document.createElement('div');
_form.appendChild(_buttonDiv);
var _button = document.createElement('input');
_button.className = "btn-gray";
_button.type = "submit";
_button.value = "Отправить";
_buttonDiv.appendChild(_button);
var _reqForm = document.createElement('p');
_reqForm.id = "req_form";
_form.appendChild(_reqForm);
var pop = new Modal('#' + button.id, _form, function () {
var name = new Input_Validation('name', /./, 'Это обязательное поле.');
var email = new Input_Validation('email', /.+#.+\..+/i, 'Это обязательное поле.', 'Укажите действительный адрес электронной почты!');
var price = new Input_Validation('price', /./i, 'Это обязательное поле.', 'Укажите вариант!');
var phone = new Input_Validation('phone', /^(\s*)?(\+)?([- _():=+]?\d[- _():=+]?){10,14}(\s*)?$/, 'Это обязательное поле.');
});
});
});

Fetching data from Firebase cloud database and showing them with load more button (Pagination) Javascript

I have tried with this approach but getting Uncaught FirebaseError: Function Query.startAfter() requires a valid first argument, but it was undefined. The lastVisible is getting the value on console. Here is the code:
function loadMoreButtonAction() {
fetchRequest(true);
}
function fetchRequest(isFromLoadMore) {
var table = document.getElementById("outputTableID");
var lastVisible;
var tableIndex;
if (isFromLoadMore == false) {
if (table.rows.length > 2) {
resetTable(table);
}
var first = firestore.collection(parentNode).orderBy("serialNo").limit(5);
first.get().then((querySnapshot) => {
// Get the last visible document
lastVisible = querySnapshot.docs[querySnapshot.docs.length-1];
console.log("lastVisible", lastVisible);
tableIndex = querySnapshot.size;
document.getElementById("wallpaperCount").innerHTML = 'Total Items: ' + tableIndex + '';
querySnapshot.forEach((doc) => {
var productItem = Object.create(wallpapers);
productItem.nodeId = doc.id;
productItem.serialNo = doc.data().serialNo;
productItem.title = doc.data().title;
productItem.downloadNumber = doc.data().downloadNumber;
productItem.isPremimumItem = doc.data().isPremimumItem;
productItem.wallpaper1125_2436ImgName = doc.data().wallpaper1125_2436ImgName;
productItem.wallpaper1242_2208ImgName = doc.data().wallpaper1242_2208ImgName;
productItem.wallpaper1242_2688ImgName = doc.data().wallpaper1242_2688ImgName;
productItem.wallpaper828_1792ImgName = doc.data().wallpaper828_1792ImgName;
productItem.wallpaper750_1334ImgName = doc.data().wallpaper750_1334ImgName;
productItem.wallpaper640_1136ImgName = doc.data().wallpaper640_1136ImgName;
productItem.wallpaper1125_2436Url = doc.data().wallpaper1125_2436Url;
productItem.wallpaper1242_2208Url = doc.data().wallpaper1242_2208Url;
productItem.wallpaper1242_2688Url = doc.data().wallpaper1242_2688Url;
productItem.wallpaper828_1792Url = doc.data().wallpaper828_1792Url;
productItem.wallpaper750_1334Url = doc.data().wallpaper750_1334Url;
productItem.wallpaper640_1136Url = doc.data().wallpaper640_1136Url;
productItem.wallpaper1125_2436ImgStorageRef = doc.data().wallpaper1125_2436ImgStorageRef;
productItem.wallpaper1242_2208ImgStorageRef = doc.data().wallpaper1242_2208ImgStorageRef;
productItem.wallpaper1242_2688ImgStorageRef = doc.data().wallpaper1242_2688ImgStorageRef;
productItem.wallpaper828_1792ImgStorageRef = doc.data().wallpaper828_1792ImgStorageRef;
productItem.wallpaper750_1334ImgStorageRef = doc.data().wallpaper750_1334ImgStorageRef;
productItem.wallpaper640_1136ImgStorageRef = doc.data().wallpaper640_1136ImgStorageRef;
productItem.wallpaper1125_2436FacebookPhotoID = doc.data().wallpaper1125_2436FacebookPhotoID;
productItem.wallpaper1242_2208FacebookPhotoID = doc.data().wallpaper1242_2208FacebookPhotoID;
productItem.wallpaper1242_2688FacebookPhotoID = doc.data().wallpaper1242_2688FacebookPhotoID;
productItem.wallpaper828_1792FacebookPhotoID = doc.data().wallpaper828_1792FacebookPhotoID;
productItem.wallpaper750_1334FacebookPhotoID = doc.data().wallpaper750_1334FacebookPhotoID;
productItem.wallpaper640_1136FacebookPhotoID = doc.data().wallpaper640_1136FacebookPhotoID;
var row = table.insertRow(2);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
var cell7 = row.insertCell(6);
var cell8 = row.insertCell(7);
var cell9 = row.insertCell(8);
var cell10 = row.insertCell(9);
var cell11 = row.insertCell(10);
cell1.innerHTML = productItem.serialNo;
cell2.innerHTML = productItem.title;
cell3.innerHTML = productItem.downloadNumber;
cell4.innerHTML = productItem.isPremimumItem;
appendImageOnCell(cell5, "./utilities/images/tick.png"); //productItem.wallpaper1125_2436Url
appendImageOnCell(cell6, "./utilities/images/tick.png"); //productItem.wallpaper1242_2208Url
appendImageOnCell(cell7, "./utilities/images/tick.png"); //productItem.wallpaper1242_2688Url
appendImageOnCell(cell8, "./utilities/images/tick.png"); //productItem.wallpaper828_1792Url
appendImageOnCell(cell9, "./utilities/images/tick.png"); //productItem.wallpaper750_1334Url
appendImageOnCell(cell10, productItem.wallpaper640_1136Url);
appendButtonOnCell(cell11, productItem);
});
});
} else {
var second = firestore.collection(parentNode).orderBy("serialNo").startAfter(lastVisible).limit(5);
second.get().then((querySnapshot) => {
// Get the last visible document
lastVisible = querySnapshot.docs[querySnapshot.docs.length-1];
console.log("lastVisible", lastVisible);
tableIndex = tableIndex + querySnapshot.size;
document.getElementById("wallpaperCount").innerHTML = 'Total Items: ' + tableIndex + '';
querySnapshot.forEach((doc) => {
var productItem = Object.create(wallpapers);
productItem.nodeId = doc.id;
productItem.serialNo = doc.data().serialNo;
productItem.title = doc.data().title;
productItem.downloadNumber = doc.data().downloadNumber;
productItem.isPremimumItem = doc.data().isPremimumItem;
productItem.wallpaper1125_2436ImgName = doc.data().wallpaper1125_2436ImgName;
productItem.wallpaper1242_2208ImgName = doc.data().wallpaper1242_2208ImgName;
productItem.wallpaper1242_2688ImgName = doc.data().wallpaper1242_2688ImgName;
productItem.wallpaper828_1792ImgName = doc.data().wallpaper828_1792ImgName;
productItem.wallpaper750_1334ImgName = doc.data().wallpaper750_1334ImgName;
productItem.wallpaper640_1136ImgName = doc.data().wallpaper640_1136ImgName;
productItem.wallpaper1125_2436Url = doc.data().wallpaper1125_2436Url;
productItem.wallpaper1242_2208Url = doc.data().wallpaper1242_2208Url;
productItem.wallpaper1242_2688Url = doc.data().wallpaper1242_2688Url;
productItem.wallpaper828_1792Url = doc.data().wallpaper828_1792Url;
productItem.wallpaper750_1334Url = doc.data().wallpaper750_1334Url;
productItem.wallpaper640_1136Url = doc.data().wallpaper640_1136Url;
productItem.wallpaper1125_2436ImgStorageRef = doc.data().wallpaper1125_2436ImgStorageRef;
productItem.wallpaper1242_2208ImgStorageRef = doc.data().wallpaper1242_2208ImgStorageRef;
productItem.wallpaper1242_2688ImgStorageRef = doc.data().wallpaper1242_2688ImgStorageRef;
productItem.wallpaper828_1792ImgStorageRef = doc.data().wallpaper828_1792ImgStorageRef;
productItem.wallpaper750_1334ImgStorageRef = doc.data().wallpaper750_1334ImgStorageRef;
productItem.wallpaper640_1136ImgStorageRef = doc.data().wallpaper640_1136ImgStorageRef;
productItem.wallpaper1125_2436FacebookPhotoID = doc.data().wallpaper1125_2436FacebookPhotoID;
productItem.wallpaper1242_2208FacebookPhotoID = doc.data().wallpaper1242_2208FacebookPhotoID;
productItem.wallpaper1242_2688FacebookPhotoID = doc.data().wallpaper1242_2688FacebookPhotoID;
productItem.wallpaper828_1792FacebookPhotoID = doc.data().wallpaper828_1792FacebookPhotoID;
productItem.wallpaper750_1334FacebookPhotoID = doc.data().wallpaper750_1334FacebookPhotoID;
productItem.wallpaper640_1136FacebookPhotoID = doc.data().wallpaper640_1136FacebookPhotoID;
var row = table.insertRow(tableIndex);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
var cell7 = row.insertCell(6);
var cell8 = row.insertCell(7);
var cell9 = row.insertCell(8);
var cell10 = row.insertCell(9);
var cell11 = row.insertCell(10);
cell1.innerHTML = productItem.serialNo;
cell2.innerHTML = productItem.title;
cell3.innerHTML = productItem.downloadNumber;
cell4.innerHTML = productItem.isPremimumItem;
appendImageOnCell(cell5, "./utilities/images/tick.png"); //productItem.wallpaper1125_2436Url
appendImageOnCell(cell6, "./utilities/images/tick.png"); //productItem.wallpaper1242_2208Url
appendImageOnCell(cell7, "./utilities/images/tick.png"); //productItem.wallpaper1242_2688Url
appendImageOnCell(cell8, "./utilities/images/tick.png"); //productItem.wallpaper828_1792Url
appendImageOnCell(cell9, "./utilities/images/tick.png"); //productItem.wallpaper750_1334Url
appendImageOnCell(cell10, productItem.wallpaper640_1136Url);
appendButtonOnCell(cell11, productItem);
});
});
}
}
What am I missing here?
Thanks!
My UI:
And this is the error I am getting:
It looks like lastVisible is undefined, which is not allowed. When looking at your code, that makes sense, since you define lastVisible inside the fetchRequest function. So each time you call fetchRequest, you end up with a new lastVisible variable with an initial value of undefined.
You'll want to declare lastVisible outside of the fetchRequest method, so that its value is kept between calls to fetchRequest.
It also seems that you're duplicating a lot of code in fetchRequest. If we simplify this code and pull out the lastVisible variable, we end up with something like:
var lastVisible; // declare outside of fetchRequest so that its value is retained between calls
function fetchRequest(isFromLoadMore) {
var query = firestore.collection(parentNode).orderBy("serialNo").limit(5);
if (isFromLoadMore == false) {
if (table.rows.length > 2) {
resetTable(table);
}
}
else if (lastVisible) {
query = query.startAfter(lastVisible);
}
query.get().then((querySnapshot) => {
// Get the last visible document
lastVisible = querySnapshot.docs[querySnapshot.docs.length-1];
console.log("lastVisible", lastVisible);
...
});
}
Firstly instead of doing productItem.title = doc.data().title; and calling doc.data() a thousand times for every single possible field, you could just do:
let productItemLiteral = { nodeId: doc.id, ...doc.data() };
let productItem = Object.create(wallpapers, productItemLiteral);
And with regards to the pagination, you can paginate your fetches with query cursors. The firestore documentation handles this area very well: https://firebase.google.com/docs/firestore/query-data/query-cursors
Basically, your fetch function could look like this:
const fetchRecords = cursor => {
const queryObj = cursor ?
firestore().collection(parentNode).orderBy("serialNo").startAfter(cursor).limit(1
0)
:
firestore().collection(parentNode).orderBy("serialNo").limit(10);
queryObj.get().then((querySnapshot => {
// Save the last document to a global variable so you can use it as reference to fetch the next page
lastDocCursor = querySnapshot.docs[querySnapshot.docs.length - 1];
// Include the rest of your handler
}
}
You should have a global variable: `lastDocCursor` initialized as `null`, so you could just call `fetchRecords(lastDocCursor);`. If a cursor already exists, it will fetch the next 10 documents that follow that document, if not, it will fetch the first 10

Dynamicly creating rows with Javascript then sending to Flask. No information being transfered

My issue is that my dynamically created rows ( by javascript) are not being sent to my back end python function.
I have created a script which creates a table row with 7 columns, in each column is a html input. These inputs will be used by the user to input information about products. ( serial number / part number etc...)
function Add_row() {
var tbl = document.getElementById('sct_components_table');
var iteration = tbl.tBodies[0].rows.length;
newRow = tbl.tBodies[0].insertRow(-1);
var newCell = newRow.insertCell(0);
newCell.classList.add("sct_components_input")
newCell.innerHTML = '0' + iteration;
var newCell1 = newRow.insertCell(1);
newCell1.classList.add("sct_components_input");
var el = document.createElement('input');
el.type = 'text';
el.name = 'quantity';
el.value = '';
newCell1.appendChild(el);
var newCell2 = newRow.insertCell(2);
newCell2.classList.add("sct_components_input");
var el2 = document.createElement('input');
el2.type = 'text';
el2.name = 'part_number';
newCell2.appendChild(el2);
var newCell3 = newRow.insertCell(3);
newCell3.classList.add("sct_components_input");
var el3 = document.createElement('input');
el3.type = 'text';
el3.name = 'serial_number';
newCell3.appendChild(el3);
var newCell4 = newRow.insertCell(4);
newCell4.classList.add("sct_components_input");
var el4 = document.createElement('textarea');
el4.type = 'text';
el4.name = 'description';
newCell4.appendChild(el4);
var newCell5 = newRow.insertCell(5);
newCell5.classList.add("sct_components_input");
var el5 = document.createElement('input');
el5.type = 'text';
el5.name = 'installed_by_cm';
newCell5.appendChild(el5);
var newCell6 = newRow.insertCell(6);
newCell6.classList.add("sct_components_input");
var el6 = document.createElement('input');
el6.type = 'text';
el6.name = 'installed_after_cm';
newCell6.appendChild(el6);
var newCell7 = newRow.insertCell(7);
newCell7.classList.add("sct_components_input");
var el7 = document.createElement('textarea');
el7.type = 'text';
el7.name = 'notes';
newCell7.appendChild(el7);
}
The inputs are collected by a flask framework with the following code
temp_multi_quantity = request.form.getlist('quantity')
temp_multi_part_number = request.form.getlist('part_number')
temp_multi_serial_number = request.form.getlist('serial_number')
temp_multi_description = request.form.getlist('description')
temp_multi_installed_by_cm = request.form.getlist('installed_by_cm')
temp_multi_installed_after_cm = request.form.getlist('installed_after_cm')
temp_multi_notes = request.form.getlist('notes')
If I manually create the table rows on the html page they are uploaded successfully. It is only the 'Javascript Rows' which are ignored.
This code mimics an example found at: http://www.mredkj.com/tutorials/tablebasics5.html
This example is old and uses php not python, so that could be where I have got confused, but I used wireshark on the page and it appeared to be submitting.
If anyone could shed some light as to what concept I have misunderstood / the mistake I have made, it would be appreciated.

Save data from new table row in local storage

I created an html table that automatically adds a new row from an input form. When I test it out, the new row is added but after I refresh the page, it's gone. How can I save the new row in local storage so I can keep the new data.
<script>
var table = document.getElementById("orders");
var row = table.insertRow(-1);
var Order_ID = row.insertCell(0);
var Order_Date = row.insertCell(1);
var Customer_Name = row.insertCell(2);
var Order_Balance_without_tax = row.insertCell(3);
var Downpayment_Balance = row.insertCell(4);
var Order_Delivered = row.insertCell(5);
var Delivery_Date = row.insertCell(6);
var Final_Order_Balance_with_tax = row.insertCell(7);
var Revenue_Check = row.insertCell(8);
var Payment_Received = row.insertCell(9);
var Receival_Date = row.insertCell(10);
var Check = row.insertCell(11);
var Bank_Deposit = row.insertCell(12);
var Deposit_Date = row.insertCell(13);
var Verification = row.insertCell(14);
var Verification_Date = row.insertCell(15);
Order_ID.innerHTML = '{{ID}}';
Order_Date.innerHTML = '{{OrderDate}}';
Customer_Name.innerHTML = '{{CustomerName}}';
Order_Balance_without_tax.innerHTML = '{{OrderBalance}}';
Downpayment_Balance.innerHTML = '{{Downpayment}}';
Order_Delivered.innerHTML = '{{Delivery}}';
Delivery_Date.innerHTML = '{{DeliveryDate}}';
Final_Order_Balance_with_tax.innerHTML = '{{FinalOrderBalance}}';
Revenue_Check.innerHTML = '{{RCheck}}';
Payment_Received.innerHTML = '{{PReceival}}';
Receival_Date.innerHTML = '{{PaymentDate}}';
Check.innerHTML = '{{CheckNum}}';
Bank_Deposit.innerHTML = '{{Deposit}}';
Deposit_Date.innerHTML = '{{DepositDate}}';
Verification.innerHTML = '{{Ver}}';
Verification_Date.innerHTML = '{{VerDate}}';
localStorage.setItem("data", $('#table').html());
</script>
I try this code and it works. note that I add most of code to addRow function and call it when needed. try these changes and tell me if they work.
<script>
var table = document.getElementById("orders");
if(localStorage.tableData==undefined){localStorage.tableData=table.innerHTML};
table.innerHTML = localStorage.tableData;
function addRow(){
var row = table.insertRow(-1);
var Order_ID = row.insertCell(0);
var Order_Date = row.insertCell(1);
var Customer_Name = row.insertCell(2);
var Order_Balance_without_tax = row.insertCell(3);
var Downpayment_Balance = row.insertCell(4);
var Order_Delivered = row.insertCell(5);
var Delivery_Date = row.insertCell(6);
var Final_Order_Balance_with_tax = row.insertCell(7);
var Revenue_Check = row.insertCell(8);
var Payment_Received = row.insertCell(9);
var Receival_Date = row.insertCell(10);
var Check = row.insertCell(11);
var Bank_Deposit = row.insertCell(12);
var Deposit_Date = row.insertCell(13);
var Verification = row.insertCell(14);
var Verification_Date = row.insertCell(15);
Order_ID.innerHTML = '{{ID}}';
Order_Date.innerHTML = '{{OrderDate}}';
Customer_Name.innerHTML = '{{CustomerName}}';
Order_Balance_without_tax.innerHTML = '{{OrderBalance}}';
Downpayment_Balance.innerHTML = '{{Downpayment}}';
Order_Delivered.innerHTML = '{{Delivery}}';
Delivery_Date.innerHTML = '{{DeliveryDate}}';
Final_Order_Balance_with_tax.innerHTML = '{{FinalOrderBalance}}';
Revenue_Check.innerHTML = '{{RCheck}}';
Payment_Received.innerHTML = '{{PReceival}}';
Receival_Date.innerHTML = '{{PaymentDate}}';
Check.innerHTML = '{{CheckNum}}';
Bank_Deposit.innerHTML = '{{Deposit}}';
Deposit_Date.innerHTML = '{{DepositDate}}';
Verification.innerHTML = '{{Ver}}';
Verification_Date.innerHTML = '{{VerDate}}';
localStorage.tableData=table.innerHTML;
};
</script>

Retrieve a variable value from a table cell in javascript

How do I retrieve a variable value from a table cell using javascript.
var clicks = new Array();
var click1;
var click2;
function addTableRow() {
click1 = parseInt(document.getElementById('caption').value),10;
click2 = parseInt(document.getElementById('caption1').value),10;
var clicks = [click1, click2];
clicks.push({c1:clicks[0], c2:clicks[1]});
var table = document.getElementById('table');
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var input = document.createElement('input');
input.setAttribute("type", "text");
input.style.width = "100px";
cell2.appendChild(input);
cell3.innerHTML = "x:" + clicks[0] + ", y:" + clicks[1];
var btnDelete = document.createElement('Button');
var btnDeleteText = document.createTextNode("Delete");
btnDelete.appendChild(btnDeleteText);
btnDelete.style.width = "80px";
cell4.appendChild(btnDelete);
btnDelete.onclick = function() {
var rowToDelete = this.parentNode.parentNode;
var parentReference = rowToDelete.parentNode;
parentReference.removeChild(rowToDelete);
var inputsInTable = document.getElementsByTagName('input');
for(i=0; i<inputsInTable.length; i++)
{
??????????????????????
}
}
}
Basically, when I add a row the clicks get stored in the array. When I delete a row, I need to update the array by rebuilding it.
I hope it's more clear now.
Any help would be very appreciated.
Marco

Categories