How to disable a text field for editing using jQuery / JavaScript?

Question

How to disable a text field for editing using jQuery / JavaScript?

Navigation

#1 by (11 votes)
#2 by (3 votes)

21

Let's say I have a form with fields from 1 to 7.

Something like:

field-1
field-2
field-3
field-4
field-5
field-6
field-7

All of these fields are on a form.

With Laravel, sometimes I experienced situations when I disabled a field with the disabled property, I was not able to retrieve it through the Input array. So, to directly avoid this problem I would like to know if there is, and if there is, how, a way to block, via JS / jQuery, that a field be edited in the form. BUT, I will only know this (whether it should be disabled or not) at runtime.

Ex: According to the value of the field-2 field I may need to disable the field-3 , field-4 and field-5 fields for editing, but I will still need their values in the INPUT array, which will be assigned to have the same value as field-2 , in that case.

I do not know if I can be clear, but any questions ask in the comments!

php javascript html jquery laravel-4

asked by anonymous 03.02.2014 / 15:13

2 answers

3

When disabled is used in <input type=text> , for example, this field can not be redeemed by $_POST/$_GET . It is appropriate to use the readonly attribute, this ensures that the field is accessible by php, and in HTML it can not be edited.

<input type="text" id="nome" name="nome" readonly="readonly"  />

An example using pure js:

    <html>
    <head>
        <script type="text/javascript">
            function bloquearInput(){
                var input = document.getElementById('nome');
    
                if(input.readOnly){
                    input.readOnly = false;
                }else{
                    input.readOnly = true;
                }
    
            }
        </script>
    </head>
    <body>
    <form>
        <input type="text" id="nome" name="nome"  value="sem edição"/>
        <input type="button" onclick="bloquearInput();" value="bloquear/desbloquear">
    </form>
    </body>
    </html>

03.02.2014 / 15:17

What is the difference between const and readonly? What is an SVG?

score 11 · Accepted Answer

The browser does not send disabled fields with disabled in the form submission, so your first attempt did not work.

On the other hand, you do not need to use script to prevent changing a field. Instead, use the readonly attribute.

Side effects:

The user can, however, click and select the contents of the field.
In addition, the styles of the field will remain the originals, that is, the user may not realize that it is a read-only field. In that case, add a style to maintain usability, for example, leaving the bottom of the box a bit greyish.

Example:

<input type="text" value="Valor fixo" 
    style="background: #EEE; cursor: not-allowed; color: #777" readonly />

CSS class example for reuse:

.desabilitado {
    background: #EEE; 
    cursor: not-allowed; 
    color: #777;
}

This way you can keep the visual feedback for the user.

See the working example of the above code in jsfiddle .

Security Considerations

Someone may argue that disabling on-screen fields is not a good practice from the point of view of Information Security, since today a user can easily circumvent this limitation through the Developer Tool ( F12 ), changing the properties of the field. This is correct, in part.

The important thing is to understand that the need to disable fields is an essential part of the systems operation. It is not your goal to ensure the security of the information in that field.

This article aims to assist the front end developer with a purely visual element and does not exempt the back-end validations.