How to Completely Prevent Web Form Input Text Item change

Question

I have this simple web-form

<form id="MyFormDiv" method="post"> 
     <input type="number" name="cmp_no" id="id_cmp_no">
     <input type="text" name="cmp_lname"  maxlength="40 id="id_cmp_lname">  
     <input type="submit" name="submit" value="Save" id="submit-id-submit">
</form>

and this form will be used for both add and update.

When insert I have no problem, but when update I don't want to allow user to update or change the value of item which its id= "id_cmp_no"

I used javascript code to set its readonly property to true but that was not the 100% solution, because user can use browser inspect tool and see page source and change it's value before submitting the form, and therefore the readonly property is not useful.

Can I override it's onchange event to prevent change of it's value even if the value changed from page source using inspect tool.

Any one can help, thank you in advance

anything clientside can be changed if you don't want it changed don't offer it to the user as a form input — Lawrence Cherone, Aug 29 '20 at 20:48
That's why you need a server-side validation. The user also can do many things to manipulate that data. — Eldar, Aug 29 '20 at 20:48
Not only can form be fiddled with.... that post can be made numerous different ways programmatically without using the form at all — charlietfl, Aug 29 '20 at 21:05
But Like this thing is done with oracle apex, if I set item property to protected, then when I change it's value from page source, immediately after I change it, it raise an error and prevent page submit. — Saddam Meshaal, Aug 31 '20 at 07:30

score 1 · Answer 1 · answered Aug 30 '20 at 08:03

1

There is nothing that stops a user from changing values in browser, u can try solutions given in the above answers but be cautious user can dig out number of ways to do so like by using firebug/inspect element/ what ever..

What we can do is checking our values on server side and prompting user if they mismatch.

Shouting again ..

Never trust/depend on client....

answered Aug 30 '20 at 08:03

Saddam

1,174
7
14

But Like this thing is done with oracle apex, if I set item property to protected, then when I change it's value from page source, immediately after I change it, it raise an error and prevent page submit. – Saddam Meshaal Aug 31 '20 at 07:26

score 0 · Answer 2 · answered Aug 29 '20 at 23:38

If a user is skilled enough to open dev tools and change values from there, chances are they can also alter any JS code that prevents editing the readonly value.

So, there is no substitute to proper server-side validation.

You could check that the value is not being altered from the form's onsubmit event handler (see below), but keeping in mind what I and many commenters stated above.

$("form").on("submit", function(e) {
  //check value of the input
  if(this.someInput.value != 1) {
     //do something here
     //return false; if you want to block submit
  }
  return true;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="form">
  <input type="number" name="someInput" readonly value="1"/>
  <button type="submit">Submit</button>
</form>

How to Completely Prevent Web Form Input Text Item change

2 Answers2