Do maths on a table created from a database PHP/MYSQL

[Adamhumbug]

HI All,

I have a very simple table with 3 cols, it has been created with a select * statement using php.

The first col is an item name

The second is a quantity

The third is a value

There is a div that is hidden that is being given a value - probably not the best way.

I would like, when you add a number to the quantity field, it gets multiplied by the value (hidden div) and outputs the line total.

This is what the html looks like for one line

			<tr>
				<td style="width:70%;">
					Item Name
				</td>
				<td class="text-center">
					<input id="moneyQty" type="text" value="2">
				</td>
				<td class="text-center">
					<div id="singleValue" style="display:none;">
						90.00
					</div><input id="lineTotal" type="text">
				</td>
			</tr>

The code i have at the minute is the following.

<script>
  if(document.getElementById('moneyOrderForm')){
    var singleValue = document.getElementById('singleValue').innerHTML;
    console.log(singleValue);
    var qty = document.getElementById('moneyQty').value;
    var total = qty * singleValue;
    console.log(total);
    document.getElementById('lineTotal').value = total; 
  }
</script>

This does show me the correct answer in the correct box.

The issue i have here is that get element by ID will be no good because there are many items being created.

I need a way for this to work accross many lines and havnt a clue how.

 

I know there are many things that need tidying up here but a nudge in the right direction would be appreciated.

 

Kind Regards

 

 

[requinix]

It means you can't use IDs anymore.

Consider this:

<tr>
	<td style="width:70%;">
		Item Name
	</td>
	<td class="text-center">
		<input name="moneyQty" type="text" value="2">
	</td>
	<td class="text-center">
		<input name="singleValue" type="hidden" value="90.00">
		<input name="lineTotal" type="text">
	</td>
</tr>

Inside the <tr> is a <input name=moneyQty>, a <input name=singleValue>, and a <input name=lineTotal>.

I don't know how you intend to trigger the Javascript to run, but if you can find the <tr> group you want to run it on, you can find a particular input with

tr_element_you_found.querySelector("input[name=whatever]")