How to get the values from all input elements inside a <tr> element using JQuery

html, javascript, jquery

Solution

Assuming perhaps you want to do something with each one:

$('tr:has(input)').each(function() {
   var row = this;
   var values = "";
   $('input', this).each(function() {
      values =  values + "," + $(this).val() 
   });
   values = "<div>(" + values.substring(1) + ")</div>";

   $('.hist', row).html(values); 
});

Problem

How do I get all the input elements in one row in my form? For example, in the code snippet below, I have a checkbox and a text input box. I want to get the values of both these input types and display them to the user in the next td element containing the div id="hist" element. ``` <tr><td>Head</td> <td><input type="text" name="headH" id="headH" ></td> <td><input class="NA" type="checkbox" name="headNA" id="headNA" value="N/A"></td> <td><div class="hist"></div><%=Utils.getMeasurementsCreateDiv1("Head","H",num) %> </td></tr> <tr><td>Neck</td> <td><input type="text" name="neckH" id="neckH" ></td> <td><input class="NA" type="checkbox" name="neckNA" id="neckNA" value="N/A"></td> <td><div class="hist"></div><%=Utils.getMeasurementsCreateDiv1("Neck","H",num) %></td> </tr> <tr><td>UE</td> <td><input type="text"name="uEH" id="uEH"></td> <td><input class="NA" type="checkbox" name="ueNA" id="ueNA" value="N/A"></td> <td><div class="hist"></div><%=Utils.getMeasurementsCreateDiv1("UExt","H",num) %></td> ``` Also I have a 5 radio buttons and a text input box attached to it. These are all not on the same row but I want to get the value of the "pain1" element and the "cerCommentH" element and display it. Please note that the below is just a code snippet. I have several such elements in my form so I can't work with them individually using their "id". ``` <tr> <td>Mech</td> <td> <input type="radio" name="pain1" value="Pain a">Pain a <input type="radio" name="pain1" value="Pain b">Pain b </td></tr> <tr><td></td> <td> <input type="radio" name="pain1" value="Pain c">Pain c <input type="radio" name="pain1" value="Pain d">Pain d <input type="radio" name="pain1" style="display:none;" value=""> <input type="button" value="Clear" onclick="document.history.pain1l[4].checked = true;"> </td> <td><div class="hist"></div><%=Utils.getMeasurementsCreateDiv1("Cehi","H",num) %></td> </tr> <tr> <td></td> <td><input type="radio" name="pain1" value="Other">Other <input type="text" name="cerCommentH" id="cerCommentH"> </td> <td></td> <td></td> </tr> ``` Thanks in advance for your help.

Original source