jquery get input value to retrieve matching array values to populate hidden inputs

Question

Looking for some guidance on a form being used to extract lat/long values that are stored in an array. Code example is incomplete (sorry), just in the rough stages.

<script type="text/javascript">
$document.ready(function(){
    var geoCity = [
        { 'Toronto', '43.6532', '-79.3831'},
        { 'Vancouver', '49.2612', '-123.1139'},
        { 'Calgary', '51.04532', '-114.0581'}
    ];
});
</script>

When an input is entered for city field (actually uses bootstrap's typeahead on actual form), the entered value (before submission of form), needs to be used to search the arrays and extract the matching lat/long values and enter them into their respective hidden input fields.

<input type="text" id="city" name="city" value="" />
<input type="hidden" id="latitude" name="latitude" value="" />
<input type="hidden" id="longitude" name="longitude" value="" />

Hoping that someone can steer me in the right direction for this one.

score 1 · Accepted Answer · 2013-10-17 00:05:51Z

1

Yes, change the data structure. Then correlate input values to object keys

$(function () {
    var geoCity = {
        'Toronto': {
            'lat': '43.6532',
            'lon': '-79.3831'
        },

        'Vancouver': {
            'lat': '49.2612',
            'lon': '-123.1139'
        },

        'Calgary': {
            'lat': '51.04532',
            'lon': '-114.0581'
        }
    };

    $('#button').click(function () {
        var lat, lon, city = $('#city').val();
        if (city) {
            lat = geoCity[city].lat;
            lon = geoCity[city].lon;
            $('#latitude').val(lat);
            $('#longitude').val(lon);
        }
    });
});

Fiddle

edited Oct 17, 2013 at 0:05

answered Oct 16, 2013 at 23:57

user2625787

Sign up to request clarification or add additional context in comments.

3 Comments

geepers Over a year ago

Thx Jeffman, same question I posed above...would you change anything with the geoCity array values if there were 90+ cities to be referenced?

user2625787 Over a year ago

Not much. They look cumbersome because of all the space, but that can be removed. If you put the keys and values in "double" quotes, then it will be in JSON format. That would facilitate creation of the objects in PHP or some other server environment.

geepers Over a year ago

Thanks Jeffman, this will work out well. I've adapted the final to a combination of your answer and Chandu's as well. Using the blur function, but also setting the lat/long to empty if there's no entered for city. Here's the final fiddle - jsfiddle.net/swdmedia/ZYYYu/2

Chandu · Accepted Answer · 2013-10-16 23:35:51Z

1

You need to change the structure of the geoCities object as mentioned below:

$(function () {
    var geoCity = [{
        'city': 'Toronto',
        'location': ['43.6532', '-79.3831']
    }, {
        'city': 'Vancouver',
        'location': ['49.2612', '-123.1139']
    }, {
        'city': 'Calgary',
        'location': ['51.04532', '-114.0581']
    }];

    $("#city").blur(function () {
        $("#latitude").val("");
        $("#longitude").val("");
        var curCity = $("#city").val();
        var location = $.map(geoCity, function (itm) {
            if (itm.city === curCity) 
                return itm.location; 
        });
        if(location) {
            $("#latitude").val(location[0]);
            $("#longitude").val(location[1]);
        }
    });
});

JsFiddle: http://jsfiddle.net/BJwhu/

You can $("#city").closest("form").submit instead of $("#city").blur.

answered Oct 16, 2013 at 23:35

Chandu

83.2k19 gold badges136 silver badges136 bronze badges

1 Comment

geepers Over a year ago

Thx Chandu, would you change anything with the geoCity array values if there were 90+ cities to be referenced?

Collectives™ on Stack Overflow

jquery get input value to retrieve matching array values to populate hidden inputs

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related