SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Winnipeg Canada
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,701
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by codamedia View Post
    Any help would be appricated!
    Place the tax codes in an associative array:

    Code javascript:
    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:

    HTML Code:
    <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.

    Code javascript:
    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 Code:
    <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>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2004
    Location
    Winnipeg Canada
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Member
    Join Date
    May 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Place the tax codes in an associative array:

    Code javascript:
    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:

    HTML Code:
    <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.

    Code javascript:
    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 Code:
    <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>

    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. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,701
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Programmer2013 View Post
    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..!!!
    I'm sorry, but I don't think that we deal with java servlets here.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Member
    Join Date
    May 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    I'm sorry, but I don't think that we deal with java servlets here.
    oh..k
    Anyways..Thank you for replying


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •