We Keep Coding

Get number from every input in table

I have a table, which has an input at the end of each line.
Here is the input:
<td><input data-price='<?= floatval($row['Prix']); ?>' ?>' type="number" name="quantity" id="quantity"></td>
I have a script that takes the price of the data-price in the input and multiplies
it with the number in the input. Right now my script starts off by adding all of the prices, but then it multiplies the total by only the first input in my table.
How can I change my code so that it multiplies each price by the quantity in the input?
Here is the script:
document.getElementById("submit").onclick = function giveTotal() {
var total = 0;
var grandTotal = document.getElementById('grandTotal');
var quantity = document.getElementById('quantity');
var nodes = document.getElementsByName('quantity');
[].forEach.call(nodes, function(node) {
console.log(quantity.value);
console.log(node.dataset.price);
total += (parseFloat(node.dataset.price) * quantity.value)
})
grandTotal.innerHTML = total;
console.log('Total: ' + total);
};

IDs are unique -- no two elements can have the same ID. When you use document.getElementById(), it will return only the first element that matches that ID and no other.
You already have access to each input from your nodes variable, and you're already iterating over them in your forEach loop. So instead of multiplying by quantity.value, you should just be multiplying by node.value so that you're using the value of each specific input.

You need to select each table row by itself like this:
(In this example I assume your table has the id orders)
document.getElementById("submit").onclick = function giveTotal() {
// Get the table element (id="orders")
const $table = document.getElementById('orders');
// Get the grand total element
const $grandTotal = document.getElementById('grandTotal');
// Temporary variable
let total = 0;
// For each input element in the table add the price*value to total
table.querySelectorAll('input').forEach($input => {
total += (parseFloat($input.dataset.price) * $input.value)
});
// Write total to $grandTotal element
$grandTotal.innerText = total;
// Debug output
console.log('Total: ' + total);
};

You can get table rows and process them. Something like this.
document.getElementById('submit').onclick = function() {
var total = Array.from(document.querySelector('#cart tbody')
.querySelectorAll('tr')) //get array
.reduce((acc, cur) => acc + cur.querySelector('td:first-child').innerText * cur.querySelector('input').value, 0);
console.log(total);
};
<table id="cart">
<thead>
<tr>
<th>Price</th>
<th>Qty</th>
</tr>
</thead>
<tbody>
<tr>
<td>5.45</td>
<td><input name="qty" type="text" value="0" />
<!--number is ok too -->
</td>
</tr>
<tr>
<td>7.80</td>
<td><input name="qty" type="text" value="0" />
<!--number is ok too -->
</td>
</tr>
<tr>
<td>0.95</td>
<td><input name="qty" type="text" value="0" />
<!--number is ok too -->
</td>
</tr>
</tbody>
</table>
<button type="button" id="submit">Submit</button>

javascript format numbers from 8403.361344537816 to 8.403

I have a javascript to calculate taxes and it works like this
The html form
<td><input type="text" class="input-180" name="pbruto" id="pbruto" value="0"/></td>
<td><input type="text" class="input-180" name="pneto" id="pneto" value="0"></td>
<td><input type="text" class="input-180" name="piva" id="piva" value="0"></td>
The javascript code
<script>
var taxPerc = 1.19;
document.getElementById("pbruto")
.onkeyup = function(){
document.getElementById("pneto")
.value = parseFloat(document.getElementById("pbruto")
.value) * (1.00 / taxPerc)
document.getElementById("piva")
.value = parseFloat(document.getElementById("pbruto")
.value) - parseFloat(document.getElementById("pneto").value)
}
</script>
The problem is that the results I get from calculations are displayed like this
8403.361344537816
I need to get rid of those .361344537816 and format the number to 8.403 only
Any way to do this?
EDIT
No solutions yet

Lets say var x is holding the value, try:
x = parseInt(x) / 1000

It's easier to control the code, if you'd use variables instead of DOM to store values. I've re-written your code, and toLocaleString() method seems to do exactly what you want:
var taxPerc = 1.19;
document.getElementById("pbruto").addEventListener('input', function () {
var valNeto, valPiva,
elNeto = document.getElementById("pneto"),
elBruto = document.getElementById("pbruto"),
elPiva = document.getElementById("piva"),
valBruto = +(elBruto.value);
valNeto = valBruto * (1 / taxPerc);
valPiva = valBruto - valNeto;
elNeto.value = Math.round(valNeto).toLocaleString('de-DE');
elPiva.value = Math.round(valPiva).toLocaleString('de-DE');
});
label {
display: block;
}
<label>Bruto: <input id="pbruto" /></label>
<label>Neto: <input id="pneto" /></label>
<label>Piva: <input id="piva" /></label>

How to pass a values from two different function to third function in javascript?

I'm trying to code an exercise in html page with javascript, to calculate the mean of a random array of 6 numbers that generated from randomArray() function.
After the first loading of the page and when i click "new problem" button this function recalled to copy the random array in a cell of table.
I write calcMean to calculate the mean of the random array which was passed from randomArray() , and i make the form stop refreshing the page when i hit Enter key when i enter a input , and return the value of input by searchm()
but the problem now is , i want to take the mean ,maxi,mini and inans , to another function to compare the real answer with the user answer and if the condition is yes , something wrote on a div .
the second problem is , i want to take the mean value from calcMean() to show it on the input if i clicked "solution" button which call solution() method, what i must pass to the last function to go write.
<div >
<form action="" method="post" name="meanForm" onsubmit='return false' id="formmine">
<table width="100%" border="0" >
<tr>
<td colspan="3" style="background-color:#06F ;color:#FFF">Answer this problem</td>
</tr>
<tr>
<td style="color:green; font-size:20px">What is the mean of these numbers </td>
<td colspan="2" id="numbers">
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr id="answerANDpic">
<td height="62" colspan="3" align="center" > <input name="" type="text" size="15" maxlength="100" height="50" style=" border: solid #0C0 ; border-width:thin" id="answer" onkeydown="searchm(this)"/> </td>
</tr>
<tr>
<td colspan="3" ><div id ="explain" ></div></td>
</tr>
<tr>
<td> </td>
<td><input name="" type="button" id="newEx" style="background-color:green ; color:white" align ="left" value="New Problem" class="send_feed" onclick="randomArray(6,0,99)" /></td>
<td><input name="" type="button" id="solution" style="background-color:#606 ; color:#FFF " align="left" class="send_feed" value="Solution" onclick="solution()"/></td>
</tr>
</table>
</form>
</div>
but in javascript
var myNumArray = randomArray(6,0,99);
function random_number(min,max) {
return (Math.round((max-min) * Math.random() + min));
}
function randomArray(num_elements,min,max) {
var nums = new Array;
for (var element=0; element<num_elements; element++) {
nums[element] = random_number(min,max);
}
document.getElementById("numbers").innerHTML=nums;
calcMean(nums);
}
function calcMean(nums) {
var num=0;
for (var i=0;i<nums.length;i++) {
num += parseFloat( nums[i], 6 );
}
var divide=num/nums.length;
var mean=(parseInt(divide,10));
var maxi = Math.max.apply(Math,nums);
var mini = Math.min.apply(Math,nums);
return mean,maxi,mini;
}
function searchm(ele) {
if(event.keyCode == 13) {
// alert(ele.value); // i get the value and put it on alert
var inans= ele.value;
return inans;
}
}
function comparing(mean,maxi,mini,inans) {
if(inans==mean){document.getElementById("explain").innerHTML= "correct"+","+inans+"," +maxi+","+mini;
}
}
function solution() {
//some code to take the mean value(realvalue)from calcMean()
//what is parameter should i pass it when i click on solution button to pass it this function
}

Learn Objects https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects
with Objects you can return any kind of data types from your functions
for example
function calcMins (nums) {
// ...
return {mean: mean, maxi: maxi, mini: mini}
var values = calcMins(nums)
var mean = values.mean // and so on
at solution() you need to read your document.getElementById("numbers").innerHTML and run
calcNums(nums) from saved numbers. After that you may compare values.mean with your input mean
Not writing full code, cause it's exercise, discover the ways how to use functions, Objects, or Arrays, seems you are familiar with arrays
return [mean, maxi, mini] will work, try it too

You can change to something like this.
As others users said, you can't return multiple values, so convert it to an object
var valuesReturned = null; // initialize variable
function randomArray(num_elements,min,max) {
var nums = new Array;
for (var element=0; element<num_elements; element++) {
nums[element] = random_number(min,max);
}
document.getElementById("numbers").innerHTML=nums;
valuesReturned = calcMean(nums);
}
function calcMean(nums) {
var num=0;
for (var i=0;i<nums.length;i++) {
num += parseFloat( nums[i], 6 );
}
var divide=num/nums.length;
var mean=(parseInt(divide,10));
var maxi = Math.max.apply(Math,nums);
var mini = Math.min.apply(Math,nums);
return {"mean":mean, "maxi": maxi, "mini": mini}; //convert to an object
}
function solution() {
if(valuesReturned) {
// make your stuff
// valuesReturned.mean
// valuesReturned.mini
// valuesReturned.maxi
}
}
EDIt
For searchm() function
function searchm() {
if(event.keyCode == 13) {
var values = calcMean();
var inans= values.mini;
return inans;
}
}

Declare a new array in calcMean function and push all mean , mini , maxi
value in new array. And get these value in solution like this :
var myNumArray = randomArray(6,0,99);
var numarr=new Array();
function random_number(min,max) {
return (Math.round((max-min) * Math.random() + min));
}
function randomArray(num_elements,min,max) {
var nums = new Array;
for (var element=0; element<num_elements; element++) {
nums[element] = random_number(min,max);
}
document.getElementById("numbers").innerHTML=nums;
numarr= calcMean(nums);
}
function calcMean(nums) {
var num=0;
for (var i=0;i<nums.length;i++) {
num += parseFloat( nums[i], 6 );
}
var divide=num/nums.length;
var arr=new Array();
var mean=(parseInt(divide,10));
var maxi = Math.max.apply(Math,nums);
var mini = Math.min.apply(Math,nums);
arr.push(mean);
arr.push(maxi);
arr.push(mini);
return arr;
}
function searchm(ele) {
if(event.keyCode == 13) {
// alert(ele.value); // i get the value and put it on alert
var inans= ele.value;
return inans;
}
}
function comparing(mean,maxi,mini,inans) {
if(inans==mean){document.getElementById("explain").innerHTML= "correct"+","+inans+"," +maxi+","+mini;
}
}
function solution() {
alert(numarr[0]); //for mean value
alert(numarr[1]); // for maxi
alert(numarr[2]); // for maxi
}

Add spaces to javascript string depending on element width

I have a form to add users to a select list from 2 textboxes (Last name and First name).
When I click on the "+" button, it adds an option with the last name and first name specified to the select element below. Right now, it adds the option with only one white space between last and first name, but I would like the first name to be aligned with the above "First name" textbox.
Here's a fiddle with my sample code: http://jsfiddle.net/fx37j71s/12/
<table>
<tr>
<td>Last Name</td>
<td>First Name</td>
</tr>
<tr>
<td><input type="text" id="txtlastname" /></td>
<td><input type="text" id="txtfirstname" /></td>
<td><input type="button" value="+" onclick="addemployee();" /></td>
</tr>
<tr>
<td colspan="2"><select id="lbxname" size="5" style="width:500px"></select></td>
<td valign="top"><input type="button" value="-"onclick="removeemployee();" /></td>
</tr>
</table>
And the addemployee() function:
function addemployee()
{
var lastname = document.getElementById('txtlastname');
var firstname = document.getElementById('txtfirstname');
var select = document.getElementById('lbxname');
var option = document.createElement('option');
var text = document.createTextNode(lastname.value + ' ' + firstname.value);
option.appendChild(text);
select.appendChild(option);
}
Is there a way to achieve this in JS or jquery or maybe CSS? I have tried to add a fixed amount of spaces minus the amount of characters in Last name, but the actual width of the string depends on the characters (i.e. "PPPPP" is wider than "lllll" even though they both have 5 characters). I also found the "clientWidth" property, but I can't seem to make it work properly.
Thank you :)

Instead of creating textNode can set innerHTML
Something like:
function addemployee()
{
var lastname = document.getElementById('txtlastname');
var firstname = document.getElementById('txtfirstname');
var select = document.getElementById('lbxname');
var option = document.createElement('option');
option.innerHTML = padStr(lastname.value) + firstname.value;
select.appendChild(option);
}
function padStr(str){
while(str.length < 500){
str += ' ';
}
return str
}
DEMO

Based on charlietfl's answer and Evilzebra's comment, this worked for me:
Updated fiddle: http://jsfiddle.net/vcfpd450/2/
function addemployee()
{
var lastname = document.getElementById('txtlastname');
var firstname = document.getElementById('txtfirstname');
var select = document.getElementById('lbxname');
var option = document.createElement('option');
option.innerHTML=padStr(lastname.value) + firstname.value;
select.appendChild(option);
}
function padStr(str){
var x = str.length;
while(x < 31){
str+='&nbsp';
++x;
}
return str;
}
CSS:
#lbxname
{
font-family: monospace;
}
Basically, I add spaces to the string until I reach the desired width (31 in this case). Using a monospace font-family makes sure the width is consistent with the number of characters.

Getting Value from html form with the same name attribute under Loop

I have a form which displays multiple rows from database with 4 columns. From these record I need to write a new value in 4th column and update database record. But whenever I try, only First Row value can be updated/read. But not the other rows!! This can be due to the same "name=redirection" as it is given to each from "for loop". So, how can I get the values from other rows too??
for (int i=0; i<domains.size(); i++) {
domainprops = (String[]) domains.get(i);
%>
<table cellspacing="0" cellpadding="10" border="0" class="tableview" width="100%">
<td width="150"><input type="text" id="domains" name="domains" value="<%=domainprops[0]%>"></td>
<td width="160"><input type="text" name="defaulturl" value="<%=domainprops[1]%>" size="30"></td>
<td width="160"><input type="text" name="redirecturl" value="<%=domainprops[2]%>" size="30"></td>
<td width="160"> <input type="text" id="redirection" name="redirection"></td>
<td align="right"><a href="javascript:win2('recordUpdate.jsp?domains=<%=domainprops[0]%>
')">[Update]</a></td>
</tr>
</table>
<% } %>
Javascript Code :
function win2(urlPath) {
var winl = (screen.width-200)/2;
var wint = (screen.height-100)/2;
var settings = 'height=100,width=200,directories=no,resizable=no,status=no,scrollbars=no,menubar=no,location=no,top=' + wint + ',left=' + winl;
var changeurls=document.getElementById("redirection").value;
urlPath+='&rdirect='+changeurls
editWin.focus();
}

An ID in the DOM is supposed to be unique. If any element in the DOM has an ID, it should not be shared by any other element.
What I would suggest doing is appending your loop counter on to the end of the ID. This will ensure that every element you create in the DOM has its own unique ID.
for (int i=0; i<domains.size(); i++) {
domainprops = (String[]) domains.get(i);
...
<input type="text" id="domains_<%= i %>" name="domains" value="<%=domainprops[0]%>">
...
<input type="text" id="redirection_<%= i %>" name="redirection"></td>
</tr>
</table>
}
Next, pass the loop counter to the win2 function call:
<td align="right"><a href="javascript:win2('recordUpdate.jsp?domains=<%=domainprops[0]%>
', <%= i %>)">[Update]</a></td>
Finally, adjust the function itself...
function win2(urlPath, loopID) {
...
var changeurls=document.getElementById("redirection_" + loopID).value;
urlPath+='&rdirect='+changeurls
...
}

EDIT: Please read the answer referring to having multiple elements with the same ID. You should not be using multiple of the same ID.
You could use Javascript to iterate over redirection form elements.
function loopThroughRedirection(form) {
var result = "";
for (var i = 0; i < form.elements.length; i++) {
if (form.elements[i].name == 'redirection') {
// Do something to retrieve the value of redirection
result += form.elements[i].value
}
}
return result;
}