cep - fields disabled for user

Question

cep - fields disabled for user

Navigation

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

1

I have the following problem: The user will complete the zip code and will click on 'search zip'. A zip search will be done, and the data will be placed in the fields: public place, neighborhood, etc., automatically.

It turns out that I do not want the user to change this information that was generated automatically. I already tried readonly and did not succeed, because the fields already appear as inactive.

I wonder if there is a way to do this kind of treatment.

<!-- Text input-->
<div class="form-group">
  <label class="col-md-2 control-label" for="logradouro">Logradouro</label>  
  <div class="col-md-7">
    <input id="logradouro" name="logradouro" placeholder="" class="form-control input-md" required="required" type="text" readonly>
  </div>
</div>

Thank you.

javascript java html html5

asked by anonymous 22.12.2015 / 17:24

3 answers

Hide PHP error log AngularJS consume RESTful in different domains

score 2 · Answer 1

Just use the disabled property.

    <input id="numero" type="text" disabled="disabled" />
    <input id="cidade" type="text" disabled="disabled" />
    <input id="logradouro" type="text" disabled="disabled" />

score 1 · Answer 2

What you want is a disabled in input. Take only this example:

 <form action="action.html">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname" disabled><br>
  <input type="submit" value="Submit">
</form>

The input "last name" is disabled and can not be changed.

score 1 · Answer 3

Following the previous answers, you only need to add a disabled method to the input tag, but on recommendation, if the generated information is not correct, it would be interesting for the user to correct the fields (Especially if it is a field Required ).

Solution in HTML :

<input id="logradouro" name="logradouro" placeholder="" class="form-control input-md" required="required" type="text" disabled>

You can also create a CSS solution like the one I'm going to leave here, but you just need to add a different color to the input (a dark gray).

Solution in CSS :

#logradouro{
   pointer-events: none;
   tab-index: -1;
}

If you want a final solution, a jQuery can serve you, but it would still be easier to resolve with% w / w%. The benefit of HTML in this case is that, if the user does not enter the zip code and prefers to fill in manually, you can remove the jQuery property from the disabled , leaving it active only if it populates the field Zip and select autocomplete.

Solution in input :

$('#logradouro').attr('disabled', 'disabled'); //Adiciona a propriedade disabled.
$('#logradouro').removeAttr('disabled'); //Remove a propriedade disabled.

JQUERY UPDATE

At the time of replying and creating the code, I ended up getting a bit in doubt if the jQuery method was still the right one to use, but I saw that it can not serve very well. A better method would be attr .

$('#logradouro').prop('disabled', true); //Adiciona a propriedade
$('#logradouro').prop('disabled', false); //Remove a propriedade