Calculations using form tables

[steveb1471]

Hi

I was wondering if somebody could give me some help.

I have a form with the following table for users to input 

			<td width="118" style="text-align: left"><input type="text" name="item1cost"></td>
	        <td width="118" style="text-align: left"><input type="text" name="item1Charge"></td>
			<td width="118" style="text-align: left"><input type="text" name="item1sum""></td>

is there a way to have the 3rd field auto populated by calculations made from the data a user puts in the 1st and 2nd field ?

The calculation i am actually looking for i can explain easier in excel terms

Lets say 

item1cost is in A2

Item1charge is in B2

Item1sum is in C3

A3 would be the cell i want populating with the calculation of 
=SUM(B2-(A2*1.295))

any help would be greatly appreciated

thanks

 

[maxxd]

Give your form elements IDs, and use JavaScript. When the second input changes, calculate the sum and insert it into the third input (which in the case should be read-only).

[steveb1471]

Hi

Please forgive my knowledge in this sector but but i have tired the following and am getting no out put, could you advise what it is i am missing

html code

<td width="118" style="text-align: left"><input id="item1cost" type="text" name="item1cost"></td>
<td width="118" style="text-align: left"><input id="item1charge" type="text" name="item1Charge"></td>
<td width="118" style="text-align: left"><input id="item1sum" type="text" name="item1sum"></td>

  

The script i am using is 

<script type="text/javascript">
	function Shift1GP () {
		var item1cost = document.getElementByid('item1cost').value;
		var item1charge = document.getElementByid('item1charge').value;
		var totalcharge = (item1charge - (item1cost * 1.295)).value;
		document.getElementByid('item1charge').innerHTML = "totalcharge" = $";
		}
</script>

 

What i am doing wrong?

Thanks

 

[Phi11W]

1 hour ago, steveb1471 said:

var item1cost = document.getElementByid('item1cost').value;
var item1charge = document.getElementByid('item1charge').value;

var totalcharge = (item1charge - (item1cost * 1.295)).value;

document.getElementById('itemcharge').innerText = "Total Charge = " + totalcharge ; 

item1cost and otem1charge are both String values, taken from the "value" property of the Element.  Performing arithmetic on them may or may not work as expected.  Better to convert them (parse* functions) to the correct Data Type first. 

There's no need for the ".value" bit on the totalcharge line.  You're not reading a DOM Element property here - just working with variables. 

You're not actually displaying the calculated value! 

document.getElementByid('item1charge').innerText = "Total Charge = " + totalcharge ;

 

Setting InnerHTML is risky - it leaves your site open to Cross-Site Scripting Attacks. 

Regards, 
   Phill  W.

[steveb1471]

I have done some changes to try and get this working am still hitting i block. I thought it was the document.getElementByID() not having a full path and have changed the inner text. Still no luck

I have added a button so the input field is blank until button pressed then should populate with calculation.

HTML

<td width="70" style="text-align: left"><input type="text" id="item1cost" name="item1cost" placeholder="item 1 cost"></td>
<td width="70" style="text-align: left"><input type="text" id="item1charge" name="item1charge" placeholder="item 1 charge"></td>
<td width="70" style="text-align: left"><input type="text" id="item1sum" Id="add" Value ="" name="item1sum" placeholder="item 1 sum"></td>
<td width="70" style="text-align: left" scope="row"><INPUT TYPE="button" NAME="button" Value="=" onClick="sum()"></td>
  

The script i am using is

script

<script type="text/javascript">
		function sum () {
			var item1cost = document.formcharges.item1cost.value;
			var item1charge = document.formcharges.item1charge.value;
			var sum = (item1charge - (item1cost * 1.295));
			document.getElementById('add').value = sum;
		}
	</script>

 

Any ideas where i am going wrong?

 

Thansk

 

Steve

[Barand]

Your third item is suffering from a surfeit of ids

[steveb1471]

I always thought the a item could have a id and a name 

so would you suggest changing the code to

<td width="70" style="text-align: left"><input type="text" id="item1sum" Id="add" Value ="" name="item1sum" placeholder="item 1 sum"></td>

<td width="70" style="text-align: left"><input type="text" id="item1sum" Id="item1sum" Value ="" name="item1sum" placeholder="item 1 sum"></td>

with the script being

<script type="text/javascript">
		function sum () {
			var item1cost = document.formcharges.item1cost.value;
			var item1charge = document.formcharges.item1charge.value;
			var sum = (item1charge - (item1cost * 1.295));
			document.getElementById('item1sum').value = sum;
		}
	</script>

thanks

[Phi11W]

2 hours ago, steveb1471 said:

I always thought the a item could have a id and a name

Indeed it can and it absolutely should have. 

However, whilst an item should legitimately have a name and an id, you appear to also have given [one of] yours an Id. 
DOM navigation is case-sensitive, so ... 

"id" != "Id"

... and GetElementById only uses id. 

 

2 hours ago, steveb1471 said:

... would you suggest changing the code to

<td width="70" style="text-align: left"><input type="text" id="item1sum" Id="add" Value ="" name="item1sum" placeholder="item 1 sum"></td>

Something more like this:  

<td><input type="text" id="item1sum" value="" name="item1sum" placeholder="item 1 sum"></td>

Attribute names (id, value) are case-sensitive and may appear only once within each Element.  Pick one id for the element and stick to it. 

Use CSS for styling, rather than hard-coding it into every element. 

 

Regards, 
   Phill  W.

 

[steveb1471]

Hi

Thank you for your help on this.

I still cannot get this to work.

To get my head around it i have created a new sheet so i can test to try and understand.

 

<?php
 require "header.php";
?>

<main>
	<script type="text/javascript">
		function Sum () {
			var Pay = document.formpay.Pay.value;
			var Charge = document.formpay.Charge.value;
			var sum = (Charge - (Pay * 1.295));
			document.GetElementByid('Total').value = Sum;
		}
	</script>

			<form class="formpay" action="" method="post">
				<br>
				<br>
			<tr>
				<td><input type="text" id="Pay" value="" name="Pay" placeholder="Pay"></td>
			</tr>
			<tr>
				<td><input type="text" id="Charge" value="" name="Charge" placeholder="Charge"></td>
			</tr>
			<tr>
				<td><input type="text" id="Total" value="" name="Total" placeholder="Total"></td>
			</tr>

			<INPUT TYPE="button" NAME="button" Value="Calculate" onClick="Sum()">

		</form>

	</main>



			

 

When i press the calculate button the total field it is still not populating 

anyone see where i am going wrong?

thanks

Edited August 23, 2020 by steveb1471

[Barand]

Does it help if you force it to use numeric values?

function Sum () {
            var Pay = parseFloat(document.formpay.Pay.value);
            var Charge = parseFloat(document.formpay.Charge.value);
            var sum = (Charge - (Pay * 1.295));
            document.GetElementByid('Total').value = Sum;
        }

 

[steveb1471]

Hi Barand

Thanks for the fast reply

I have changed the script as suggested and when i press the calculate button i still get no values back 

I manually populate the pay field and the charge field and press the calculate button hoping it will populate the total field

Thanks

[steveb1471]

I have changed the case too of getelement to see if that helped

it is now

document.getElementById

but still no different

[maxxd]

var sum = (Charge - (Pay * 1.295));
document.GetElementByid('Total').value = Sum;

`sum` is not the same as `Sum`. You should be getting an error in your console - open your developer's tools.

[Barand]

Your form needs name="formpay" for document.formpay to work.

It also doesn't like a varaiab;e called "sum" and a function called "Sum".

Try

    <script type="text/javascript">
        function calcSum () {
            var Pay = document.formpay.Pay.value;
            var Charge = document.formpay.Charge.value;
            var sum = (Charge - (Pay * 1.295));
            document.getElementById('Total').value = sum;
        }
    </script>

            <form name="formpay" action="" method="post">
                <br>
                <br>
            <table>
            <tr>
                <td><input type="text" id="Pay" value="" name="Pay" placeholder="Pay"></td>
            </tr>
            <tr>
                <td><input type="text" id="Charge" value="" name="Charge" placeholder="Charge"></td>
            </tr>
            <tr>
                <td><input type="text" id="Total" value="" name="Total" placeholder="Total"></td>
            </tr>
            </table>
            <input type="button" name="button" Value="Calculate" onClick="calcSum()">

        </form>

 

[steveb1471]

Thats done it!

Thank you so much!

Head has been mashed for days over it!

Sorry one last question

Whilst i plan on putting a paragraph in to say numbers only, is there a way to make this work if sombody enters say £10 in the pay and £20 in the Charge for the result to display as a £

Many thanks