Question

I have been trying to solve this for a while. I am trying to get value of a form input which is inside a nested loop. But its coming undefined. Any idea why so? Thanks much for your help in advance. Here is the code for example.

I am getting the value of $(#fund-no-"+f).attr('value') without any problem. Its $("#year-" + year_amt + "-" + f).attr('value') that i cant retrieve. It comes undefined. If i use $("#year-" + year_amt + "-" + f).val() instead i dont get any value at all.

 var fund_datastring;
 fund_datastring = "";
 if(fundqty >0)
 { 
  for(var f =1; f <= fundqty; f++)
  {
   fund_datastring += "&fund_no_" + f + "=" + $("#fund-no-" + f).attr('value') ;  

     var fundyear_datastring = "";
     var hidden_fundid = $("#hidden-fund-id-"+f).attr('value');

   var year_amt=2;
   //for(var year_amt =2; year_amt < hidden_fundid; year_amt++)
   while (year_amt < hidden_fundid)
   {
    fundyear_datastring += "&hidden_fund_"+f+ "=" + hidden_fundid + "&fund_"+ f +"_amount_"+ year_amt + "=" + $("#year-" + year_amt + "-" + f).attr('value') + "&fund_"+ f +"_year_"+ year_amt + "=" + year_amt;

   year_amt++
   }
   hidden_fundid = "";


  }


 }


<div class="fsFieldHorizontal"> 
    <input type="text" value="" class="fsField" size="32" name="year_1_1" id="year-1-1"> 
    <input type="hidden" value="4" id="hidden-fund-id-1"> 
        <a onclick="addFundForm(this); return false;" id="add-year-1" href="#"> 
            <img alt="Add Year" src="images/add_16.png"> 
        </a><br><br> 
        <div id="year-container-1"> 
            <div id="year-2-1" style="margin: 5px 0px;">
                <input type="text" value="" class="fsField" size="32" name="year_2_1" id="year-2-1">
                    <a onclick="removeFundYear("#year-2-1"); return false;" href="#">
                        <img alt="Remove Year 2" src="images/cancel_16.png">
                    </a><br>
                    <label for="year-2-1" class="fsSupporting">Year 2 Amount</label>
            </div>
            <div id="year-3-1" style="margin: 5px 0px;">
                <input type="text" value="" class="fsField" size="32" name="year_3_1" id="year-3-1">
                    <a onclick="removeFundYear("#year-3-1"); return false;" href="#">
                        <img alt="Remove Year 3" src="images/cancel_16.png">
                    </a><br>
                    <label for="year-3-1" class="fsSupporting">Year 3 Amount</label>
            </div>
        </div> 
</div>

Answer 1

Update 2

As I suspected below, your IDs were not unique: You have both this:

<div id="year-2-1" style="margin: 5px 0px;">

And this:

<input type="text" value="" class="fsField" size="32" name="year_2_1" id="year-2-1">

jQuery is probably finding the first one, which does not (of course) have a value.

Update 1

From what you’re describing, the most likely scenario is that you don’t have an element with the ID year-2-1 (on the first pass) and so on — or you have more than one such element (which is invalid and so unpredictable). Because fundamentally, if the DOM is right, it works: http://jsbin.com/icume3 And if there’s no element with that ID, you get exactly what you’re describing: http://jsbin.com/icume3/2

Old, apparently incorrect answer (in more ways than one):

You haven’t shown your markup, but my guess would be that .val() is working where .attr("value") is not because you’re dealing with a form element that doesn’t have a value attribute, like a select (see below). .val gets the value of the element, which varies depending on what kind of element it is.

Edit: Apparently jQuery handles “value” in attr, at least for selects, at least on the browsers I tried (including IE6, so): http://jsbin.com/oxega3 So not that.