SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help with some simple javascript on select code

    So ive got a drop down select menu with options 1 - 10. (i.e. "1" "2" "3" etc..)

    When the user selects 3 from the select box, i need to do a math equation of 3 x 10 and put the result of 30 into a text field.

    Anyone got a function that might help?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    First we have the select element and option values, and we give the select element an identifier so that we can work with it from Javascript.

    Give the select element it a better name than my one. I've called it "items" and the text field "tentimes", but yours should more accurately represents what the values are for. Then your code will be easier to understand.

    Code HTML4Strict:
    <select id="items">
        <option value="">Please choose</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        ...
    </select>

    After that, at the end of the document is a good place, we tell the select element to do something whenever it changes

    Code Javascript:
    document.getElementById('items').onchange = updateTenTimes;

    The updateTenTimes() function retrieves the value and updates the text field

    Code Javascript:
    function updateTenTimes() {
    	var value = this.value;
    	document.getElementById('tentimes').setAttribute('value', value * 10);
    }

    And you'll be wanting somewhere to put the value

    Code HTML4Strict:
    <input type="text" id="tentimes">
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •