Web Analytics Made Easy -
StatCounter Extracting values from select boxes and summing the result - CodingForum

Announcement

Collapse
No announcement yet.

Extracting values from select boxes and summing the result

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    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; Sep 4, 2011, 04: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.

    Comment


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

      Comment


      • #4
        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].

        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];
        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; Sep 5, 2011, 10:13 PM. Reason: I corrected the issue pointed out by Kor and also added references that use the |item| method.

        Comment


        • #5
          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
          -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

          Comment


          • #6
            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)...).

            Comment

            Working...
            X