CODEWITHSUNDEEP
javascriptjqueryhtmlautocomplete
Jimmy
Jimmy

Reputation: 12487

Removing content from a set of inputs when input has changed

I need to clear the location disabled inputs when the user changes what input is in the location field.

This is my code: http://jsfiddle.net/spadez/6v3kbLbk/7/

var placeSearch, autocomplete;
var componentForm = {
    route: 'long_name',
    locality: 'long_name',
    administrative_area_level_1: 'long_name',
    country: 'long_name',
    postal_code: 'short_name'
};

function initialize() {
    autocomplete = new google.maps.places.Autocomplete(
    (document.getElementById('autocomplete')), {
        types: ['geocode']
    });
    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        fillInAddress();
    });
}

function fillInAddress() {
    var place = autocomplete.getPlace();

    for (var component in componentForm) {
        document.getElementById(component).value = '';
        document.getElementById(component).disabled = false;
    }

    for (var i = 0; i < place.address_components.length; i++) {
        var addressType = place.address_components[i].types[0];
        if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];
            document.getElementById(addressType).value = val;
        }
    }
}

Using google autosuggest I am able to populate the fields with the returned information. However I run into a problem when the following happens:

User types in part of an address Clicks autocomplete (which fils fields) User deletes or modifies current input Uuser types in new input but doesnt click on autocomplete

This leaves the old values in the autocomplete fields. What I need is to check if the content in the field has changed, and if it has, delete the content in the fields with the red border.

Can anyone please show me how this might be done? My guess is something like this:

 $('#autocomplete').keyup('input', function() {
     $(".disabledclass").val('');

Upvotes: 0

Views: 56

Answers (2)

Dave
Dave

Reputation: 4436

Register keyup event for input in DOM on document ready. Refer jsFiddle

$( "#autocomplete" ).on('keyup',function() { 
  $("input.hidden").val('');
});

Upvotes: 1

Varun Chakervarti
Varun Chakervarti

Reputation: 1042

Yes you are right you can clear values using keyup event.

document.getElementById('autocomplete').addEventListener("keyup", function() {
    $(".hidden").val('');
});

Here is the updated and working JSFiddle Link

Upvotes: 1

Related Questions