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

Asked

Viewed 14,288 times

21

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

Something like:

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

All these fields are in one form.

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

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

I do not know if I could be clear, but any doubt ask in the comments!

php javascript jquery html laravel-4

2 answers

11


Browser does not send disabled fields with disabled in the submission of the form, 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 attribute readonly.

Side effects:

  • The user may, however, click and select the content of the field.

  • In addition, the field styles will remain the originals, that is, the user may not notice that it is a read-only field. In this case, add a style to maintain usability, for example, leaving the bottom of the box a little grayish.

Example:

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

Example CSS class for reuse:

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

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

See the functional example of the above code in jsfiddle.

Safety considerations

One might argue that disabling fields on the screen is not a good practice from the Information Security point of view, as today a user can easily circumvent this limitation through the Developer Tool (F12), changing the properties of the field. This is partly correct.

The important thing is to understand that the need to disable fields is an essential part of the functioning of systems. It is not your goal ensure safety of that field’s information.

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

  • Excellent reply. Thank you very much!

  • 4

    But it is important to note that if the user has basic knowledge of Javascript using the browser console the user can change its field and send with the Form.

3

When disabled is used in a <input type=text> for example, this field cannot be rescued by $_POST/$_GET. The appropriate is to use the attribute readonly, this ensures that the field is accessible by php, and in HTML it cannot 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>

Browser other questions tagged php javascript jquery html laravel-4

You are not signed in. Login or sign up in order to post.