Extracting values from select boxes and summing the result

[fyremoon]

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:

<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...

<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

[Philip M]

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.

[jmrker]

None of your select elements have an id value of 'x'
so the following will never work...

  var table = document.getElementById("x");

[Arbitrator]

Originally Posted by fyremoon

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

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:

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:

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:

<select id="my_ID">

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:

<select name="my_name">

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

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:

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:

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.

[Kor]

Originally Posted by Arbitrator

/* or */ text_content = selected_option_el.childNodes(0).nodeValue;

Shouldn't be squared?

text_content = selected_option_el.childNodes[0].nodeValue;

[Arbitrator]

Originally Posted by Kor

Shouldn't be squared?

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)...).