Avoid editing in the field

Question

Avoid editing in the field

Navigation

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

1

I am trying to do the following: the user types his / her zip, and then it is populated automatically, estado (select) cidade (select), rua (input) and bairro (input), when the user types his / her zip and for example is a complete zip (City, State, Street and Neighborhood) the fields were disabled for editing using Disable . When the zip is only from City (City and State) the Neighborhood and Street fields are enabled to type. For this I 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 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 the dropdown (City and State) is still allowing the change. For select type it does not work, is there another option?

javascript jquery c# asp.net-mvc-5

asked by anonymous 16.12.2016 / 13:40

3 answers

Value loses content as soon as it leaves ajax Search in Ajax within div clone jquery

score 3 · Answer 1

3

By default, disabled is not sent to the form. I think the solution is to make a% of% same, as quoted above.

16.12.2016 / 13:44

score 0 · Answer 2

To disable select, you can use the following code:

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

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

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

Just change selectID to the select ID that should be disabled.

score 0 · Answer 3

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

If you are using HTML you do this:

<input type="text" readonly>

If you are using XHTML you do this:

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

If your problem is to set 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 browsers still have problems with this. If you prefer to follow with pure javascript do so to setar your select:

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

And so to remove:

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

If it is not a select use the appropriate method:

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

One day all browsers will resolve this problem and you may have to go back in this implementation to solve the same problem. So I recommend you use the example with jQuery that already has a polyfill for this. Otherwise you would have to implement a polyfill at this point.