3 Replies - 2199 Views - Last Post: 29 May 2012 - 07:27 AM

#1 DarenR  Icon User is offline

  • D.I.C Lover

Reputation: 433
  • View blog
  • Posts: 3,006
  • Joined: 12-January 10

How do you sum multiple html inputs with javascript?

Posted 29 May 2012 - 07:10 AM

The following javascript works for 1 field but i have mulitple. I was wonderign how to have the single function work for all the fields. Also I have a section which adds dynamic rows which also need to have the fields total out.

Javascript

function find_totals()

{
		

document.getElementById('PS_FORM/Bid1/LineT').value = parseFloat(document.getElementById ('PS_FORM/Bid1/quant').value)*parseFloat(document.getElementById ('PS_FORM/Bid1/unit').value);


}




Html
<tr>
		<td class="lbltxt" ><input type="text"  style ="width:75px"   id="PS_FORM/Bid1/quant" name = "PS_FORM/Bid1/quant" value="{{PS_FORM/Bid1/quant}}"     onchange="find_totals();"  > </td>
		<td class="lbltxt"><input type="text" style ="width:450px"  id="PS_FORM/Bid1/desc"  name = "PS_FORM/Bid1/desc"  value="{{PS_FORM/Bid1/desc}}"></td> 
		<td class="lbltxt"><input type="text" style ="width:75px"   id="PS_FORM/Bid1/unit" name= "PS_FORM/Bid1/unit"  value="{{PS_FORM/Bid1/unit}}" onchange="find_totals();" ></td>
		<td class="lbltxt"><input type="text" style ="width:75px"   id="PS_FORM/Bid1/LineT" name= "PS_FORM/Bid1/LineT" value="{{PS_FORM/Bid1/LineT}}"></td>
		<td>&nbsp;</td>

	</tr>

	<tr>
		<td class="lbltxt"><input type="text"  style ="width:75px"   id="PS_FORM/Bid2/quant" name = "PS_FORM/Bid2/quant" value="{{PS_FORM/Bid2/quant}}"  onchange="find_totals();">  </td>
		<td class="lbltxt"><input type="text" style ="width:450px"  id="PS_FORM/Bid2/desc"  name = "PS_FORM/Bid2/desc"  value="{{PS_FORM/Bid2/desc}}"></td> 
		<td class="lbltxt"><input type="text" style ="width:75px"   id="PS_FORM/Bid2/unit" name= "PS_FORM/Bid2/unit" value="{{PS_FORM/Bid2/unit}}" onchange="find_totals();"></td>
		<td class="lbltxt"><input type="text" style ="width:75px"   id="PS_FORM/Bid2/LineT" name= "PS_FORM/Bid2/LineT" value="{{PS_FORM/Bid2/LineT}}"></td>
		<td>&nbsp;</td>
	</tr>




dynamic rows

	<td class="lbltxt"><input type="text"  style ="width:75px"   id="PS_FORM/Bid[@ID=1]/quant_more" name = "PS_FORM/Bid[@ID=1]/quant_more"  value="{{PS_FORM/Bid[@ID=1]/quant_more}}" onchange=" find_totals();" > </td>
		<td class="lbltxt"><input type="text" style ="width:450px"  id="PS_FORM/Bid[@ID=1]/desc_more"  name = "PS_FORM/Bid[@ID=1]/desc_more"   value="{{PS_FORM/Bid[@ID=1]/desc_more}}"></td> 
		<td class="lbltxt"><input type="text" style ="width:75px"   id="PS_FORM/Bid[@ID=1]/unit_more" name= "PS_FORM/Bid[@ID=1]/unit_more"  value="{{PS_FORM/Bid[@ID=1]/unit_more}}" onchange=" find_totals();"></td>
		<td class="lbltxt"><input type="text" style ="width:75px"   id="PS_FORM/Bid[@ID=1]/LineT_more" name= "PS_FORM/Bid[@ID=1]/LineT_more"  value="{{PS_FORM/Bid[@ID=1]/LineT_more}}"></td>
		    <td class="lbltxt"><input type="checkbox" class="trans"  id="remove_row" name="remove_row" value="PS_FORM/Bid[@ID=1]" size="12"/>Remove</td>



thanks in advance

Is This A Good Question/Topic? 0
  • +

Replies To: How do you sum multiple html inputs with javascript?

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3486
  • View blog
  • Posts: 10,055
  • Joined: 08-June 10

Re: How do you sum multiple html inputs with javascript?

Posted 29 May 2012 - 07:17 AM

personally, I would give the input elements I want to sum a common class name and then calculate the sum in a loop (should also suffice for IE)
var inp = document.querySelectorAll(".the_class");
var sum = 0;
for (var l = inp.length; l--;)/> {
    sum += +inp[l].value;
}
if (isNaN(sum)) {
    throw new Error("failed to calculate sum. invalid argument.");
}

Was This Post Helpful? 0
  • +
  • -

#3 DarenR  Icon User is offline

  • D.I.C Lover

Reputation: 433
  • View blog
  • Posts: 3,006
  • Joined: 12-January 10

Re: How do you sum multiple html inputs with javascript?

Posted 29 May 2012 - 07:25 AM

<td class="lbltxt"><input type="text"  style ="width:75px"   id="PS_FORM/Bid[@ID=1]/quant_more" name = "PS_FORM/Bid[@ID=1]/quant_more"  value="{{PS_FORM/Bid[@ID=1]/quant_more}}" onchange=" find_totals();" > </td>



The td has a class lbltxt because this is required by the employer


<td class="lbltxt>


can you add a class to the input? I have never done anything like this before since I was mainly the vb.net guy but switching to html javascript.


<input type="text"  style ="width:75px"   id="PS_FORM/Bid[@ID=1]/quant_more" name = "PS_FORM/Bid[@ID=1]/quant_more"  value="{{PS_FORM/Bid[@ID=1]/quant_more}}" onchange=" find_totals();" > 


Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3486
  • View blog
  • Posts: 10,055
  • Joined: 08-June 10

Re: How do you sum multiple html inputs with javascript?

Posted 29 May 2012 - 07:27 AM

if the TD has a class and the input is always a child element you could also do:
var inp = document.querySelectorAll(".the_class input");

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1