Resolved how to iterate through a table for values of drop down menus? [Archive]

...

View Full Version : Resolved how to iterate through a table for values of drop down menus?

sophie_pocket

12-22-2011, 08:20 PM

I wish to get the values for the 3rd and 4th cell of each row where these contain drop down menus. I've tried various ways but my code doesn't seem to iterate through rows of a table. I can get the values for the first row, but not the rest. There's isn't a fixed row size for the table as the user will be able to add and delete them.

I've put the values in separate arrays but instead of the array containing say [10, 20] it contains [10, 10] as it just duplicates the first row's values.

Here's my code that I have so far:

function calculate(){
var len = document.getElementById(arguments[1]).rows.length;
var cMenus = [];
var gMenus= [];
for(var j = 1; j<len; j++){
for(var i = 2; i<arguments.length; i++){
var c = document.getElementById(arguments[2]);
var g = document.getElementById(arguments[3]);

cMenus[a] = c.options[c.selectedIndex].value;
gMenus[a] = g.options[g.selectedIndex].value;
}
a++;
}

<button type="button" onclick="calculate('text','course', 'credits', 'grade')">Calculate</button>

HTML Code up to the first dropdown menu:

<table id="course" summary="add/remove course details" width="350px" border="1">
<tr>
<td><input type="checkbox" name="tick"/></td>
<td><input type="text"/></td>
<td>
<select name="credits" id="credits">
<option value="10">10</option>
<option value="20">20</option>
</select>
</td>
</td>
<select name=....

I've tried adding j to the arguments or putting it in "[]" but nothing seems to work. I don't think the platform I'm using supports jquery, so help would be really appreciated for using javascript, thanks.

[This is an updated question from my previous thread as I was unable to edit or delete my question]

xelawho

12-22-2011, 08:34 PM

I confess I don't really understand the question, and it seems to me that you are trying to do something much more complicated than what I imagine you are trying to do, so at the risk of asking a really dumb question...
Why not just access the values directly?

<body>
<table id="course" summary="add/remove course details" width="350px" border="1">
<tr>
<td><input type="checkbox" name="tick"/></td>
<td><input type="text"/></td>
<td>
<select name="credits" id="credits">
<option value="10">10</option>
<option value="20">20</option>
</select>
</td>
</td>
<script type = "text/javascript">
function calculate(){
var drop = document.getElementById("credits");
val = drop.options[drop.selectedIndex].value;
alert(val)
}

</script>
<button type="button" onclick="calculate()">Calculate</button>
</body>
</html>

sophie_pocket

12-22-2011, 08:47 PM

I want to be able to get this for all the rows I have, this only gets it for the first one, how do i modify it to get the others? I tried appending [i] to the end of value but it comes up with 0.
My first row is just table headings.

xelawho

12-22-2011, 09:06 PM

What would [i] do?

I think we need to see your full html. But assuming that your second dropdown has a unique ID as well, you can just duplicate the code using that.

Which is a little clumsy, but I'm still kind of unclear on what the huge obstacle is.

xelawho

12-22-2011, 09:18 PM

I guess this would be the slightly less clumsy way, in case you wanted to get the value of every dropdown on your page:

<body>
<table id="course" summary="add/remove course details" width="350px" border="1">
<tr>
<td><input type="checkbox" name="tick"/></td>
<td><input type="text"/></td>
<td>
<select name="credits" id="credits">
<option value="10">10</option>
<option value="20">20</option>
</select>
</td>
<td>
<select name="scores" id="scores">
<option value="30">30</option>
<option value="40">40</option>
</select>
</td>
</td>
<script type = "text/javascript">
function calculate(){
els=document.getElementsByTagName("select")
for(var j = 0; j<els.length; j++){
val = els[j].options[els[j].selectedIndex].value;
alert(val)
}
}
</script>
<button type="button" onclick="calculate()">Calculate</button>
</body>

sophie_pocket

12-22-2011, 09:22 PM

Yes this works, thanks you :) My big problem was getting it for the other rows, as these were not a fixed number.
Thank you very much :) this has relieved alot of stress :)