Jump to content

Calculations using form tables


Recommended Posts

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

 

Link to post
Share on other sites

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

 

Link to post
Share on other sites
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.

Link to post
Share on other sites

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

Link to post
Share on other sites

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

Link to post
Share on other sites
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.

 

Link to post
Share on other sites

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 by steveb1471
Link to post
Share on other sites

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;
        }

 

Link to post
Share on other sites

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

Link to post
Share on other sites
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.

Link to post
Share on other sites

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>

 

Link to post
Share on other sites

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.