I want get the value of next immediate input value by class. Here is my code:
<table>
<tr>
<td>
<input class='name' value='demo1'/>
</td>
<td>
<input class='age' value='23'/>
</td>
<td>
<input class='name' value='demo2'/>
</td>
<td>
<input class='age' value='24'/>
</td>
</tr>
</table>
and JS file
$('body').on('blur','.name',function(){
alert($(this).parent().next('.age').val());
});
I want the value of age next to name? What have I missed?
My JSfiddle link is: http://jsfiddle.net/mvkc95f8/
Thank you
The .age input field is within the sibling td element, so you need to use .next() to get that td, then .find('.age') to retrieve the input. Try this:
alert($(this).parent().next().find('.age').val());
Updated fiddle
Related
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>
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.
I have a webpage that allows for dynamically generated content, I want to prefix all the dynamic content names with the name of the hidden element when they're created/before post would be acceptable.
The classes that these dynamically added textboxes are in, are shared across the page so can't easily be used to identify.
I cannot get this to work, I would need to check whether they have the prefix, if they don't, add the prefix
Fiddle:
https://jsfiddle.net/ycjrunja/2/
jQuery
$(// can't use class).attr(); // do I need to use this method for each <td> ?
Current Generated Markup:
<input type=hidden name="main[xyz]" />
<input type=button name="addRow" />
<table>
<tr>
<td><input type=text name="tb1r1" /></td>
<td><input type=text name="tb2r1" /></td>
</tr>
<tr>
<td><input type=text name="tb1r2" /></td>
<td><input type=text name="tb2r2" /></td>
</tr>
</table>
Ideal Generated Markup
<input type=hidden name="main[xyz]" />
<input type=button name="addRow" />
<table>
<tr>
<td><input type=text name="main[xyz]tb1r1" /></td>
<td><input type=text name="main[xyz]tb2r1" /></td>
</tr>
<tr>
<td><input type=text name="main[xyz]tb1r2" /></td>
<td><input type=text name="main[xyz]tb2r2" /></td>
</tr>
</table>
Use this :
$("td input").each(function(){
$(this).attr("name",$("input:hidden").attr("name")+$(this).attr("name" ));
});
Explanation:
The first line iteratres through all the <input> elements inside <td> elements.
The second line concantates the name of the <input type = "hidden>" with the <input> element's name which is being iterated and assigns it to the name of currently iterated element.
The last line ends the function and each() method.
The <input> elements must have a name before this script gets executed. The <script> tag must be placed just before the closing body tag or use window.onload instead, to confirm that the DOM has loaded.
try this one .
$("td input").each(function(){
$(this).attr("name",$("input:hidden").attr("name")+$(this).attr("name"))
});
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!
I am reading tables tr id with closest attribute on change but I keep getting wrong values and do not know how to fix.
If I choose the firts the "lower"(16) checkbox, I get the tr id ok and after that the upper one everythins peachy. Now if I do it the other way around I keep only getting the value of the "top"(17) one. My guess is that it is because the class name is the same, but I´m not sure and I can not influence the class name, since it is generated by Datatables.
Could someone take a peek at jquery and tell me what I´m doing wrong.
Thank you for your help.
var a = $(".report_report").change(function() {
var closestTr = $('.report_report:checkbox:checked').closest('tr').attr('id');
alert(closestTr);
This the basic table concept
<table class="something">
<tr id = "17">
<td>
<input class="report_report" type = "checkbox">
</td>
</tr>
<tr id = "16">
<td>
<input class="report_report" type = "checkbox">
</td>
</tr>
</table>
try
HTML
<table class="something">
<tr id="17">
<td>
<input class="report_report" type="checkbox"/>
</td>
</tr>
<tr id="16">
<td>
<input class="report_report" type="checkbox"/>
</td>
</tr>
</table>
JS
$(".report_report").change(function() {
alert($(this).closest("tr").attr("id"));
});
DEMO
IF you want all selected check box with parent tr id
$(".report_report").change(function () {
var cheked = $(".report_report").filter(function () {
return this.checked;
}).closest("tr").get();
console.log(cheked);
});
NOTE: you html is invalid tr is not closed