3

I have an HTML form that calculates total quantity and price. I can put this total into an input field to be submitted. However, I don't want the user to be able to change it. If i put it in a div and display it, it's not submitted with the form.

How do I display the total and submit it without letting the user change it?

I'm probably missing something basic here. Any help appreciated.

wibberding
  • 815
  • 3
  • 10
  • 17

2 Answers2

5

If you want no security (via tamper prevention) use the readonly attribute:

HTML5

<input type="text" value="MY_DATE" readonly>

HTML4

<input type="text" value="MY_DATE" readonly="readonly" />

The type="text" can be omitted, but I personally find it helps newer developers see what type the input is at first glance.

Your best bet (for proper security) is to either encrypt or sign the data and send it as a hidden form element. Then once it comes back to the server you can either decrypt it (to keep using it) or check the signature to ensure it hasn't been tampered with.

Then from a frontend point of view you can just make the data not an input (or readonly) and then you should be golden. The technique is used a lot by web frameworks such as CakePHP when it supplies the id in a hidden element, and signs it to ensure no tampering.

Server

signed = sha(date, salt);

Frontend

input[type="hidden"].value = signed;
input[type="text"][readonly].value = date;

Server (on submit)

if(signed === sha(POST[date], salt) {
    //date has not changed
} else {
    // date has changed
}

For a11y (accessibility) you should still use a form element when showing data related to what is being sent off, so using a text input is advised over a div. Using readonly is far better off than disabled as disabled will remove the input from the request all together, resulting in your server not receiving it. See here.

Here is a quick snippet of how to do it in PHP.

Server

$salt = '...'; //This should be stored securely in your application.
$date = ... //However you are storing your date.
$signed_date = hash('sha512', $salt . $date);

Frontend

<input type="hidden" value="<?php echo $signed_date; ?>" name="signed_date" />
<input type="text" value="<?php echo $date; ?>" readonly name="date" />

Server (on submit)

$salt = '...';
$date = &$_POST['date'];
$signed_date = &$_POST['signed_date'];

if(hash('sha512', $salt . $date) === $signed_date) {
    echo "wooo!";
} else {
    echo "ohhh";
}
Community
  • 1
  • 1
jshthornton
  • 1,284
  • 11
  • 29
  • Did you know that user's tampering fields you do not want them to tamper can cause huge security risks? – jshthornton Jul 06 '14 at 15:02
  • 1
    well it's a given fact that ANY data which comes from the browser **must** be validated and cannot be trusted. that is a fact. it's not something I should even mention since it's so basic like breathing air. So, we are only left with client-side coding here. – vsync Jul 06 '14 at 15:06
  • 1
    You say that. But OP clearly does not have too much experience. Never assume a person's knowledge, guide them through every step of the process and show them the pros and cons of a situation. – jshthornton Jul 06 '14 at 15:30
  • I agree. but you don't need all this, since the server shouldn't be doing anything with the data anyway. – vsync Jul 06 '14 at 16:03
  • 1
    They server does need to do something, it needs to process the date. You have no idea on OP's setup. For all we know he has a stateless system which requires the client to send all the data required, and is never held in either memory or the database. – jshthornton Jul 07 '14 at 02:23
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/56861/discussion-between-jshthornton-and-vsync). – jshthornton Jul 07 '14 at 03:12
4

Give the input a readonly attribute:

<input readonly value='cannot be changed' />

vsync
  • 118,978
  • 58
  • 307
  • 400