Problem with input with operation number in online operation

HTML & CSS
1

I have a form to operate a payment system through the Internet, with a field that receives a random number corresponding to the operation. Thus the customers click on a button to fill out the form, but the field with the operation number is already completed by Javascript.

The problem is that some users overwrite the field with other number or even with a message and the payment cannot be completed.

I would appreciate some help to prevent solve it.

Thanks very much.

2

Hi Jonathan.

Just apply the “readonly” attribute to the input element to prevent your users from modify its value.

They will see the content of the field – the number of the operation they are about to complete – but will not be able to interfere with it.

Example:


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

Obviously the number in the value must be implemented in other way since it is JS-generated,

3

Thanks José. I had thought of hiding the element with css.

4

Hiding the input element with css does not solve the problem, since the code is still on the page and visible by disabling css styles.

Anyway, if you want to hide the element, you can do it using a hidden input, which does not appear on the page.


<input [I]type="hidden"[/I] value="948594285942859245545245454"/>
5

Yes, but how many users would disable the styles or see the code?

6

It is not a problem of how many users or what the would do. Styling the page to hide the element is not the proper way to deal with the issue. You’d better use the readonly attribute to prevent the users to modify the value, adding also a label with a proper title for the element, such as “Operation Number”, as it is implemented in many online shops all over the Internet.

This way the value is displayed for the buyer to see it as part of the purchase information.

7

Thanks for the reply José. I have been reading about the subject, and seen that you were right.

Thanks for your help.

8

Probably there will be other ways to solve the problem, but I consider this one to be the simples and more efficient.

My pleasure.