SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Select object value

    Hi,

    I just saw the following:
    http://www.w3schools.com/jsref/prop_option_value.asp

    And wonder if there's something wrong with selectObject.value. Why not a simple approach:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript">
    function displayResult()
    {
    alert(document.getElementById("mySelect").value);
    }
    </script>
    </head>
    <body>
    
    <form>
    Select your favorite fruit:
    <select id="mySelect">
      <option value="apple">Apple</option>
      <option value="orange">Orange</option>
      <option value="pineapple">Pineapple</option>
      <option value="banana">Banana</option>
    </select>
    </form>
    
    <button type="button" onclick="displayResult()">Display value of selected fruit</button>
    
    </body>
    </html>
    It seems to be working with no problem.

    Thanks in advance!
    Mike

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Rain Lover View Post
    And wonder if there's something wrong with selectObject.value. Why not a simple approach:
    The problem is with w3schools, in that some of their examples aren't useful examples of how things should be used.
    Strictly speaking the select object does not officially have a value property, but web browsers unofficially support using that for the convenience that you have found.

    I'm sorry that you're finding trouble with them, they are just a two-man team that find it difficult to maintain and keep up to date, and are not associated with the W3C.

    They should not be using an inline event attribute, they should not be using an identifier to access a element of a form, and they should not be using the getElementsByTagName method to access the options of a select element.

    Here is some commented code that should help to give you a better idea about things:

    Code html4strict:
    <html>
    <head>
    </head>
    <body>
    <!--Give the form an identifier so that scripting can easily access the form-->
    <form id="favourites">
        <!--Form content must be contained by block-level elements
            which include paragraphs, fieldsets and divs-->
        <p>
            <!--Label form labels using the <label> element.
                We can wrap the label around a field to provide an implicit association.
                With IE6 and worse browsers, you have to use explicit association instead, which
                can be remedied if label support on IE6 becomes required, but makes for messier HTML-->
            <label>Select your favorite fruit:
                <!--Form elements should be appropriately named-->
                <select name="favouriteFruit">
                  <option value="apple">Apple</option>
                  <option value="orange">Orange</option>
                  <option value="pineapple">Pineapple</option>
                  <option value="banana">Banana</option>
                </select>
            </label>
        </p>
        <!--Button moved inside of the form and changed to a submit button (the default button type).
            This allows us to capture the onsubmit event of the form, to trigger our function-->
        <p><button type="submit">Display value</button></p>
    </form>
    <!--Load scripts from the bottom of the page, just before the </body> tag. This allows the rest of the page to load
        without being blocked.-->
    <!--Do not place scripting code directly within the HTML page. Like with CSS files, Putting scripts in a separate file
        allows them to be more easily cached, resulting in improved performance and maintenance of your page.-->
    <script type="text/javascript" src="script.js"></script>
    </body>
    </html>

    Code javascript:
    // A wrapper tends to be used to help protect the global namespace and the code from each other.
    // This also means that functions are only accessible from within the wrapper.
    (function () {
        // Do not drop the opening brace to the next line, as that
        // in certain circumstances with JavaScript causes syntax errors.
        // Being consistant in presentation is more important than matching the style from another langauge.
        function displayResult(form, fieldName) {
            // Use meaningful variable names, not ones called x.
            // Group variables within a function together as one var statement.
            // Multiple var statements should not be used within a function, as that results in
            // an inappropriate temptation to place them elsewhere throughout the code.
            var field = form.elements[fieldName],
                index = field.selectedIndex;
            alert(field.options[index].value);
        }
     
        var form = document.getElementById('favourites');
        form.onsubmit = function () {
            var form = this;
     
            // Pass information to functions that they should need. This helps to keep functions flexible.
            // Functions are less flexible if they know more than they should. 
            displayResult(form, 'favouriteFruit');
     
            // Return false to an event to prevent the default behaviour from occuring.
            // The default behaviour being prevented here is to submit the form to the server.
            return false;
        };
    }());
    Last edited by paul_wilkins; Jun 10, 2012 at 07:09.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    You are a teacher by nature! I really appreciate the detailed explanation!


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
  •