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 Coder
    Join Date
    Dec 2011
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question how to iterate through a table for values of drop down menus?

    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:
    Code:
     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:
    Code:
     <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]
    Last edited by sophie_pocket; 12-22-2011 at 09:22 PM.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts
    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?
    Code:
    <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>

  • #3
    New Coder
    Join Date
    Dec 2011
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts
    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.

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,772
    Thanks
    55
    Thanked 518 Times in 515 Posts
    I guess this would be the slightly less clumsy way, in case you wanted to get the value of every dropdown on your page:

    Code:
    <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>

  • Users who have thanked xelawho for this post:

    sophie_pocket (12-22-2011)

  • #6
    New Coder
    Join Date
    Dec 2011
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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


  •  

    Tags for this Thread

    Posting Permissions

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