Avoid editing in the field

Asked

Viewed 145 times

1

I am trying to do the following: the user type his zip code, and then it is filled automatically, estado(select) cidade(select), rua(input) and bairro(input), when the user enters his zip code and for example is a complete zip (City, State, Street and Neighborhood) the fields were disabled for editing using Disable. When the zip code is only of the City (City and state) the fields Neighborhood and street are enabled to type. For this was using this script:

$("#ZipCode").change(function () {
    var zipCodeValue = $(ZipCode).val();
    var url = '@Url.Action("ReturnZipCode", "Ajax")';
    $.ajax({
        type: 'POST',
        url: url,
        data: { zipCode: zipCodeValue },
        dataType: 'json',
        success: function (data) {
            document.getElementById("City").disabled = true;
            document.getElementById("State").disabled = true;
            $('#State').val(data.StateID).change();
            setTimeout(setCity, 1000);
            function setCity() {//insere a cidade após 3 segundos
                $('#City').val(data.CityID).change();
                $('#CityID').val($('#City').val());
            }

            if (data.AddressName != "") {
                document.getElementById("Address").disabled = true;
                $('#Address').val(data.AddressName);
            } else {
                document.getElementById("Address").disabled = false;
                $('#Address').val("");
            }

            if (data.Neighborhood != "") {
                document.getElementById("Neighborhood").disabled = true;
                $('#Neighborhood').val(data.Neighborhood);
            } else {
                document.getElementById("Neighborhood").disabled = false;
                $('#Neighborhood').val("");
            }
        },
        error: function (data) {
            alert('Error' + data);
        }
    });
});

With the help of Lucas Costa and Gabriel Falieri I changed from Desable to readonly, and it was partially resolved, as you can see in the code:

$("#ZipCode").change(function () {
    var zipCodeValue = $(ZipCode).val();
    var url = '@Url.Action("ReturnZipCode", "Ajax")';
    $.ajax({
        type: 'POST',
        url: url,
        data: { zipCode: zipCodeValue },
        dataType: 'json',
        success: function (data) {
            document.getElementById("City").readOnly = true;
            document.getElementById("State").readOnly = true;
            $('#State').val(data.StateID).change();
            setTimeout(setCity, 1000);
            function setCity() {//insere a cidade após 3 segundos
                $('#City').val(data.CityID).change();
                $('#CityID').val($('#City').val());
            }

            if (data.AddressName != "") {
                document.getElementById("Address").readOnly = true;
                $('#Address').val(data.AddressName);
            } else {
                document.getElementById("Address").readOnly = false;
                $('#Address').val("");
            }

            if (data.Neighborhood != "") {
                document.getElementById("Neighborhood").readOnly = true;
                $('#Neighborhood').val(data.Neighborhood);
            } else {
                document.getElementById("Neighborhood").readOnly = false;
                $('#Neighborhood').val("");
            }
        },
        error: function (data) {
            alert('Error' + data);
        }
    });
});

But in the dropdown (City and State) still allows the change. For the select type it does not work, there is another option?

javascript c# jquery asp.net-mvc-5

  • Maybe leave it as readonly instead of disabled

  • For select, you can use the following code to disable it: $('#selectID').prop('disabled',true); just change the selectID by the ID of the select to be disabled.

3 answers

3

By default, the disabled is not sent to the form. I believe the solution is to make a readonly same as mentioned above.

  • in the textbox, instead of staying <input type='text' disabled> place <input type='text' readonly>

  • @Gabrielfaieri edits his reply with the code quoted in the comment. There is a button below called "edit"

  • Why do you have to edit the answer?? I huh

  • It worked Gabrielfalieri and @Lucascosta but in the dropdowns is allowing user change. I will edit my question

  • @Gabrielfalieri Because this is how we prefer it here. Comments should be used for trivial things, asking for information, these things and, usually, they are deleted after a while. Here we focus on questions and answers.

  • The now, I see, that has the old foruns, only the question and the code below

Show 1 more comment

0

An input with the "disabled" property is not sent together with the other fields when the form is sent. If your goal is to prevent the user from interacting with the field it is best to use the readonly property.

If you are using HTML you do so:

<input type="text" readonly>

If you are using XHTML you do so:

<input type="text" readonly="readonly" />

If your problem is setting this property with javascript you can use jQuery:

$("#State").prop("readonly", true); // Para permitir defina como false

Because it is a property the way to get it should be through the HTML object + the name of the property, but in the case of Select the browsers still have problems with it. If you prefer to follow with pure javascript do so to set your select:

document.getElementById("State").setAttribute("readonly", true);

And so to remove:

document.getElementById("State").removeAttribute("readonly");

If not a select, use the appropriate method:

document.getElementById("City").readOnly = true;

One day all browsers will solve this problem and you may have to come back in this implementation to solve the same problem. That’s why I recommend you use the example with jQuery that already has a polyfill for this. Otherwise you yourself would have to implement a polyfill at this time.

0

To disable select, you can use the following code:

$('#selectID').prop('disabled',true);

To re-activate it, simply remove the property disabled:

$('#selectID').removeAttr('disabled');

Just change the selectID by the ID of the select to be disabled.

Browser other questions tagged javascript c# jquery asp.net-mvc-5

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