Develop Reference

How to add dynamic rows and fetch values from them in order to store it in array using javascript

I like to dynamically add table elements with respect to input 'table_nos' and fetch the data from the table cells and store them in array. I tried creating one table element with a row first and tried cloning the initial one according to the 'table_nos' on document ready function. In order to fetch values, I replaced the ids of cloned rows with dynamic value of "row" + Index. I tried printing the array value in the console using the following code, but it didn't work.
I see that the row elements are assigned as row1, row2, row3.... But I think there is a problem in fetching the values.
Correct me if I am wrong. Thanks in advance.
HTML
<div id= "repeat">
<table id = "repeat_table" style = "width: 70%" >
<tr id = "row0">
<td style = "width: 30%">
<label lang= "nl" for="Client Name" style="color:Grey;font-size: 0.92rem;font-family:Helvetica Neue, Arial, sans-serif">Client Name</label>
<br><br>
<select id="Client Name" style="width:66.5%" name="Client_Name[]">
<option></option>
<option value="Client1">Client1</option>
<option value="Client2" >Client2</option>
<option value="Client3" >Client3</option>
<option value="Client4" >Client4</option>
</select>
</td>
<br><br>
<td style= "width:40%">
<label for="policy" style="color:Grey;font-size: 0.92rem;font-family:Helvetica Neue, Arial, sans-serif" class="required">Policy</label><br><br>
<select id="policy" style="width:50%" name="policy[]">
<option></option>
<option value="Gold">Gold</option>
<option value="Platinum" >Platinum</option>
<option value="Diamond" >Diamond</option>
</select>
</td>
</tr>
</table>
</div>
JavaScript to add rows
<script language="javascript" type="text/javascript">
$(document).ready(function(){
var linebreak = document.createElement("br");
var Index = 1;
$('#repeat').append(linebreak);
for(var i=1 ;i< table_nos; i++)
{
var $temp = $('#row0').clone().attr("id","row"+Index);
$('#repeat_table').append($temp);
$('#repeat_table').append(linebreak);
Index++;
}
});
</script>
Javascript to fetch values
function myJavascriptFunction()
{
var request=new XMLHttpRequest();
var result1 = [];
var result2 = [];
var nodelist = document.getElementById("repeat_table").querySelectorAll("tr");
for(var j = 0 ; j < nodelist.length ; j++)
{
var repeat_policy = nodelist[j].querySelector("#policy").find(':selected').value;
var repeat_clientname = nodelist[j].querySelector("#Client Name).find(':selected').value;
result1.push(repeat_clientname);
result2.push(repeat_policy);
}
console.log(result1);
console.log(result2);
}

Retrieving numeric value from array and adding itself

I seem to be struggling with getting this "financial tracker" to work. It's supposed to take all of a class's value ($0.00 +) and add it together. The list can grow by creating more '.cost' and add as many items that cost up to $9999. It will then replace the value of "debit".
My problem is that I can't use innerHTML to get/retrieve or replace any values or edit the html directly. I've tried from using .firstChild to .value, converting to global variables. I feel like I'm not understanding "appendChild" enough as I can't figure out how to change innerHTML without using innerHTML in this case.
This is for homework so I'd much rather have a description than just code and nothing to explain so I can progress and learn! I've spent days searching everywhere for this issue and nothing has quite solved it. My code is below:
var purchases = document.querySelector('tbody');
var debit = document.querySelector('.debits');
var credit = document.querySelector('.credits');
var purchCount = 0;
document.querySelector('.frm-transactions').addEventListener('submit', function (evt) {
let div,
checkbox,
label,
labelText,
purchText,
type,
trash;
labelText = evt.target.elements['description'].value;
type = evt.target.elements['type'].value.trim();
amount = evt.target.elements['currency'].value;
purchCount += 1;
if (labelText === '') {
labelText = 'Transaction ' + (purchCount);
}
tr = document.createElement('tr');
td1 = document.createElement('td');
td2 = document.createElement('td');
td3 = document.createElement('td');
td4 = document.createElement('td');
i = document.createElement('i');
label = document.createElement('label');
purchText = document.createTextNode(labelText);
typeText = document.createTextNode(type);
cost = document.createTextNode("$" + amount);
label.setAttribute('for', 'todo-' + purchCount);
tr.appendChild(td1).setAttribute('class', 'weee');
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
td1.appendChild(purchText);
td2.appendChild(typeText);
td2.setAttribute('class', type);
td3.appendChild(cost);
td3.setAttribute('class', 'cost');
td4.appendChild(i).setAttribute('class', 'delete fa fa-trash-o');
tr.appendChild(label);
purchases.appendChild(tr);
if (td2.classList == "debit") {
var totalamount = document.querySelector('input[name="currency"]').value;
var sum = 0;
for (var i = 0; i < totalamount.length; i++) {
sum += totalamount;
}
console.log(totalamount);
debit.firstChild.nodeValue += sum;
console.count(sum);
} else if (td2.classList == "credit") {
console.log(td2);
} else {
console.log('error');
}
evt.target.reset();
evt.preventDefault();
});
Example of the generated HTML:
<section class="wrapper">
<h1>Transaction Tracker</h1>
<form class="frm-transactions">
<fieldset>
<legend>Add Transaction</legend>
<div class="frm-group">
<input class="frm-control" type="text" name="description" size="30" placeholder="description" />
</div>
<div class="frm-group">
<select class="frm-control" name="type">
<option value="">type</option>
<option value="debit">debit</option>
<option value="credit">credit</option>
</select>
</div>
<div class="frm-group">
<i class="edit fa fa-dollar"></i>
<input class="frm-control" type="number" name="currency" min="0" max="9999" step="0.01" size="4" placeholder="0.00" />
</div>
<div class="frm-group">
<input class="frm-control" type="submit" value="add" />
</div>
<div class="error"></div>
</fieldset>
</form>
<h2>Transactions</h2>
<table class="transactions">
<thead>
<tr>
<td colspan="4" class="right">
Total debits: <span class="total debits">$0.00</span>
Total credits: <span class="total credits">$0.00</span>
</td>
</tr>
<tr>
<th>Description</th>
<th>Type</th>
<th class="amount">Amount</th>
<th class="tools">Tools</th>
</tr>
</thead>
</table>
</section>
Update, I'm now trying to figure out why the outcome of sum is showing in decimal places/duplicating itself.

Do you have to construct the DOM with JS?
The only way to get the value of a DOM element without innerHTML() is by using element.value. This means the value="some number" on the element itself must be set.
If you have to use your code to generate the HTML, adding a sample of what that HTML looks like would be nice so it is easier to reference instead of parsing it from your code.
As a side note, variable names like "ttt" are generally frowned upon.
Try to stick to normal human readable names that follow this structure: myVariableDoesThings.
EDIT: For your sum issue:
sum += totalamount; is incorrect. You are adding all of the elements to sum with that code.
If you change up your loop to the following it should work (was not sure how to post this without the example, you were also incorrectly adding a .value to your query selector):
var totalamount = document.querySelector('input[name="currency"]');
var sum = 0;
totalamount.forEach(element => sum += element.value);
forEach is like your for loop, but it passes the current item being iterated over into a lambda expression. To keep the for loop, you use totalAmount[i].value to access the current item in the iteration.

Height of dropdown box in multiselect option

Im using multiselect dropdown for my select control. Im adding options to select control in Javascript. Reading data from database through PHP and passing to javascript file. But the height of the options dropdown is small like i can only see 'Select All' check box with out any scrolling. But if i add the options in HTML itself, then the dropdown looks fine. What im missing here?
<script src="<?=BASE_URL?>dropdown/multiple-select.js"></script>
<link href="<?=BASE_URL?>dropdown/multiple-select.css" rel="stylesheet">
<div class="modal" id="SendmailModel" tabindex="-1" role="dialog" aria-labelledby="messageModelLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><li class="fa fa-times"/></button>
<h3 style="font-size: 17px;">Send Mail </h3>
</div>
<div class="modal-body">
<form id="mailcomposeForm" id="_id_">
<div class="control-group">
<label class="control-label">Event Details</label>
<div class="controls">
<table class="table table-condensed table-bordered table-striped" id="event_days_table" style="display: none;width:544px;font-size:14px;">
<tbody id="event_days_table_body">
</tbody>
</table>
</div>
</div>
<div class="control-group">
<label class="control-label" for="leave_status">Select Recipient(s)</label>
<select id="emplist" name="employee_name" value="" multiple="multiple">
</select>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" onclick="modJs.SendingMail();">Send</button>
<button class="btn" onclick="modJs.closemaildialog();">Not Now</button>
</div>
</div>
</div>
</div>
script type="text/javascript">
$(function() {
$('#emplist').change(function() {
}).multipleSelect({
width: '100%',
height:'100%'
});
});
</script>
In my Javascript file..
Conferencelisting.method('MailSuccessCallback', function(callBackData) {
var row = '<tr><th>From</th><td>_from_</td></tr><tr><th>To</th><td>_to_</td></tr><tr><th>Type</th><td>_type_</td></tr><tr><th>Created By</th><td>_created_</td><tr><th>Details</th><td>_details_</td></tr>';
var eventdetails = callBackData[0];
var html = "";
var trow = "";
for(var i=0;i<eventdetails.length;i++){
trow = row;
trow = trow.replace(/_from_/g,Date.parse(eventdetails[i].From).toString('d MMM yyyy <b>h:mm tt</b>'));
trow = trow.replace(/_to_/g,Date.parse(eventdetails[i].To).toString('d MMM yyyy <b>h:mm tt</b>'));
trow = trow.replace(/_type_/g,eventdetails[i].type);
trow = trow.replace(/_created_/g,eventdetails[i].employee);
trow = trow.replace(/_details_/g,eventdetails[i].reason);
html += trow;
}
$('#event_days_table_body').html(html);
$('#event_days_table').show();
//Adding employees name in selection box.
var emplist = callBackData[1];
var options = '';
for (var i = 0; i < emplist.length; i++) {
options += '<option value="' + emplist[i].id + '">' + emplist[i].name+ '</option>';
}
$("#emplist").html(options);
$('#SendmailModel').modal('show');
});
If i add options in HTML file like this..i can get exact dropdown with scrolls..
<select id="emplist" name="employee_name" value="" multiple="multiple">
<option value="ALEX">ALEX</option>
<option value="BOB">BOB</option>
<option value="DE">DE</option>
</select>

I solved myself. I think the height is not the problem , the data are not getting added. SO i changed options adding code in javascript file. Now it works.
var emplist = callBackData[1];
var options = '';
for (var i = 0; i < emplist.length; i++) {
$('#emplist').append( '<option value="' + emplist[i].id + '">' + emplist[i].name+ '</option>' );
}
$('#emplist').multipleSelect( 'refresh' );

How to select an option text matching those of an array value

I have an array with three elements, Im looping through that array to see the length of it so that it triggers a button click three times to dynamic add input select box. Each array value will go on each added select box and find if it match any option text if it does it have to select it. Below is my code not sure where I'm going wrong
var myArryValues = [
"Hello World",
"Javascript",
"Jquery"
]
for (var i = 0; i < myArryValues.length; i++) {
var bookIndex = 0;
$('#bookForm').on('click', '.mynewButton', function() {
$('.myDropdown').each(function(index) {
console.log("operatorString", operatorString);
var operatorCounter = 0;
var optionCounter = 0;
$(this).find('option').filter(function() {
if ($(this)[optionCounter] == myArryValues[operatorCounter]) {
$(this)[optionCounter].attr('selected', "selected");
operatorCounter++;
} else {
optionCounter++;
}
});
});
console.log("mynewButton");
bookIndex++;
var bookForm = $('#bookForm');
var $template = $('#bookTemplate'),
$clone = $template
.clone()
.addClass('myDropdown-row')
.removeClass('hide')
.attr('data-book-index', bookIndex)
.attr('id', '');
bookForm.append($clone);
// Update the name attributes
$clone
.find('[name="myDropdown"]').attr('name', 'myDropdown[' + bookIndex + '].myDropdown').end()
})
// Remove button click handler
.on('click', '.removeButton', function() {
$(this).parents('.form-group').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="row" id="bookForm" class="form-horizontal">
<div class="form-group">
<div class="col-md-2 button-div">
<button type="button" class="mynewButton rule-button">Add New
</button>
</div>
</div>
<!-- The template for adding new field -->
<div class="form-group hide" id="bookTemplate">
<div class="row field-row">
<div class="col-md-2">
<select class="myDropdown" name="myDropdown">
<option value="Hello World">Hello World</option>
<option value="Javascript">Javascript</option>
<option value="Jquery">Jquery</option>
</select>
</div>
</div>
</div>
</div>

Try This on your click function
var data = ['bar','baz'];
for (var i = 0; i < data.length; i++) {
var s = $('<select id="'+i+'"/>');
for (var j = 0; j < data.length; j++) {
if (i==j) {
$('<option />', {value: data[j], text: data[j],selected:'selected'}).appendTo(s);
}else{
$('<option />', {value: data[j], text: data[j]}).appendTo(s);
}
}
s.appendTo('body');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Need to take 2 values(prices) from 2 different onclick functions add then display the total in a table

I am making a shopping website, my products page has 2 products, when the user chooses a quantity from the drop down list and clicks the add to cart button the product image,description,price,quantity and total price(quantity * price) is added to a table row at the bottom of the page. My problem is showing the total of multiple selected products. I have created variables that store the total for each product in their own functions. if a user selects the first product all the information i mentioned shows with the total price in a row correctly but if the user then selects the second product the information is added to the table but the total price is replaced by second product instead of adding totals of both products. Is there a solution?
var count1 = 0;
var count2 = 0;
var count3 = 0;
var count4 = 0;
var quan;
var totalArray = [];
var priceArray = [13.99, 249.99];
console.log(priceArray);
console.log(priceArray[1]);
document.getElementById('btn3').onclick = function() {
if (count3 == 0) {
var table = document.getElementById("table"); //This adds a row after every click
var row = table.insertRow(0);
var product = row.insertCell(0);
var desc = row.insertCell(1);
var price = row.insertCell(2);
var quantity = row.insertCell(3);
count3++;
product.innerHTML = " <img src='images/mouse.jpg' id='img2' width='160px' height='200px'>";
desc.innerHTML = document.getElementById("desc3").innerHTML; //prints quantity
price.innerHTML = "$" + priceArray[0] + " per item"; //prints quantity
var selectedText = list3.options[list3.selectedIndex].innerHTML;
var selectedValue = list3.value;
quantity.innerHTML = selectedValue;
document.getElementById('hcart').innerHTML = "Your Cart (1) Product";
console.log(count3);
var total = selectedValue * 13.99;
totalArray[1] = total;
document.getElementById('total').innerHTML = parseInt(total);
} else {
alert("Product already entered");
}
};
//------------------------btn4-------------------------------------------------
var myQuantity;
var myPrice;
var total = 0;
document.getElementById('btn4').onclick = function() {
if (count4 == 0) {
var table = document.getElementById("table"); //This adds a row after every click
var row = table.insertRow(0);
var product = row.insertCell(0);
var desc = row.insertCell(1);
var price = row.insertCell(2);
var quantity = row.insertCell(3);
count4++;
product.innerHTML = " <img src='images/tab.jpg' id='img2' width='160px' height='200px'>";
desc.innerHTML = document.getElementById("desc4").innerHTML; //prints quantity
price.innerHTML = "$" + priceArray[1] + " per item"; //prints quantity
var selectedText = list1.options[list1.selectedIndex].innerHTML;
var selectedValue = list1.value;
quantity.innerHTML = selectedValue;
document.getElementById('hcart').innerHTML = "Your Cart (1) Product";
console.log(count4);
total = selectedValue * priceArray[1];
console.log(totalArray);
document.getElementById('total').innerHTML = parseInt(total);
} else {
alert("Product already entered");
}
};
<div id="prod2">
<div id="img">
<img src="images/mouse.jpg" id="img2">
</div>
<div id="desc">
<h3>Description</h3>
<p id="desc3">TeckNet TruWave technology: Provide precise, smart cursor control over many surface types. TeckNet CoLink technology: After pairing there's no need to re-establish pairing after a signal loss or shutdown.</p>
</div>
<div id="quan">
<h3>Price</h3>
<h5 id="p_amount3">CDN: $13.99</h5>
</div>
<div id="amount">
<h3>Purchase</h3>
<select name="quantity" id="list3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="button" id="btn3" value="Add to Cart">
</div>
</div>
<!---Product4---------------------------------------------->
<div id="prod2">
<div id="img">
<img src="images/tab.jpg" id="img2">
</div>
<div id="desc">
<h3>Description</h3>
<p id="desc4">Samsung Galaxy Tab A SM-T350NZAAXAR 8.0 inch 1.5 GHz, 16GB, Android 5.0 Lollipop Tablet, Smoky Titanium. Keep All Your Samsung Devices In Sync. Connecting your Samsung devices is easier than ever. With Samsung Side Sync 3.0 and Quick Connect, you
can share content and work effortlessly between your Samsung tablet</p>
</div>
<div id="quan">
<h3>Price</h3>
<h5 id="p_amount4">CDN: $249.99</h5>
</div>
<div id="amount">
<h3>Purchase</h3>
<select name="quantity" id="list1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="button" id="btn4" value="Add to Cart" onclick="total()">
</div>
</div>
</fieldset>
<!--Cart------------------------------------------------->
<h1 id="hcart">Your Cart(Empty)</h1>
<table cellpadding="4" cellspacing="4" border="0" id="myCart" style="width:100%">
<thead>
<tr>
<td>
<h4>Name</h4>
</td>
<td>
<h4>Description</h4>
</td>
<td>
<h4>Price</h4>
</td>
<td>
<h4>Quantity</h4>
</td>
</tr>
</thead>
</table>
<div id="lists">
<table style="width:100%" border="1px" id="table" height="10px">
</table>
<table style="width:100%" border="1px" id="table2" height="10px">
<tr>
<td>
<h4>Total</h4>
</td>
<td>
<h4 id="total">Empty</h4>
</td>
</table>

Create a global variable say cartTotal = 0
Then, before
document.getElementById('total').innerHTML = parseInt(total);,
you calculate cartTotal+=total and then do
document.getElementById('total').innerHTML = parseInt(cartTotal);
in both functions..
Here, the cartTotal will contain the total of all products added.