Develop Reference

Fetched value is undefined jquery (traversal)

Actually am using Jqgrid but in browser console html look like this
<tbody>
<tr>
<td></td>
<td></td>
<td>
<input type="text" id="priority_1per" value='10'>hello <input>
</td>
<td>
<input type="text" id="priority_2per" value='20'>hellob <input>
</td>
</tr>
</tbody>
there is a column: "priority1" "priority2" which has textbox
$('body').on('change', '#priority_1per', function () {
//debugger;
var priority1 = $(this).val();
var priority2 = $(this).closest("tr").children("td").find("input[type=text]").find("#priority_2per")
alert(priority1)
alert(priority2)
console.log(priority2)
});
=>var priority1 am getting value (this).val()
=> but am not getting value of priority2 column data (i dono am doing crrt traversing or not)
jQuery.fn.init [prevObject: jQuery.fn.init(10)]
length: 0
prevObject: jQuery.fn.init(10) [input#productpriority.form-control.productpriority, input#divisionname.form-control._division.ui-autocomplete-input, input#categoryname.form-control.category.ui-autocomplete-input, input#subcategoryname.form-control.subcategory.ui-autocomplete-input, input#priority_1.form-control.plantname.plantCode1, input#priority_1per.form-control.priority_1per.number, input#priority_2.form-control.plantname.plantCode2, input#priority_2per.form-control.priority_2per.number, input#priority_3.form-control.plantname.plantCode3, input#priority_3per.form-control.priority_3per.number, prevObject: jQuery.fn.init(12)]
[[Prototype]]: Object(0)
this is the error am finding (not an error but mistake in travesal)
PLEASE help me out
html look like

The problem is due to your find() logic. You use the first find() to get both the input type="text" elements, then the second is trying to find a child #priority_2per element inside the first input. This clearly cannot be found as it's not valid HTML.
To fix the problem remove the first find() and add val():
var priority2 = $(this).closest("tr").children("td").find("#priority_2per").val()
However as the elements have id attributes on them, and id have to be unique in the DOM, then the traversal logic is entirely redundant. You can just select by the id directly.
In addition, your HTML is invalid. <input /> elements have no closing tag. Here's a full working example:
$('body').on('change', '#priority_1per', function() {
var priority1 = $(this).val();
var priority2 = $("#priority_2per").val();
console.log(priority1);
console.log(priority2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td>
<input type="text" id="priority_1per" value="10" />hello
</td>
<td>
<input type="text" id="priority_2per" value="20" />hellob
</td>
</tr>
</tbody>
</table>

Only one checkbox between two <td> at each <tr>

I have a code like this:
<tr>
<td>
<input type="checkbox" name="ordered[]" value="xxx"></input>
</td>
<td>
<input type="checkbox" name="inStock[]" value="yyy"></input>
</td>
</tr>
The code is repeated for each result in MySQL.
Also I'm using this code:
<script>
$('input[type="checkbox"]').on('change', function() {
// uncheck sibling checkboxes (checkboxes on the same row)
$(this).siblings().prop('checked', false);
});
</script>
I need to select only one checkbox per row (per table tr). What should I change in javascript?
Thanks!

I think you need something like this
$( document ).ready(function() {
$('input[type="checkbox"]').on('change', function() {
var checkedValue = $(this).prop('checked');
// uncheck sibling checkboxes (checkboxes on the same row)
$(this).closest('tr').find('input[type="checkbox"]').each(function(){
$(this).prop('checked',false);
});
$(this).prop("checked",checkedValue);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="checkboxes">
<tr>
<td>
<input type="checkbox" name="inStock[]" />inStock
</td>
<td>
<input type="checkbox" name="ordered[]" value="xxx" />ordered
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="inStock[]" value="yyy" />inStock
</td>
<td>
<input type="checkbox" name="ordered[]" value="xxx" />ordered
</td>
</tr>
</table>

I think what you are asking for is a RadioButton. Just give them different ids but the same name and you will be able to select just one of them.

Try applying selector based on element name:
$('input[name="ordered[]"]').on('change', function() {
Or you would probably want to add some other attribute to identify the specific element you wish to select.

Since you haven't specified which sibling, say you can grab the first element out of a jQuery object using first:
$(this).siblings().first().prop('checked', false);
You can also do
$(this).siblings(".bar").eq(0).text()
You can use the eq method to reduce the matched set of elements to one at a specific index:

If you use radio buttons and use the same name for all of them, you are only able to select one radio button at a time and the other ones gets uncheked and like our friend mentioned you need to include your <td></td> tags in <tr></tr>tags.

How to fetch the value of the second input tag in the html snippet below?

<td>
<input class="checkboxColumn" name="An" value="9FFF8546C9E9A200F7780550E6A4B6F9610B29D3A" type="checkbox">
<input id="AList" name="AList" value="9FFF8546C9E9A200F710550E6694B6F9610B29D3A|Disabled" type="hidden">
</td>
I have above td as first column in the Jquery datatable. I Need to fetch the value of the #AList using below javascript logic. But the alert below shows the value
of first input tag for all rows when iterates. What are the changes I need to make to display value of second tag?
var rows = oTable.fnGetNodes();
for (var i = 0; i < oTable.fnSettings().aiDisplay.length; i++) {
debugger;
// Get HTML of 3rd column (for example)
alert($($(rows[i]).find("td:eq(0)").html()).val());
}
On displaying
alert($(rows[i]).find("td:eq(0)").html());
The alert shows complete markup of contents of <td>
I need output as "9FFF8546C9E9A200F710550E6694B6F9610B29D3A|Disabled"

Because the html() gets the content as html. You need to access the input in the td and then get it's value with val().
alert($(rows[i]).find("td:eq(0) #AList").val());
For Example you can see here(In example I intentionally get the table then the td)
console.log($('table').find("td:eq(0) #AList").val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input class="checkboxColumn" name="An" value="9FFF8546C9E9A200F7780550E6A4B6F9610B29D3A" type="checkbox">
<input id="AList" name="AList" value="9FFF8546C9E9A200F710550E6694B6F9610B29D3A|Disabled" type="hidden">
</td>
</tr>
</table>

alert($(rows[i]).find("td #AList").val());
This should work. You will be able to get the value desired.

If you generalize the case for all second input box in the td then use the pseudo selector - nth-child(n).
alert($(rows[i]).find("td>input:nth-child(2)").val());

Getting nearest text box to radio button in table

I am having trouble getting the text box nearest to my selected radio button. Here is what I have tried so far which keeps returning me 'undefined'.
HTML:
<fieldset class="capacity-field">
<legend>Capacity</legend>
<table style="margin-bottom: 20px">
<tr>
<td>
<input type="radio" name="capacity" value="raw" checked>Raw (TB):
</td>
<td>
<input type="text" name="raw-capacity" value="256" size="2"> TB
</td>
</tr>
<tr>
<td>
<input type="radio" name="capacity" value="usable">Usable (TB):
</td>
<td>
<input type="text" name="usable-capacity" value="161.28" size="2"> TB
</td>
</tr>
<tr>
<td>
<input type="radio" name="capacity" value="effective">Effective (TB):
</td>
<td>
<input type="text" name="effective-capacity" value="161.28" size="2"> TB
</td>
</tr>
</table>
JavaScript/jQuery
function cap_growth_update(toUpdate) {
var capacity = $("input[name='capacity']:checked").next("input[type='text']").val();
alert(capacity);
}
$(document).ready(function(){
cap_growth_update("T");
});
I know the value of toUpdate is arbitrary at this point, but it will be used as a selector later down the line and thus is included.

The jQuery next() function looks for a sibling element, but since these elements are separated under different td elements, you'll have to climb up the DOM:
$("input[name='capacity']:checked").closest("tr").find("input[type='text']").val();
So what it does, is to go to the closest parent, and then search for the children text input.

Try using parents() with eq() and find()
$("input[name='capacity']:checked").parents().eq(1).find("input[type='text']").val();
Note this is only a suggestion I make based on your markup, your goal could be achieved in other ways (jQuery is a rich library to traverse and manipulate DOM)

$(function() {
$("input:radio").click(function() {
if ($(this).is(":checked")) {
var value = $(this).closest("tr").find("input:text").val();
}
});
});
The code checks for a click event on a radio element then check if the element is checked, if it's checked then obtain the parent row of the radio element, find an input text inside the row an get the value of the input text the it saves the value at the var value, so you can do whatever with the value :)
Regards!

Select closest control element regardless of type (Input, Select etc.) for Validation

Let me explain:
I have a table form and some fields are required and I am trying to create custom validation.
example:
<table>
<tr>
<td class="required">Description</td>
<td>
<input id="input1" />
</td>
<td>Phone</td>
<td>
<input id="input2" />
</td>
</tr>
<tr>
<td class="required">Location</td>
<td>
<select id="select1"/>
</td>
<td>Email</td>
<td>
<input id="input3"/>
</td>
</tr>
</table>
What I wanna do is find all elements with class required
which is pretty easy using:
var requiredElements = document.querySelectorAll(".required");
And then I want to find their closest control element and check if it's value is empty. The problem is I don't know if it's gonna be input or select. I was thinking of using the .closest() function but it could lead to unwanted results if two different inputs are equally close to a required (like in the example above).
Any help would be much appreciated.

You can select a control regardless of type with jQuery by using any one of a number of selectors and combining it with one or more additional selectors.
In the code snippet you provide, the controls you want to select (input1 and select1) are child elements of a table cell element that is a sibling of the cell with the class "required", so we can build a selection thus:
$(".required + td").child
which breaks down as:
Find the elements with the "required" class applied to them.
This will give us the 2 table cells:
<td class="required">Description</td>
and
<td class="required">Location</td>
For each element returned by 1. use the "next adjacent" selector + with td to get the next table cell:
<td><input id="input1" /></td>
and
<td><select id="select1" /></td>
For each element returned by 2. get the child element:
<input id="input1" />
and
<select id="select1" />
There is also a jsFiddle to illustrate actions on the targets (change border to dark red).
Edit
This works because the layout in your snippet consistently places the elements you want to target in the same position relative to the element with your selection criteria. You must have some consistent way of finding elements that are not marked with a class/id otherwise you can't achieve your objective.

Although I like Raad's answer I'd like to post this answer to say what I did to solve my problem.
First of all I added a custom attribute labelFor to every label td with value equal to the id of it's corresponding input as follows:
<table>
<tr>
<td class="required" labelFor="input1">Description</td>
<td>
<input id="input1" />
</td>
<td labelFor="input2">Phone</td>
<td>
<input id="input2" />
</td>
</tr>
<tr>
<td class="required" labelFor="select1">Location</td>
<td>
<select id="select1"/>
</td>
<td labelFor="input3">Email</td>
<td>
<input id="input3"/>
</td>
</tr>
</table>
Then I used the following Validation function:
function validateForm () {
var self = this;
var validationPassed = true;
//First I will gather every .required element in an Array
var requiredTags = document.querySelectorAll(".required");
//Then I will loop through the array
for (var i = 0; i < requiredTags.length; i++) {
//Get value of attribute "labelFor" which would be the controlId that this label refers to
var controlId = $(requiredTags[i]).attr("labelFor");
//Then I use this to check if that control's value is empty.
if ($("#" + controlId).val() == ('' || null)) {
validationPassed = false;
}
}
if (!validationPassed) {
alert("Please fill all the required fields");
}
return validationPassed;
}
This way I check if all required fields are not empty and return true, or return false and an alert to warn user.
I find that the problem Raad described in his Edit is the main reason why this approach could be more useful. You don't have to worry if your input element is always in the same position relatively to your label td element.