Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Extracting values from select boxes and summing the result

    Hello,

    I'm working on a project that involves extracting values from a series of select boxes and then working out the result.

    The select boxes contain the following:
    Code:
    <select name="select_Col1_Row1">
    <option value="blue">Blue</option>
    <option value="green">Green</option>
    <option value="red>Red</option>
    </select>
    <select name="select_Col1_Row2">
    <option value="blue" selected="selected">Blue</option>
    <option value="green">Green</option>
    <option value="red>Red</option>
    </select>
    <input type="text" name="RedSum">
    <input type="text" name="BlueSum">
    <input type="text" name="GreenSum">
    </select>
    As you can see by my code, I'm early days at this and guessing the steps on the way. I tried using getElementsByTagName on the select and then on the option but had no luck with that. The code below does a wonderful job of returning blue for both select statements...

    Code:
    <script type="text/javascript">
    function getElements()
      {
      var table = document.getElementById("x");   
      var x = table.getElementsByTagName("option");
      for (var i = 0; i < x.length; i++) {   
        var status = x[i].getAttribute("selected");
    	alert(status);
        if (status == "selected") {
          var statushcap = x[i].getAttribute("id");
          var statusvalue =x[i].getAttribute("value");
          if (statusvalue == "blue") {
            alert(statusvalue);
          }
        }
    
      }
      
      alert(x.length);
      }
    </script>
    If someone could suggest some way to map the select tag and then extract its option value to being the user selected value, I'd most appreciate it. I can probably do the rest of it. Can you extract additional information from the id of the option that is selected as I'd like to sum additional information from the user's choice.

    Best,

    John

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,036
    Thanks
    203
    Thanked 2,539 Times in 2,517 Posts
    The value of a select list option is simply

    document.formname.selectlistname.value


    You can include several different pieces of information within the one option value by using a delimiter, e.g.

    <option value="blue~99~large~folded">Blue</option>

    and then use split() to separate the sub-values into blue, 99, large and folded
    Or of course use a function to find the additional information appropriate to that option.

    You say that you want to "sum" the result, but of course only numbers can be summed. Perhaps you mean "concatenate"?

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 09-04-2011 at 08:07 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,087
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    None of your select elements have an id value of 'x'
    so the following will never work...
    Code:
      var table = document.getElementById("x");

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by fyremoon View Post
    I tried using getElementsByTagName on the select and then on the option but had no luck with that.
    I'd guess that people that have trouble with getElementsByTagName don't realize that it returns a list of elements rather than one element. If you want to match the second select element in the document, you would use document.getElementsByTagName("select").item(1). Alternatively, you can access the element list as an array instead of invoking the item method: document.getElementsByTagName("select")[1].

    To access the first option element of the second select element: document.getElementsByTagName("select")[1].getElementsByTagName("option")[0].

    Quote Originally Posted by fyremoon View Post
    If someone could suggest some way to map the select tag and then extract its option value to being the user selected value, I'd most appreciate it.
    There's a select element-specific property called selectedIndex that you can use to get the index of the selected option element:

    Code:
    var second_select_el = document.getElementsByTagName("select")[1];
    var selected_option_el = second_select_el.getElementsByTagName("options")[second_select_el.selectedIndex];
    There's also a select element-specific property called options for accessing the option element list that's less verbose than using the getElementsByTagName method:

    Code:
    var second_select_el = document.getElementsByTagName("select")[1];
    var selected_option_el = second_select_el.options[select_el.selectedIndex];
    Give your select elements IDs and you can select them directly via the getElementById method instead of through a list with the getElementsByTagName method:

    Code:
    <select id="my_ID">
    Code:
    var select_el = document.getElementById("my_ID");
    var selected_option_el = select_el.options[select_el.selectedIndex];
    You can also access your elements by name attribute using getElementsByName, but, like the getElementsByTagName method, this involves accessing a list of elements:

    Code:
    <select name="my_name">
    Code:
    var first_select_el = document.getElementsByName("my_name").item(0);
    var selected_option_el = first_select_el.options[first_select_el.selectedIndex];
    Quote Originally Posted by fyremoon View Post
    Can you extract additional information from the id of the option that is selected as I'd like to sum additional information from the user's choice.
    For this code:

    Code:
    var select_el = document.getElementById("my_ID");
    var selected_option_el = select_el.options[select_el.selectedIndex];
    If you want an option element's id attribute value, value attribute value, selected attribute value, or text content, you would use:

    Code:
    var id_attr_val = selected_option_el.getAttribute("id");
    /* or */ id_attr_val = selected_option_el.id;
    
    var value_attr_val = selected_option_el.getAttribute("value");
    
    var selected_attr_val = selected_option_el.getAttribute("selected");
    /* or */ selected_attr_val = selected_option_el.defaultSelected;
    
    var text_content = selected_option_el.textContent;
    /* or */ text_content = selected_option_el.firstChild.nodeValue;
    /* or */ text_content = selected_option_el.firstChild.data;
    /* or */ text_content = selected_option_el.lastChild.nodeValue;
    /* or */ text_content = selected_option_el.lastChild.data;
    /* or */ text_content = selected_option_el.childNodes[0].nodeValue;
    /* or */ text_content = selected_option_el.childNodes[0].data;
    /* or */ text_content = selected_option_el.childNodes.item(0).nodeValue;
    /* or */ text_content = selected_option_el.childNodes.item(0).data;
    To get the option's value, you simply use selected_option_el.value. This will reflect the value attribute value unless you didn't specify that attribute. Then it will reflect the text content.

    So, for <option value="green">Green</option>, selected_option_el.value returns green, but for <option>Green</option>, Green will be returned.
    Last edited by Arbitrator; 09-06-2011 at 02:13 AM. Reason: I corrected the issue pointed out by Kor and also added references that use the |item| method.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by Arbitrator
    /* or */ text_content = selected_option_el.childNodes(0).nodeValue;
    Shouldn't be squared?
    Code:
    text_content = selected_option_el.childNodes[0].nodeValue;
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by Kor View Post
    Shouldn't be squared?
    Code:
    text_content = selected_option_el.childNodes[0].nodeValue;
    Yes, you're correct; I made two mistakes on that count. Presumably this was both because I was tired and I rarely use the childNodes property.

    I've updated the errors in my previous post as well as added missing references demonstrating use of the item method (e.g., ...childNodes.item(0)...).
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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