CODEWITHSUNDEEP
javascriptjquerydata-binding
Cups
Cups

Reputation: 6896

Correct technology to solve this on the client side?

I have an already complex form with a select box containing 25 countries, and 3 inputs on that form whose default values need to change depending on which country is chosen.

The solution must work on IE 10 and IE 11 as well as other modern browsers.

The problem I am having is in identifying the most suitable technology I should use to achieve this.

I don't feel that Ajax is necessary in this case, though it is not discounted.

Each row of data would only consists of values such as:

21, 120, 17, 250;

Where 21 is the country_id, so, its not a lot of data to load.

We rely heavily on JQuery already for much behaviour management.

Given the problem I face, can anyone point me in the direction of the correct technology to apply to deal with this, or even a tutorial which would give me a head start?

Upvotes: 0

Views: 30

Answers (1)

SimpleJ
SimpleJ

Reputation: 14778

You could store the defaults in a javascript object and index them by their country ids.

Something like:

var countryDefaults = {
    "21": {
        a: 120,
        b: 17,
        c: 250
    },
    "22": {
        a: 1,
        b: 2,
        c: 3
    }
    // ...
};

You will likely need register a change event handler on your selection box. After a change event is caught, you then just need to retrieve the country id that's selected (possibly with a data attribute on your selection's option tags). Once you have the country id, you can retrieve the default values from the countryDefaults hash (countryDefaults[countryId]) and update your inputs' default values.

The specific technologies are: HTML, Javascript, and JQuery (although you could do this without JQuery). Alternatively, you could try using an MVC framework that supports data binding such as Ember or Angular.

I hope this helps.

Upvotes: 2

Related Questions