cep - fields disabled for user

Asked

Viewed 221 times

1

I am with following problem: The user will complete the zip code and will click 'search zip'.
A search will be made for the zip code, and the data will be placed in the fields: patio, neighborhood, etc., automatically.

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

I wonder if there’s 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
  • 1

    It has to be an input? why not put it in a div?

  • 1

    What code do you have so far?

  • There are cases where the zip code does not have the address, when it is small town, so the user will have to enter the address, I suggest validate this need in your application.

  • Throw the data from the backyard into a div, if you want to send this data to the server, put it in the div and in a Hidden field.

  • I put inpu html in question.

  • 1

    on the return of your function if it is different from null, you disable the fields.

  • 1

    shows its function searching for the zip

  • 2

    If you put this in a way that doesn’t change, you’re going to have problems. The zip code is full of things with problems. In fact, my zip code itself shows a street that is not mine on the major sites that use the post office pay base. As @Pedrocamarajunior said, predict the need to edit.

  • Very well noted by @Bacco. I have this function in my system, but always leave enabled for editing.

  • then durtto, that’s what I wanted, the person type the zip code, click the search button and automatically appears in the fields the information. in your case appears inactive the information and the user has the change zip button?

Show 5 more comments

3 answers

2

Just use the property disabled.

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

1

What you want is a disabled input. Check out 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>

Input "last name" is disabled and cannot be changed.

1

Following the previous answers, you just need to add a method disabled for the tag input, but by recommendation, if the information generated is not correct, it would be interesting that the user could 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’ll leave below, but you’ll only need to add a different color to the input (some dark gray).

Solution in CSS:

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

If you want a final solution, a jQuery can serve you, but still it would be easier the solution in HTML same. The advantage of the jQuery in this case, if the user does not inform the CEP and wants to fill in manually, you can remove the property of the disabled of input, leaving it active only if it fills the CEP field and selects auto-fill.

Solution in jQuery:

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

UPDATE OF JQUERY

At the time of answering and creating the code, I ended up getting a little bit in doubt whether the method attr was still the right one to use, but I saw that it cannot serve very well. A better method would be the prop.

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

Browser other questions tagged javascript java html html5

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