How to get all input values on a table TR (by ID) - javascript

how are you?
How can I get all values of a inputs inside a one TR in a table? I'd find examples, with not for a specific row (with ID)
I have this table:
<table>
<tr id="a">
<td><input id="a_01" value="the value of a_01"></td>
<td><input id="a_02" value="the value of a_02"></td>
</tr>
<tr id="b">
<td><input id="b_01" value="the value of b_01"></td>
<td><input id="b_02" value="the value of b_02"></td>
</tr>
</table>
For example: i'm triying to get all value inputs of a tr with id="b".
Thanks a lot for yout help!

You can use a selector to target the elements. To do so, you don't need jQuery, since you can use the querySelector and querySelectorAll functions:
document.querySelector('button').addEventListener('click', function(){
// Radio input value
var value = document.querySelector('input[name="idvalue"]:checked').value;
// Here's the selector for the input elements
var elements = document.querySelectorAll('#' + value + ' input');
// You can iterate the result and use the element values
elements.forEach(e => {console.log(e.id + ': ' + e.value);});
});
<table>
<tr id="a">
<td><input id="a_01" value="the value of a_01"></td>
<td><input id="a_02" value="the value of a_02"></td>
</tr>
<tr id="b">
<td><input id="b_01" value="the value of b_01"></td>
<td><input id="b_02" value="the value of b_02"></td>
</tr>
</table>
<div>
<input type="radio" name="idvalue" id="radioa" value="a" checked /><label for="radioa">Show values for #a</label>
<input type="radio" name="idvalue" id="radiob" value="b" /><label for="radiob">Show values for #b</label>
</div>
<button>Show Values of selected #id</button>
If you really really need t do it in jquery, you can use the same selector to target the elements: $("#b input").
I suggest you further read about selectors. Here's the MDN link.

Related

Good practice to extract data of a multi input table

I have a large table of inputs and on click event I need to extract the input values of each row to send them to the server.
I need to ask if there is a better way to do it to prevent all that hard coding.
My below code works somehow, but I haven't checked if the input has type radio, so I need to write more code to finalize it.
I am not sure if am doing well or if you can share a better way on this.
Here is what I do below:
Iterate over each table row and assign each row id to the object as a
key.
Iterate over that object to get each row's input values
Save the input to the object as values seperated by _ to be splitted as an array
Live Demo
<!DOCTYPE html>
<html>
<body>
<table>
<tbody id="dynamic_form_tbody">
<tr id="123">
<td><input type="text"></td>
<td><input type="date"></td>
<td><input type="radio" name="choice" value="yes"> <input type="radio" name="choice" value="no"></td>
</tr>
<tr id="1256">
<td><input type="text"></td>
<td><input type="date"></td>
<td><input type="radio" name="choice" value="yes"> <input type="radio" name="choice" value="no"></td> </tr>
<tr id="1212">
<td><input type="text"></td>
<td><input type="date"></td>
<td><input type="radio" name="choice" value="yes"> <input type="radio" name="choice" value="no"></td> </tr>
</tbody>
</table>
<input type="button" id="log" value="console.log data">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(() => {
var $btn = $('#log')
$btn.click(e => {
var table_tbody = $('#dynamic_form_tbody')
var dynamic_form_data = {}
//collect each row's id
table_tbody.find("tr").each(function (e) {
console.log('tr found with id: ' + $(this).attr('id'))
id = $(this).attr('id')
dynamic_form_data[id] = ""
})
for (let id in dynamic_form_data) {
$(`tr#${id} input`).each(function (e) {
let $this_val = $(this).val() || null
dynamic_form_data[id] += [$this_val + '_']
})
}
console.log(dynamic_form_data)
})
})
</script>
</body>
</html>
Some issues:
Your radiobuttons all have the same name, so that you can only select one in the whole table. I suppose you should be able to select one in each row.
$(this).val() || null: null is not useful, as an empty string is fine. If you decide to produce a string instead of an array, then null becomes "null", which is indistinguishable from an input that really has those characters. I would therefore drop || null.
[$this_val + '_'] converts a string to an array, but then that array is immediately converted back to a string when assigned with +=.
+ '_' will add also an underscore after the last value.
Both radio button values (yes, no) are always added to the result, without taking the selection into account. You should only take the one that is checked
To avoid that neither of the two radio buttons is selected, provide a default in the HTML definition, using the checked attribute
There seems no reason to not do the job in one cycle instead of two. You can select all the inputs that are not radio buttons, plus the checked radio buttons.
$(() => {
$('#log').click(e => {
var dynamic_form_data = {};
$('#dynamic_form_tbody').find('tr').each(function () {
var $inputs = $(this).find(':checked,input:not([type="radio"])');
dynamic_form_data[$(this).attr('id')] = $inputs.map(function() {
return $(this).val();
}).get(); // Chain `.join("_")` if you want a string instead of array.
});
console.log(dynamic_form_data);
});
})
<table>
<tbody id="dynamic_form_tbody">
<tr id="123">
<td><input type="text"></td>
<td><input type="date"></td>
<td><input type="radio" name="choice123" value="yes" checked> <input type="radio" name="choice123" value="no"></td>
</tr>
<tr id="1256">
<td><input type="text"></td>
<td><input type="date"></td>
<td><input type="radio" name="choice1256" value="yes" checked> <input type="radio" name="choice1256" value="no"></td>
</tr>
<tr id="1212">
<td><input type="text"></td>
<td><input type="date"></td>
<td><input type="radio" name="choice1212" value="yes" checked> <input type="radio" name="choice1212" value="no"></td>
</tr>
</tbody>
</table>
<input type="button" id="log" value="console.log data">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

how to select all checkbox inside td

i'm just learned the javascript. i'm trying to make a simple front-end for practice. so, i've been struggling to select all checkbox inside 'td'.
<table>
<tr class="top1000">
<td><input type="checkbox" onclick="ropangTopping()"><label>milo</label></td>
<td><input type="checkbox" onclick="ropangTopping()"><label>chocolate</label></td>
<td><input type="checkbox" onclick="ropangTopping()"><label>chocochip</label></td>
<td><input type="checkbox" onclick="ropangTopping()"><label>koko krunch</label></td>
</tr>
<tr class="top3000">
<td><input type="checkbox" onclick="ropangTopping()"><label>mozarella</label></td>
<td><input type="checkbox" onclick="ropangTopping()"><label>cheddar</label></td>
<td><input type="checkbox" onclick="ropangTopping()"><label>green tea</label></td>
<td><input type="checkbox" onclick="ropangTopping()"><label>boba</label></td>
</tr>
</table>
when i initialized with this var topping1000 = document.querySelector(".top1000 td input[type=checkbox]");, it just select the first checkbox. but when i use querySelectorAll it didn't select anything. i know this is a silly question. any answer would be appriciated it. thanks in advance.
You're almost there. You do need to use
querySelectorAll()
to grab all the nodes.
But then you need to loop through those nodes and check each one in turn.
One way to do this (there are several) might be to use a forEach loop:
toppings1000.forEach((topping1000) => {topping1000.checked = true;});
N.B. Note the names of the variables I'm using immediately above. I'm distinguishing between the collection of multiple nodes (toppings1000):
toppings1000 // with an 's' to indicate that it's a plural set
and the individual node in each iteration of the forEach loop (topping1000):
topping1000 // no 's' this time - it's just a single node
Working Example:
var toppings1000 = document.querySelectorAll(".top1000 td input[type=checkbox]");
toppings1000.forEach((topping1000) => {
topping1000.checked = true;
});
<table>
<tr class="top1000">
<td><input type="checkbox" onclick="ropangTopping()"><label>milo</label></td>
<td><input type="checkbox" onclick="ropangTopping()"><label>chocolate</label></td>
<td><input type="checkbox" onclick="ropangTopping()"><label>chocochip</label></td>
<td><input type="checkbox" onclick="ropangTopping()"><label>koko krunch</label></td>
</tr>
<tr class="top3000">
<td><input type="checkbox" onclick="ropangTopping()"><label>mozarella</label></td>
<td><input type="checkbox" onclick="ropangTopping()"><label>cheddar</label></td>
<td><input type="checkbox" onclick="ropangTopping()"><label>green tea</label></td>
<td><input type="checkbox" onclick="ropangTopping()"><label>boba</label></td>
</tr>
</table>

How to get nth div's child element value using jquery or javascript

I want to get the value of 4th div's child input element.
Basically im getting checked chekbox value and would like to add the associated input box value using "this"keyword
Here is my html code
<div class="container">
<div class="cell-checkbox" style="float:left;margin-right:5%;">
<input type="checkbox" name="select" value="7" class="big">
</div>
<div class="cell-desc" style="float:left;margin-right:5%;width:30%;">
<!-- Content -->
</div>
<div class="cell-cart"> //input box is inside this div
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td align="right">
<table align="center" class="cellBuy">
<tbody>
<tr align="right">
<td width="1%">
<input type="hidden" name="buyid" id="buyid" value="7">
<input type="hidden" name="category" value="464">
<input type="hidden" name="itemid" value="">
<input name="qty" id="qty" size="6" maxlength="6" value="1" class="input"> /*want to get this input text value
</td>
<td height="20">
<div align="left">
<input type="button" class="btn-BuyOff" value="Buy" id="addtocart" name="addtocart">
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I have tried the below mentioned code but its not working
var result = [];
$(':checkbox:checked').each(function (i) {
result.push($(this).val() + "," + $(this).parent().next().find('#qty').val());// this is for finding quantity field value
});
var strreuslt = result.join(';');
alert(strreuslt);
Try using closest to get the closest parent that contains both inputs and than trigger the find
$(':checkbox:checked').each(function (i) {
result.push($(this).val() + "," + $(this).closest('.container').find('input[name="qty"]').val());
});
or:
$(':checkbox:checked').each(function (i) {
result.push($(this).val() + "," + $(this).parent().siblings('.cell-cart').find('input[name="qty"]').val());
});
Note: if you have multiple groups of inputs you will need to wrap each group in a dom element preferably ul li
$(':checkbox').eq(3)
This gives you 4th element in jquery. Indexing starts from zero, so .eq(3) will give 4th child.
Use name instead, and never use same id for multiple elements:
$(this).parent().siblings('.cell-cart').find('[name=qty]').val();
Or use this if container contain multiple <div class="cell-cart">:
$(this).parent().next().next().find('[name=qty]').val();
You have issue with dom traversing. $(this).parent() do not return div having input checkbox element in it. You should rather traverse to closest div with class container and then find input checkbox in it. Like this:
var result = [];
$(':checkbox:checked').each(function (i) {
result.push($(this).val() + "," + $(this).closest('.container').find('[name="qty"]').val());// this is for finding quantity field value
});
var strreuslt = result.join(';');
alert(strreuslt);

Angularjs Radio Buttons in Nested ng-repeat not checked

I have a html template with one ng-repeat nested inside a parent ng-repeat. The parent ng-repeat contains radio button where the user can select 'Satisfied' or Unsatisfied' which correspond to values 1 and 0 respectively. If a user selects Unsatisfied, a detailed list of options is displayed so they can select more radios for further info. Here's the html;
<div class="group" ng-repeat="group in Groups">
<table>
<tr>
<td>{{group.Description}}</td>
<td><input type="radio" value="1" name="{{group.Id}}" ng-model="group.SatisfactionLevel" /></td>
<td><input type="radio" value="0" name="{{group.Id}}" ng-model="group.SatisfactionLevel" /></td>
</tr>
</table>
<div class="group-detail" ng-class="{'hidden': group.SatisfactionLevel != 1}">
<table>
<tr ng-repeat="item in group.Details">
<td>{{item.Description}}</td>
<td><input type="radio" value="1" name="{{item.Id}}" ng-model="item.SatisfactionLevel" /></td>
<td><input type="radio" value="0" name="{{item.Id}}" ng-model="item.SatisfactionLevel" /></td>
</tr>
</table>
</div>
The json returned from the server looks like this;
"Groups": [
{
"Id":"AA",
"Description":"Service",
"SatisfactionLevel":1,
"Details":[{"Id":"AA1","Description":"Cleanliness","SatisfactionLevel":1},
{"Id":"AA2","Description":"Timeliness","SatisfactionLevel":1}
]
},
{
"Id":"AB",
"Description":"Food",
"SatisfactionLevel":1,
"Details":[{"Id":"AB1","Description":"Price","SatisfactionLevel":1},
{"Id":"AB2","Description":"Portion","SatisfactionLevel":1}
]
}
]
Everything works except that the radio buttons in the nested ng-repeat are not checked. I can see in fiddler that the Satisfactionlevel property contains values. Anybody see where I'm going wrong? Thanks
UPDATE
There was really nothing wrong with the code. It turns out different items in Groups can contain the same Details items. Since I'm using name="{{item.Id}}" for the name attribute, other radios in other group details with the same name but different values were causing previous radios with the same name to get unchecked.
This was my fix;
<td><input type="radio" value="1" name="{{group.Id}}-{{item.Id}}" ng-model="item.SatisfactionLevel" /></td>
since group ids are unique.
First, you have the same value in both inputs - I'm guessing this is a typo?
Second, if you use value="1", it is interpreted as a string "1", but your model is an integer 1.
Instead, use ng-value:
<input type="radio" ng-value="0" name="{{item.Id}}" ng-model="item.SatisfactionLevel">
<input type="radio" ng-value="1" name="{{item.Id}}" ng-model="item.SatisfactionLevel">

Finding the next td element using j query?

How can i find the next td element using jquery.
I am trying to append a text or a div to the td element inside a particular tr.
my tr is a server side control with tag runat=server
here is my query it is not working
var cssdisable= function testcss(rowid) {
if ($('#testcss').width() != 3) {
var id = $(rowid).find('td');
id.append('The following is not valid');
}
}
this is how i am calling the function with in a click event
cssdisable('<%=tr_myrow.ClientID %>');
It doesn't does anything, neither gives any error. i am trying to add a text after the td elemnent next to the row id passed.
Any ideas
here is the HTML
there is a row named tr_myrow
<table id="tblstudysub_animal" class="bond_qbs_table" width="100%">
<tr>
<td valign="top">
<h3>
Select the study subject.<span class="red">*</span></h3>
<fieldset>
<legend class="hide">Select the study subject.</legend>
<table id="ctl00_m_g_c09fd465_0ae4_479b_8fc6_21a7de645003_ctl00_rdb_studysubj" border="0">
<tr>
<td><input id="ctl00_m_g_c09fd465_0ae4_479b_8fc6_21a7de645003_ctl00_rdb_studysubj_0" type="radio" name="ctl00$m$g_c09fd465_0ae4_479b_8fc6_21a7de645003$ctl00$rdb_studysubj" value="Humans" /><label for="ctl00_m_g_c09fd465_0ae4_479b_8fc6_21a7de645003_ctl00_rdb_studysubj_0">Humans</label></td>
</tr><tr>
<td><input id="ctl00_m_g_c09fd465_0ae4_479b_8fc6_21a7de645003_ctl00_rdb_studysubj_1" type="radio" name="ctl00$m$g_c09fd465_0ae4_479b_8fc6_21a7de645003$ctl00$rdb_studysubj" value="Non-Human primates" /><label for="ctl00_m_g_c09fd465_0ae4_479b_8fc6_21a7de645003_ctl00_rdb_studysubj_1">Non-Human primates</label></td>
</tr><tr>
<td><input id="ctl00_m_g_c09fd465_0ae4_479b_8fc6_21a7de645003_ctl00_rdb_studysubj_2" type="radio" name="ctl00$m$g_c09fd465_0ae4_479b_8fc6_21a7de645003$ctl00$rdb_studysubj" value="Rodents" /><label for="ctl00_m_g_c09fd465_0ae4_479b_8fc6_21a7de645003_ctl00_rdb_studysubj_2">Rodents</label></td>
</tr><tr>
<td><input id="ctl00_m_g_c09fd465_0ae4_479b_8fc6_21a7de645003_ctl00_rdb_studysubj_3" type="radio" name="ctl00$m$g_c09fd465_0ae4_479b_8fc6_21a7de645003$ctl00$rdb_studysubj" value="Others" /><label for="ctl00_m_g_c09fd465_0ae4_479b_8fc6_21a7de645003_ctl00_rdb_studysubj_3">Others</label></td>
</tr>
</table>
</fieldset>
</td>
</tr>
<tr id="ctl00_m_g_c09fd465_0ae4_479b_8fc6_21a7de645003_ctl00_tr_myrow">
<td valign="top">
<div id="ctl00_m_g_c09fd465_0ae4_479b_8fc6_21a7de645003_ctl00_studysub_popul">
<h3>
Select your study subject.<span class="red">*</span></h3>
<fieldset>
<legend class="hide">Select your study subject.</legend>
<table id="ctl00_m_g_c09fd465_0ae4_479b_8fc6_21a7de645003_ctl00_rdb_study_popul" border="0">
<tr>
<td><input id="ctl00_m_g_c09fd465_0ae4_479b_8fc6_21a7de645003_ctl00_rdb_study_popul_0" type="radio" name="ctl00$m$g_c09fd465_0ae4_479b_8fc6_21a7de645003$ctl00$rdb_study_popul" value="Individuals" /><label for="ctl00_m_g_c09fd465_0ae4_479b_8fc6_21a7de645003_ctl00_rdb_study_popul_0">Individuals</label></td>
</tr><tr>
<td><input id="ctl00_m_g_c09fd465_0ae4_479b_8fc6_21a7de645003_ctl00_rdb_study_popul_1" type="radio" name="ctl00$m$g_c09fd465_0ae4_479b_8fc6_21a7de645003$ctl00$rdb_study_popul" value="Population" /><label for="ctl00_m_g_c09fd465_0ae4_479b_8fc6_21a7de645003_ctl00_rdb_study_popul_1">Population</label></td>
</tr>
</table>
<div id="testcss">
</div>
I ma trying to add that text to the td in that row...
i hope this makes more clear...
One issue is that you are trying to query for the td by its id but are not using the # at the start of the selector..
try cssdisable('#<%=tr_myrow.ClientID %>');
Also in order to stick to just the td child of the tr use .children() instead of .find('td') (which will find all descendant td elements)
so
var cssdisable = function testcss(rowid) {
if ($('#testcss').width() != 3) {
var id = $(rowid).children().first();
id.append('The following is not valid');
}
}
Demo at http://jsfiddle.net/D4z9b/ (using your example HTML)
Give your <td>..</td> elements meaningful ids during the table build phase (if you don't build it, just assign them before starting any processing using a separate call) and then generate the id. Something like tableName + '_' + row + '_' will probably should do you fine.

Categories