HTML: Dynamic calculations on the page

[BrownZeus]

Hey all,

 

I have a webpage where I want to calculate a value based off inputs from a form. However I don't want the constants to appear in the served file.

I know this would have to be achieved with a Javascript function

i.e I don't want someone to inspect the element change the constant and mess with calculations

 

TIA

[Mira Yurizaki]

If I'm understanding this, you take some inputs from a user and calculate it with some constants?

 

If you don't want someone to mess with the constants, then the inputs have to be sent to a server to be processed or the server has to send the constants over every time a calculation is being made. Otherwise unless there's some dire reason why you don't want the user mucking with these values, leave them somewhere on the served file.

[keskparane]

If you don't want the constants to be seen then you can't ever send them to the user. Javascript could be used to call but why bother when you already have a form?. The form should submit to a server that returns the result.

[BrownZeus]

1 hour ago, keskparane said:

If you don't want the constants to be seen then you can't ever send them to the user. Javascript could be used to call but why bother when you already have a form?. The form should submit to a server that returns the result.

 

2 hours ago, M.Yurizaki said:

If I'm understanding this, you take some inputs from a user and calculate it with some constants?

 

If you don't want someone to mess with the constants, then the inputs have to be sent to a server to be processed or the server has to send the constants over every time a calculation is being made. Otherwise unless there's some dire reason why you don't want the user mucking with these values, leave them somewhere on the served file.

Well the form is essentially an order form. I want the end user to be able to see a calculated amount before submitting.

 

And I forgot to clarify in the original post, this is for a school extra credit project, this information isn't for real use, I just really need the points (a max of 40 points towards my final exam), but I also would like to learn while I'm at it.

[Mira Yurizaki]

5 minutes ago, BrownZeus said:

 

Well the form is essentially an order form. I want the end user to be able to see a calculated amount before submitting.

 

And I forgot to clarify in the original post, this is for a school extra credit project, this information isn't for real use, I just really need the points (a max of 40 points towards my final exam), but I also would like to learn while I'm at it.

Then you have to hard code the formula into the files. Otherwise how else is going to perform the calculation?

[BrownZeus]

2 minutes ago, M.Yurizaki said:

Then you have to hard code the formula into the files. Otherwise how else is going to perform the calculation?

Just to make sure we're entirely on the same page. There is no way for the user to see calculations dynamically, and would need a "preview your order" kind of page, yes?

[Mira Yurizaki]

1 minute ago, BrownZeus said:

Just to make sure we're entirely on the same page. There is no way for the user to see calculations dynamically, and would need a "preview your order" kind of page, yes?

Define "dynamically."  I'm basing my responses on this apparent requirement:

 

3 hours ago, BrownZeus said:

i.e I don't want someone to inspect the element change the constant and mess with calculations 

I don't know if you are saying you don't want someone messing with the source code by going into the debug options in the browser or if you're saying you don't want to make a user change the result or something by going to the debug options and changing the HTML.

[BrownZeus]

2 minutes ago, M.Yurizaki said:

Define "dynamically."  I'm basing my responses on this apparent requirement:

I have 2 input fields, number of originals(a), and number of copies(b).

 

I want to display  a * b * x, where x is a double-type constant as some form of text (y).

 

The behavior I'm looking for is if someone changes a or b, y will also be recalculated without page refresh.

>Set a

>Set b

> y is calculated and displayed

>change a || b --> y is auto-recalculated and dsiplayed no refresh necessary

2 minutes ago, M.Yurizaki said:

I don't know if you are saying you don't want someone messing with the source code by going into the debug options in the browser or if you're saying you don't want to make a user change the result or something by going to the debug options and changing the HTML.

I don't want the user to be able to change my constant value x to mess with the calculation.

Based of what you told me so far, is my only option to send my form input to my server, have the calculations done, and then displayed to a separate "review" page?

[Mira Yurizaki]

1 minute ago, BrownZeus said:

-snip-

Yes, you need a server or similar in order to perform the calculation somewhere the client can't see or know. You don't have to have a separate page.

 

If this is not an actual requirement for the assignment, then I suggest not bother trying to do it.

[BrownZeus]

1 minute ago, M.Yurizaki said:

Yes, you need a server or similar in order to perform the calculation somewhere the client can't see or know. You don't have to have a separate page.

 

If this is not an actual requirement for the assignment, then I suggest not bother trying to do it.

Alright I'll forego the external server calculation, and I'll just do it with locally stored values, and just do it with a JS function 

[keskparane]

1 hour ago, BrownZeus said:

 

Well the form is essentially an order form. I want the end user to be able to see a calculated amount before submitting.

Look into ajax then. You can make a call to the server and update your field when you get the result.

[keskparane]

Although if I gather what you're trying to achieve here I'm not sure that's what you need to do. Perhaps you may be after some sort of form value validation on the values that reach the server?

[vorticalbox]

3 hours ago, M.Yurizaki said:

Yes, you need a server or similar in order to perform the calculation somewhere the client can't see or know. You don't have to have a separate page.

 

If this is not an actual requirement for the assignment, then I suggest not bother trying to do it.

I would actually just leave it all client side then  recalculate the cost in the server side before actually processing.

 

Either than or you can use Web sockets to send the form on every change and get the new total.

[FlappyBoobs]

The best approach is to do both server and client side code. You use javascript to calculate the totals on the fly so that the user has a good experience on your site (i.e. no page reloading to get the value and instant updating of total price) but then in your server side code you would validate that calculation, then you show the user an order confirmation page with your server side calculation in it. They would then confirm the order on that page, if they change any values and get the wrong total amount then, well, they know what they did, and the amount passed to your payment processor will be from your server side code and there will be no way to change that amount successfully so there are no issues as the customer will always pay the correct amount, even if they play around with the amounts on the page. 

 

Securing your website against people changing values on the page is not something you need to worry about, because everything related to the functionality of the page should be validated server side, where the user cannot access anything. If someone gets charged the "wrong" amount, then tries to claim your site showed a different price then they will have a tough time because you have the order total, confirmation page then a second confirmation of the amount with the card processor. "refusing a sale" is a perfectly valid way to prevent someone trying to rip you off by editing code as well, so if you are not using a card processor but invoicing instead then there will be an additional manual check of the order value.

[PAEz]

22 hours ago, BrownZeus said:

Alright I'll forego the external server calculation, and I'll just do it with locally stored values, and just do it with a JS function 

Just make sure that the constant x is declared in a function (the one that does the calc) and isnt defined as a global variable (scope kept to the function) so that they cant change its value from the console.

[myselfolli]

8 hours ago, PAEz said:

Just make sure that the constant x is declared in a function (the one that does the calc) and isnt defined as a global variable (scope kept to the function) so that they cant change its value from the console.

It will take like three more clicks to change the value of the variable if you do this.

 

Basically, anything that is done on the client side is insecure and can be altered ('hacked') in some way. If you want to do something securely, do it server side.