I am trying to get a value from <td> and assign that value into a textbox. I am able to get the value from <td> but unable to assign it to textbox.
var aggrName=document.getElementById ('staticid').innerHTML;
$('#editvpa').val(aggrName);
Tried the above code but doesn't seem to be working.
<table border=1>
<tr>
<td id="staticid">123</td>
</tr>
</table>
<input type="text" id="getVal">
var val = $('#staticid').text();
$('#getVal').val(val);
Fiddler https://jsfiddle.net/1m1hzqem/1/
Try like this.
var aggrName=document.getElementById ('staticid').innerHTML;
document.getElementById ('textbox_id').value = aggrName;
where textbox_id is id associated to your textbox.
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 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
Try to set my td value from my JavaScript JSON. But it dun seems to work when I inspect the element. However the html works just not the value. Not sure what is the problem. Tried changing the id to class too but it didnt work as well.
$(document).ready(function(){
$(".login_a").click(function(){
var test = $(this).attr('data-id');
var topost = 'getMilestoneDetail.php='+test;
var returnResults = $.getJSON('getMilestoneDetail.php?id='+test,function(data)
{
$("#td_projectName").html(data.projectName);
$("#budget_amt").html(data.budget);
$("#milestone_1").html(data.mileStone1);
$("#percentage_1").html(data.percentage1);
$("#percentage_1").val(data.percentage1);
});
});
</script>
<div id="login_form">
<table border=1>
<tr>
<th> Project Name </th>
<td id="td_projectName">
</td>
</tr>
<tr>
<th> Budget</th>
<td id="budget_amt">
</td>
</tr>
<tr>
<th>Stages</th>
<th>Payment Percentage</th>
</tr>
<tr>
<td id="milestone_1">
</td>
<td id="percentage_1">
</td>
</tr>
VAL is not a valid attribute of a TD, and that is why you cannot set it. If you want to store some data as an attribute of the node, the use setAttribute to store it. Example:
Straight JS:
document.getElementById('percentage_1').setAttribute('bob', 'your uncle');
Or using jQuery:
$('#percentage_1').attr('bob', 'your uncle');
You would use getAttribute, or .attr, to get the value later, e.g.
var bob = document.getElementById('percentage_1').getAttribute('bob');
or
$('#percentage_1').attr('bob');
Note that non-standard attributes won't validate and may be frowned on, but are common fixtures in web applications. You can use jQuery's .data method to properly set data on a node if you are unconcerned with older browser support.
The .val(value) method is primarily used to set the values of form elements such as input, select and textarea.
You can use a hidden field to keep the value or you can use .text() method to get the text of td.
<td id="percentage_1">
<input type="hidden" id="percentage_1_val" />
</td>
$("#percentage_1_val").val(data.percentage1);
Get the value.
$("#percentage_1_val").val();
// or you can use $("#percentage_1").text();
I am trying to get the value of a hidden input inside a tag in html table element through javascript in a MVC view. i have get the respective value of the hidden input which is in a loop,when the the respective row is clicked. I have tried many codes but it returns the value of the first row alone for all the rows in the table. i tried the following:
#foreach (var item in Model)
{
<tr>
<td hidden><input value="#item.QuoteId" id="QuoteID" class="QuoteID"> </td>
</tr>
}
javascript:
$("tr").click(function () {
var quoteid=document.getElementById("#QuoteID").innerHTML
alert(quoteid);
alert($('.QuoteID').val());
}
if my db contains 3 values for quote,say 12,17,18.. it alerts 12 for all the row clicks.. Pls help,I am literally stuck. I have been trying it from 3 days,i cant figure it out. I guess it is some simple mistake from my side. Pls help. I am not able to finish the work assigned to me because of this simple error.
You're using the same id multiple times. The ID has to be unique!! To make this to work you could call the unique id, or put a onclick on the specific row and call your function with this. In your function you can use this.value.
<script>
function ShowMeThePower(myElement) {
alert(myElement.innerHTML);
}
</script>
<div onclick="ShowMeThePower(this);">This is great!</div>
http://jsfiddle.net/3RJVd/
Edit:
To satisfy the OP:
<table>
<tr>
<td><input type="text" id="show1" value="test1" /></td>
</tr>
<tr>
<td><input type="text" id="show2" value="test2" /></td>
</tr>
</table>
<script>
for (var i = 1; i < 3; i++){
alert(document.getElementById('show' + i).value);
}
</script>
If you see, it's the same logic. Just be sure to use unique id's.
http://jsfiddle.net/4gMy6/
We have the following form:
<form>
...
<table width="100%" cellspacing="0" class="datagrid_ppal">
<tbody>
<tr>
<th scope="row">Area 1 <input name="config_line" type="hidden" value="0,5,50" /></th>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
...
</tr>
</tbody>
</table width="100%" cellspacing="0" class="datagrid_ppal">
...
<form>
What we need is to get the first, second or third from the hidden input value. We have tried this and didn't work:
var value = $('th').children('input:hidden').val();
Can anyone help us? We would really appreciate it.
The value of your hidden field is not an array, but just the string: "0,5,50".
To retrieve that value using jQuery use:
$('input[name=config_line]').val()
To split that string into an array use the split() method.
Combined:
var firstValue = $('input[name=config_line]').val().split(",")[0]; // etc...
var value = $('input[name=config_line]').val();
var valueArry = value.split(',');
var v1 = valueArry[0];
var v2 = valueArry[1];
var v3 = valueArry[2];
You'll find details Here .
var value = $('th').children("input[type='hidden']").val();
should work.