We Keep Coding

how to get array values, on input field

So I have multiple table data insert I want to get input value on some field so I can calculate on another field. How can I do that if that is an array field?
I've tried using javascript but it's only working on first field (not array field).
function tot() {
var txtFirstNumberValue = document.getElementById('price').value;
var txtSecondNumberValue = document.getElementById('qty').value;
var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue);
if (!isNaN(result)) {
document.getElementById('total').value = result;
}
}
$(document).ready(function(){
$("#btn-add-form").click(function(){
var addi = parseInt($("#addi-form").val());
var nextform = addi + 1;
$("#insert-form").append("<b>Item Price " + nextform + " :</b>" +
"<input type='text' name='names[]' required>"
"<input id='price' type='text' name='price[]' onkeyup='tot();' required>"
"<input id='qty' type='text' name='qty[]' onkeyup='tot();' required>"
"<input type='text' name='total[]' required>"
$("#addi-form").val(nextform);
});
$("#btn-reset-form").click(function(){
$("#insert-form").html("");
$("#addi-form").val("1");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="btn-add-form">Add</button>
<button type="button" id="btn-reset-form">Reset</button><br><input type="text" name="names[]" required>
<input id="price" type="text" name="price[]" onkeyup="tot();" required>
<input id="qty" type="text" name="qty[]" onkeyup="tot();" required>
<input id="total" type="text" name="total[]" required>
<div id="insert-form"></div>
I expect that way works on added array table but it's not, it only affects field on my first table.

You can not assign the same ID to multiple DOM elements on the same page. I have updated your code a bit to use the item number with the ID. Like, for item 1 ID is price, for item 2 ID is price-2, for item 3 ID is price-3 and so on. Same done with qty and total.
You may try this code:
function sum_total() {
var totalSum = 0;
var calcTotalSum = document.getElementsByClassName("calc-total");
var totalItems = calcTotalSum.length;
var i = 0;
while(i < totalItems) {
if (calcTotalSum[i].value !== "") {
totalSum = totalSum + parseInt(calcTotalSum[i].value);
}
i += 1;
}
if(totalSum > 0) {
console.log("Total Sum is: ", totalSum);
}
}
function tot(event) {
var itemNo = event.target.getAttribute("data-item");
var txtFirstNumberValue = "";
var txtSecondNumberValue = "";
if (itemNo) {
txtFirstNumberValue = document.getElementById('price-' + itemNo).value;
txtSecondNumberValue = document.getElementById('qty-' + itemNo).value;
} else {
txtFirstNumberValue = document.getElementById('price').value;
txtSecondNumberValue = document.getElementById('qty').value;
}
var result = parseInt(txtFirstNumberValue) * parseInt(txtSecondNumberValue);
if (!isNaN(result)) {
if (itemNo) {
document.getElementById('total-' + itemNo).value = result;
} else {
document.getElementById('total').value = result;
}
}
sum_total();
}
$(document).ready(function(){
$("#btn-add-form").click(function(){
var addi = parseInt($("#addi-form").val());
var nextform = addi + 1;
$("#insert-form").append("<b>Item Price " + nextform + " :</b>" +
"<input type='text' name='names[]' required>" +
"<input id='price-" + nextform + "' data-item='" + nextform + "' type='text' name='price[]' onkeyup='tot(event);' required>" +
"<input id='qty-" + nextform + "' data-item='" + nextform + "' type='text' name='qty[]' onkeyup='tot(event);' required>" +
"<input id='total-" + nextform + "' class='calc-total' type='text' name='total[]' required>"
);
$("#addi-form").val(nextform);
});
$("#btn-reset-form").click(function(){
$("#insert-form").html("");
$("#addi-form").val("1");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="btn-add-form">Add</button>
<button type="button" id="btn-reset-form">Reset</button><br>
<input type="hidden" name="addi-form" id="addi-form" value=1 required>
<input type="text" name="names[]" required>
<input id="price" type="text" name="price[]" onkeyup="tot(event);" required>
<input id="qty" type="text" name="qty[]" onkeyup="tot(event);" required>
<input id="total" class="calc-total" type="text" name="total[]" required>
<div id="insert-form"></div>
Hope, it helps you.
EDITED: sum_total function to calculate the sum of the total amount.

I presume that you want to trigger the tot() function on the newly added table rows. For that purpose you need to:
call tot() function to bind to the newly added elements after they have been appended. Or use the jQuery bind method.
Use .class in place of #id attributes on the elemnts so that you can iterate through all of them using the class selector

Create array from Dynamic table

How can I create an array from this table/form? The onclick function formData() from the dynamic table only returns a concatenated string. I need to create an associative array in JSON using the 'device' variable as key, however I'll settle for any sort of array at all. Clearly, I'm not very good at this...
function createInputTable()
{
var num_rows = document.getElementById('rows').value;
var tableName = document.getElementById('conn_input_device').value;
var column_number = 2;
var tdefine = '<form id="form"><table id="table" border = "1">\n';
var theader = '<tr><th>No</th><th>Input</th><th>Output</th></tr>\n';
var caption = '<caption><input id="device" value ="' + tableName + '" /></caption>';
var tbody = '';
var tfooter = '</table>';
var createNewDevice = '<button onclick="formData();">Form Data</button></form>'
var i = 0;
for (var i= 0; i < num_rows; i++)
{
tbody += '<tr><td>' + (i+1) + '</td><td><input class="cell" id="i'+ i + '" type = "text"/></td>';
tbody += '<td><input class="cell" id="o'+ i + '" type="text"/></td></tr>\n';
}
document.getElementById('wrapper').innerHTML = caption + tdefine + theader + tbody + tfooter + createNewDevice;
}
function formData()
{
var cellData = document.getElementById("form");
//var device = document.getElementById('device').value;
//var j;
var obj = [];
for(j=0; j< cellData.length; j++)
{
obj += cellData[j].value;
}
var json = JSON.stringify(obj);
alert (json);
//document.getElementById('result').innerHTML = json;
}
<form id="tableGen" name="table_gen">
<label>Connecting device: <input type = "text" name = "conn_input_device" id = "conn_input_device"/></label><br />
<label>Number of inputs: <input type="text" name="rows" id="rows"/></label><br />
<input name="generate" type="button" value="Create Input Table!" onclick='createInputTable();'/>
</form>
<div id="wrapper"></div>

1) This my answer how do this on VueJS and jQuery
2) Vanilla js - CODEPEN - DEMO
// Get DOM elements
const $el = [
'#tmpl',
'#user-count',
'#people-count',
'#form-items',
'#btn-add',
'#form',
].reduce((res, item) => {
const method = item.startsWith('#')
? 'querySelector'
: 'querySelectorAll'
const key = item
.replace(/\W/ig, ' ').trim()
.replace(/\s+\w/g, v => v.trim().toUpperCase())
res[key] = document[method](item)
return res
}, {})
// Variable for dynamic template
const tmpl = $el.tmpl.innerHTML.trim()
// Click on Add new button
$el.btnAdd.addEventListener('click', () => {
const peopleCount = +$el.peopleCount.value
const html = Array(peopleCount)
.fill(tmpl)
.join('')
$el.formItems.insertAdjacentHTML('beforeend', html)
})
// Submit form
$el.form.addEventListener('submit', e => {
e.preventDefault()
alert('Submit form by ajax or remove this method for default behavior')
})
// Add form click (it's need for dynamic handler on child elements)
$el.form.addEventListener('click', e => {
// Delete behaviors
if (e.target.classList.contains('btn-del') && confirm('Are you sure?')) {
e.target.closest('.row').remove()
}
})
<div id="app">
<div>
<div>
<button id="btn-add">Add new user</button>
<label>Number of People:</label>
<input type="number" id="people-count" value="1" min="1">
</div>
<form id="form">
<div id="form-items" data-empty="Users list is empty"></div>
<button>Send</button>
</form>
</div>
</div>
<script type="text/x-template" id="tmpl">
<div class="row">
<label>
Name:
<input class="people" name="name[]">
</label>
<label>
Surname:
<input class="people" name="surname[]">
</label>
<label>
Email:
<input type="email" class="people" name="email[]">
</label>
<button class="btn-del">Delete</button>
</div>
</script>
<style>
.people {
width: 80px;
}
#form-items:empty + button {
display: none;
}
#form-items:empty:before {
content: attr(data-empty);
display: block;
}
</style>

I have edited your code,
function createInputTable()
{
var num_rows = document.getElementById('rows').value;
var tableName = document.getElementById('conn_input_device').value;
var column_number = 2;
var tdefine = '<form id="form"><table id="table" border = "1">\n';
var theader = '<tr><th>No</th><th>Input</th><th>Output</th></tr>\n';
var caption = '<caption><input id="device" value ="' + tableName + '" /></caption>';
var tbody = '';
var tfooter = '</table>';
var createNewDevice = '<button onclick="formData();">Form Data</button></form>'
var i = 0;
for (var i= 0; i < num_rows; i++)
{
tbody += '<tr><td>' + (i+1) + '</td><td><input class="cell" id="i'+ i + '" type = "text"/></td>';
tbody += '<td><input class="cell" id="o'+ i + '" type="text"/></td></tr>\n';
}
document.getElementById('wrapper').innerHTML = caption + tdefine + theader + tbody + tfooter + createNewDevice;
}
function formData()
{
var cellData = document.getElementsByTagName("tr");
var obj = [];
for(var i=0;i<cellData.length-1;i++){
obj.push(document.getElementById("i"+i).value);
obj.push(document.getElementById("o"+i).value);
}
alert(JSON.stringify(obj));
}
<form id="tableGen" name="table_gen">
<label>Connecting device: <input type = "text" name = "conn_input_device" id = "conn_input_device"/></label><br />
<label>Number of inputs: <input type="text" name="rows" id="rows"/></label><br />
<input name="generate" type="button" value="Create Input Table!" onclick='createInputTable();'/>
</form>
<div id="wrapper"></div>

BookAddress using localStorage (adding users)

I am making a contact list in which I will be saving the contacts, but when I save one or more contact and refresh the page it doesn't save. I tried to put it in the local storage but it doesn't work. Can anyone help me with this?
HTML:
<br><br>
Name: <input id = "name" name = "name" type = "text">
<br><br>
Gender: <input name = "gender" type = "radio" value = "Male"> Male
<input name = "gender" type = "radio" value = "Female"> Female
<br><br>
Age: <input id = "age" name = "age" type = "text">
<br><br>
Number: <input id = "number" name = "number" type = "text">
<br><br>
Contact Type: <select id = "Contact_Type" name = "Contact_Type">
<option>none</option>
<option>Friend</option>
<option>Business</option>
<option>Educational</option>
</select>
<br><br>
Address: <input id = "Address" name = "Address" type = "text">
<br><br>
Post Code: <input id = "Post_Code" name = "Post_Code" type = "text">
<br><br>
Marital Status: <select id = "Marital_Status" name = "Marital_Status">
<option>none</option>
<option>Single</option>
<option>in relationship</option>
<option>Engaged</option>
<option>Married</option>
</select>
<br><br>
<input type = "button" value = " Reset " onclick = "ResetForm()">
<input type = "button" value = " Add " onclick = "AddData(), saveList()">
<input type = "button" value = "Remove contact" onclick = "Remove()">
</form>
JS:
function AddData() {
var x = document.getElementById("age").value;
var y = document.getElementById("name").value;
var letters = '/^[a-zA-Z]+$/';
if ((parseInt(x) != (x)) && (y == parseInt(y))) {
alert("Wrong Value Entered");
} else {
var rows = "";
var name = document.getElementById("name").value;
var gender = document.querySelector('input[name="gender"]:checked');
gender = gender ? gender.value : '';
var age = document.getElementById("age").value;
var number = document.getElementById("number").value;
var Contact_Type = document.getElementById("Contact_Type").value;
var Address = document.getElementById("Address").value;
var Post_Code = document.getElementById("Post_Code").value;
var Marital_Status = document.getElementById("Marital_Status").value;
rows += "<td>" + name + "</td><td>" + gender + "</td><td>" + age + "</td><td>" + number +"</td><td>" + Contact_Type + "</td><td>"+ Address + "</td><td>" + Post_Code+ "</td><td>" + Marital_Status +" </td>";
var tbody = document.querySelector("#list tbody");
var tr = document.createElement("tr");
tr.innerHTML = rows;
tbody.appendChild(tr)
saveList();
}
}
var saveList = function () {
"use strict";
var appts = JSON.stringify(contact);
if (appts !== "") {
localStorage.contact = appts;
} else {
window.alert("Could not save appointments at this time");
}
};
function ResetForm() {
document.getElementById("contact").reset();
}

Your code has several errors.
HTML table is not found.
You're invoking saveList function two times (in button event and at the end of AddData function).
You aren't passing the contact parameter to the saveList function.
You should read Clean Code Book for improve your coding =).
The code should be the next (you could check the key "contact" in your browser).
HTML:
<br>
<br> Name:
<input id="name" name="name" type="text">
<br>
<br> Gender:
<input name="gender" type="radio" value="Male"> Male
<input name="gender" type="radio" value="Female"> Female
<br>
<br> Age:
<input id="age" name="age" type="text">
<br>
<br> Number:
<input id="number" name="number" type="text">
<br>
<br> Contact Type:
<select id="Contact_Type" name="Contact_Type">
<option>none</option>
<option>Friend</option>
<option>Business</option>
<option>Educational</option>
</select>
<br>
<br> Address:
<input id="Address" name="Address" type="text">
<br>
<br> Post Code:
<input id="Post_Code" name="Post_Code" type="text">
<br>
<br> Marital Status:
<select id="Marital_Status" name="Marital_Status">
<option>none</option>
<option>Single</option>
<option>in relationship</option>
<option>Engaged</option>
<option>Married</option>
</select>
<br>
<br>
<table id="list">
<tbody>
</tbody>
</table>
<input type="button" value=" Reset " onclick="ResetForm()">
<input type="button" value=" Add " onclick="AddData()">
<input type="button" value="Remove contact" onclick="Remove()">
JS:
<script>
function AddData() {
var x = document.getElementById("age").value;
var y = document.getElementById("name").value;
var letters = '/^[a-zA-Z]+$/';
if ((parseInt(x) != (x)) && (y == parseInt(y))) {
alert("Wrong Value Entered");
} else {
var rows = "";
var name = document.getElementById("name").value;
var gender = document.querySelector('input[name="gender"]:checked');
gender = gender ? gender.value : '';
var age = document.getElementById("age").value;
var number = document.getElementById("number").value;
var Contact_Type = document.getElementById("Contact_Type").value;
var Address = document.getElementById("Address").value;
var Post_Code = document.getElementById("Post_Code").value;
var Marital_Status = document.getElementById("Marital_Status").value;
rows += "<td>" + name + "</td><td>" + gender + "</td><td>" + age + "</td><td>" + number + "</td><td>" + Contact_Type + "</td><td>" + Address + "</td><td>" + Post_Code + "</td><td>" + Marital_Status + " </td>";
var tbody = document.querySelector("#list tbody");
var tr = document.createElement("tr");
tr.innerHTML = rows;
tbody.appendChild(tr)
contact = {name:name, gender:gender, age:age, number:number, type:Contact_Type, address: Address, zip: Post_Code, marital: Marital_Status};
saveList(contact);
}
}
var saveList = function(contact) {
"use strict";
var appts = JSON.stringify(contact);
if (appts !== "") {
localStorage.contact = appts;
} else {
window.alert("Could not save appointments at this time");
}
};
function ResetForm() {
document.getElementById("contact").reset();
}
</script>
Now you should program the function to read the localStorage.

insertRow() not working with FOR loop

I am trying to write a JavaScript code to add multiple rows according to the number submited in an input text box. I am trying to do that by using a FOR loop but for some reason it does not work. Can you explain to me why it does not insert as many rows as the value from input text box??? Here is my code:
<!DOCTYPE html>
<html>
<head>
<br><meta charset=utf-8 />
<title>Insert rows in a Table</title>
</head>
<body>
<table id="table" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
</table><br>
<form>
Type in a number:<input id="input" type="text" value=""}>
<input type="button" onclick="insert_Row()" value="add row(s)">
</form><br/>
<p id="p"></p>
<script>
var tableId = document.getElementById("table");
function insert_Row(){
var input = document.getElementById("input").value;
var number = Number(input);
for(i=0;i<number;i++){
var ii = i+1;
var newTR = table.insertRow(i);
var newTD1 = newTR.insertCell(i);
var newTD2 = newTR.insertCell(ii);
newTD1.innerHTML = "Row " + i + " Cell "+ i;
newTD2.innerHTML = "Row " + i + " Cell "+ ii;
};
};
</script>
</body>
</html>

The problem is irrespective of the row number, cells should start from 0,1,2 and so on which is not happening in your code. For the 0th iteration your code works fine, but later on, the cells do not start from 0. Hence the problem
Fix: Since you plan to have only 2 cells for each row, do it like this:
var tableId = document.getElementById("table");
function insert_Row() {
var input = document.getElementById("input").value;
var number = Number(input);
for (i = 0; i < number; i++) {
var j = 0; // First Cell
var k = 1; // Second Cell
var newTR = table.insertRow(i);
var newTD1 = newTR.insertCell(j);
newTD1.innerHTML = "Row " + i + " Cell " + j;
var newTD2 = newTR.insertCell(k);
newTD2.innerHTML = "Row " + i + " Cell " + k;
};
};
<table id="table" border="1">
</table>
<br>
<form>
Type in a number:
<input id="input" type="text" value=""/>
<input type="button" onclick="insert_Row()" value="add row(s)">
</form>
<br/>
<p id="p"></p>

The issue is with your document.getElementById declarations.
Also, it sounds like you want to insert the rows at the end of your table. In which case, your code will look like this.
var table = document.getElementById("table");
var numRows = document.querySelectorAll("tr").length;
function insert_Row(){
var input = document.getElementById("myInput").value;
var number = Number(input);
for (var i = numRows; i < number; i++) {
var ii = 0;
var ij = 1;
var newTR = table.insertRow(i);
var newTD1 = newTR.insertCell(ii);
var newTD2 = newTR.insertCell(ij);
newTD1.innerHTML = "Row " + (i + 1) + " Cell "+ (ii +1);
newTD2.innerHTML = "Row " + (i + 1) + " Cell "+ (ij + 1);
};
};
To use document.getElementById, you need to add an id attribute to your input tag like so.
<input id="myInput" type="button" onclick="insert_Row()" value="add row(s)">
Here is the updated fiddle
http://jsfiddle.net/vgwk00zm/2/

Javascript Calculate Date and Send value to textbox

I'm having Javascript with this code:
function addRowss(frm) {
var start = new Date(document.myform.bookstart.value);
var ends = new Date(document.myform.bookend.value);
var starts = document.myform.bookstart.value;
var yeara = starts.substring(0, 2);
var montha = starts.substring(3,6);
var datea = starts.substring(7,11);
var num3 = (ends - start)/1000/60/60/24;
var i;
for(i=0;i <= num3; i++)
{
var theday = yeara+'-'+getnumo(montha)+'-'+datea;
var resday = new Date(theday);
rowNum ++;
var row = '<p id="rowNum'+rowNum+'">Date: <input type="text" class="datepick" name="qty[]" id="date'+rowNum+'" value="'+theday+'"> Price: <input type="text" name="name[]" value="'+frm.add_name.value+'"> <input type="button" value="Remove" onclick="removeRow('+rowNum+');"></p>';
jQuery('#itemRows').append(row);
yeara++;
}
}
What I want to do is text name[] will be automatically filled by my start date to my end date. For example, if I fill '06-Aug-2015' at start input and '06-Sep-2015' at end input, it will result about 30 textbox field which it's value will be filled by its date... so it will result:
[2015-08-06][ empty ]
[2015-08-07][ empty ]
[2015-08-08]
...
[2015-09-06][ empty ]
Note: [ ] = textbox
Right now I can add many textbox (attachment pic), but I can't set the value of this textbox as I want. Any idea?

You should write a function to parse that format to a Date object, it's a non–standard format so no guarantee that the Date constructor will parse it correctly in all browsers. Then create a function to create a date string from a Date object in the format you require. Now you can generate the rows and just call the functions to add the formatted strings, incrementing the date by one day as you go along.
Here's how I'd rewrite your code to do that, you can get rid of the rowNum variable, I've modified the remove listener and function so it's not required.
// '06-Sep-2015' to Date
function parseDMY(s) {
var months = {jan:0, feb:1, mar:2, apr:3, may:4, jun:5, jul:6, aug:7, sep:8, oct:9, nov:10, dec:11};
var b = s.split('-');
return new Date(b[2],months[b[1].toLowerCase().substring(0,3)],b[0]);
}
// Date to '06-Sep-2015'
function formatDate(date) {
var months = ['Jan','Feb','Mar','Apr','May','Jun', 'Jul','Aug','Sep','Oct','Nov','Dec'];
function z(n){return (n<10? '0' : '') + n;}
return z(date.getDate()) + '-' + months[date.getMonth()] + '-' + date.getFullYear();
}
function addRows(frm) {
var start = parseDMY(frm.bookstart.value);
var ends = parseDMY(frm.bookend.value);
var markup = '';
var num3 = Math.round((ends - start)/8.64e7);
var rowNum = 0;
for(var i=0; i <= num3; i++) {
var theday = formatDate(start);
++rowNum;
markup += '<p id="rowNum' + rowNum + '">Date: <input type="text" class="datepick" name="qty[]" id="date' +
rowNum + '" value="' + theday + '"> Price: <input type="text" name="name[]" value="' +
frm.add_name.value + '"> <input type="button" value="Remove" onclick="removeRow(this);"></p>';
start.setDate(start.getDate() + 1);
}
document.getElementById('itemRows').innerHTML = markup;
}
function removeRow(el) {
var node = el.parentNode;
node.parentNode.removeChild(node);
}
<form id="bookingForm">
<table>
<tr><td>Start date<td><input name="bookstart" value="05-Aug-2015">
<tr><td>End date<td><input name="bookend" value="08-Aug-2015">
<tr><td><input name="add_name" value="the name">
<tr><td><input type="reset"><td><input type="button" value="Add rows" onclick="addRows(this.form)">
</table>
<div id="itemRows"></div>
</form>