Setting the Value of a text box based on the value of a Select Box

JavaScript
1

Some day I must learn some JavaScript. I admit - I am terrible at it, and waste a ton of time everytime I need to work out a solutions with it.

Here is what I need to do.

1: I have a select box of CND Provinces, the value of each is the ISO two character code (eg: MB, AB, BC, etc…)
2: Each province needs a different numerical tax value.
3: When I change the select box, I want the correct value for that province to appear in a text box.

In the example below, I know I need to write a function called “setTax” but I do not know where to begin.

If AB is chosen, the value has be be 5
If ON is chosen, the value has to be 13
If BC is chosen, the value has be to 12

Here is a sample of my select box

<select name=“province” onchange=“setTax(document.Form, this.value);”>
<option value=“”>Select Province from List…</option>
<option value=“AB”>Alberta</option>
<option value=“BC”>British Columbia</option>
<option value=“ON”>Ontario</option>
</select>

Here is my text box

<input name=“showtax” type=“text” id=“showtax” value=“<show-value-of-tax-here” />

Any help would be appricated!

2

Place the tax codes in an associative array:


var taxCodes = {
    'AB': 5,
    'BC': 12,
    'ON': 13
};

Then update the tax when the province is changed.

Your inline onchange event on the HTML element limits you, and you currently have to pass lots of stuff to it.
Instead of that, leave the select element just as a select element itself:


<form id="taxDetails" ...>
    <select name="province">
        ...
    </select>
    ...
</form>

And use scripting to attach the onchange event. The benefit of doing that is that the this keyword now automatically refers to the element that triggered the event, and from there you can easily get to the form, and other named elements of the form.


var form = document.getElementById('taxDetails');
form.elements.province.onchange = function () {
    var form = this.form;
    form.elements.showtax.value = taxCodes[this.value];
};

Here’s a quick test page that demonstrates this in action.


<html>
<head>
</head>
<body>
<form id="taxDetails">
    <select name="province" onchange="setTax(document.Form, this.value);">
    <option value="">Select Province from List...</option>
    <option value="AB">Alberta</option>
    <option value="BC">British Columbia</option>
    <option value="ON">Ontario</option>
    </select>
    <input name="showtax" type="text" id="showtax" value="<show-value-of-tax-here" />
</form>

<script>
var taxCodes = {
    'AB': 5,
    'BC': 12,
    'ON': 13
};
var form = document.getElementById('taxDetails');
form.elements.province.onchange = function () {
    var form = this.form;
    form.elements.showtax.value = taxCodes[this.value];
};
</script>
</body>
</html>
3

That is a great little tutuorial!
Based on your examples (and explanations), I now have everything working the way I need it to.

Thanks for taking the time to explain this to me!!!

4

My question is in relation to the code given above…
How can I retrieve the selected taxcode in my servlet page…I tried using the name attribute’s value showtax in servlet page like follows:
req.getParameter("showtax);

But i am getting its value as null…please help me out…!!!

5

I’m sorry, but I don’t think that we deal with java servlets here.

6

oh…k
Anyways…Thank you for replying

7