How can I get the ID of the upper <td>’s <input> on click, in the up function? I tried so many ways like parent ID and previous ID but can not get that id.
function up(id) {
var data = $(this).prev("input[type=text]").attr('id');
alert(data)
}
<table>
<tr>
<td class="row">
<input class="latest" id="old" type="text" name="">
</td>
<td class="second margin_t8">
up
</td>
<td class="first margin_t8">
<input class="latest" id="news" type="text" name="" value="data">
</td>
</tr>
</table>
In that case, I get undefined. I want to get the previous <input> id in the alert. I need to find the data by id not by class.
Firstly, this is not pointing to the button which is clicked in this case as you don't use jQuery to add the event handler. However, you can use event.target to get the clicked element. Also, .prev() will return the previous element to the i tag which is undefined as it does not have any siblings.
Updated:
function up(id){
var data = $(event.target).closest('td').prev().find('input[type="text"]').attr('id');
alert(data);
}
Try passing the sender (which element is calling the function) as an argument to the function like :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<td class="row">
<input class="latest" id="old" type="text" name="" >
</td>
<td class="second margin_t8">
</td>
<td class="first margin_t8">
<input class="latest" id="news" type="text" name="" value="data">
</td>
</table>
<script>
function up(sender) {
var data = $(sender).prev("tr").find("input[type=text].latest").attr('id');
alert(data);
}
</script>
Hope this helps in getting the previous row's input's id!!
function up(element) {
var data = $(element).parent().prev().find("input[type=text]").attr('id');
alert(data)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<td class="row">
<input class="latest" id="old" type="text" name="" >
</td>
<td class="second margin_t8">
ss
</td>
<td class="first margin_t8">
<input class="latest" id="news" type="text" name="" value="data">
</td>
</table>
Try this out (not tested)
var data=$(this).closest('.form-grid-view-row').first().children("input[type=text]").attr('id');
Related
I have 2 fields in my form that I want to clone using jQuery, but the selecting html table structure got me confused on how to change the id and the value of my form field and also the label text. Here's the form field structure
<table>
<tbody>
<tr id="attribute-name">
<td class="label"><label for="listing_qty">quantity</label></td>
<td class="value">
<input id="listing_qty" name="field_name[]" value="quantity" class="required-entry disabled attribute-name input-text" readonly="1" type="text">
</td>
</tr>
<tr id="attribute-custom">
<td class="label"></td>
<td class="value">
<input id="listing_custom_field" name="custom_field[]" value="" placeholder="Custom Attribute Field" type="text" class=" input-text">
</td>
</tr>
</tbody>
</table>
You will need to clone the entire element and then update the id's, values, and text in the cloned element before inserting.
function appendClonedFormInput(el,
newId,
newInputId,
newLabelText,
newName,
newValue) {
// Clone and update id
var $cloned = $(el)
.clone()
.attr('id', newId);
// Update label
$cloned.find('label')
.attr('for', newInputId)
.text(newLabelText);
// Update input
$cloned.find('input')
.attr('id', newInputId)
.attr('name', newName)
.val(newValue);
return $cloned.insertAfter(
$('input').last().parents('tr'));
}
appendClonedFormInput('#attribute-name',
'new-attribute-id',
'new-inp-id',
'New Label',
'new_field',
'new value');
appendClonedFormInput('#attribute-custom',
'new-custom-id',
'new-custom-inp-id',
'New Custom',
'new_custom',
'new custom value');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr id="attribute-name">
<td class="label">
<label for="listing_qty">quantity</label>
</td>
<td class="value">
<input id="listing_qty" name="field_name[]" value="quantity" class="required-entry disabled attribute-name input-text" readonly="1" type="text">
</td>
</tr>
<tr id="attribute-custom">
<td class="label"></td>
<td class="value">
<input id="listing_custom_field" name="custom_field[]" value="" placeholder="Custom Attribute Field" type="text" class=" input-text">
</td>
</tr>
</tbody>
</table>
You can clone the HTML element using .clone() jquery function and on the cloned HTML element perform all the jquery operation as we can perform on normal jquery selector.
Please check below working snippet. In snippet I have changed the label name and ids.
$(function(){
var _counter = 1;
$("#cloned_html").on("click",function(){
var $button = $('#attribute-name').clone().prop("id","attribute-name-"+_counter);
$button.find('#listing_qty').prop("id","listing_qty_"+_counter).val("quantity-"+_counter);
$button.find("label").html("Quantity-"+_counter);
var selector = '#attribute-name'
if(_counter>1){
selector = '#attribute-name-'+(_counter-1)
}
$($button).insertAfter(selector);
_counter++;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr id="attribute-name">
<td class="label"><label for="listing_qty">quantity</label></td>
<td class="value">
<input id="listing_qty" name="field_name[]" value="quantity" class="required-entry disabled attribute-name input-text" readonly="1" type="text">
</td>
</tr>
<tr id="attribute-custom">
<td class="label"></td>
<td class="value">
<input id="listing_custom_field" name="custom_field[]" value="" placeholder="Custom Attribute Field" type="text" class=" input-text">
</td>
</tr>
</tbody>
</table>
<button id="cloned_html">Clone</button>
You should separate the final render from the template. Another important part of your feature would be assign an unique number to compose ids and names.
I would suggest you to implement a solution like https://github.com/BorisMoore/jquery-tmpl
Put the template inside a script node with an Id then copy it's content and replace {} occurrences as you need.
I have a Table in which I have checkboxes that onclick on checkboxes I want to know 2 things
ID of the checkbox
ID of the hidden field on same table row
So I do have a hidden field in each row and I want to know what that value is
My checkbox I can see from my Fiddle is GridView1__ctl3_chkOut but then I want jquery to find the value of the hidden field in same table row
I see that GridView1__ctl2_hndTxtId value is 3601 , but I will have many rows ...
Fiddle --> http://jsfiddle.net/bthorn/x9fc28nn/2/
jquery
$('.out').on('change', function () {
$(this).closest('tr').find('.out').not(this).prop('checked', false);
console.log(this.id);
//what is the hidden field value in same row?
});
$('.yesno').on('change', function () {
$(this).closest('tr').find('.yesno').not(this).prop('checked', false);
//what is the hidden field value in same row?
});
console.log shows me the ID
<table>
<tr>
<td style="width:5px;">
<input type="hidden" name="GridView1:_ctl2:hndTxtId" id="GridView1__ctl2_hndTxtId" value="3601">
</td>
<td style="width:50px;"> <span id="GridView1__ctl2_lblVehicle0">413</span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl2_lblName2">LONG</span>
</td>
<td style="width:100px;"> <span id="GridView1__ctl2_lblEquip2">BKT/TDR/M</span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl2_lblScheduleb">0600-1430</span>
</td>
<td style="width:50px;"> <span id="GridView1__ctl2_lblScheduleOrig2">8</span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl2_lblTimeOn"></span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl2_lblTimeOff"></span>
</td>
<td>
<input id="GridView1__ctl2_chkOut" type="checkbox" name="GridView1:_ctl2:chkOut" checked="checked" class="out">
</td>
<td>
<input id="GridView1__ctl2_chkYes2" type="checkbox" name="GridView1:_ctl2:chkYes2" checked="checked" class="yesno">
</td>
<td>
<input id="GridView1__ctl2_chkNo2" type="checkbox" name="GridView1:_ctl2:chkNo2" class="yesno">
</td>
<td style="width:5px;">
<input type="submit" name="GridView1:_ctl2:AddButton0" value="On" onclick="setDateTimeOn(this); return false;" language="javascript" id="GridView1__ctl2_AddButton0" class="btn-blue">
</td>
<td style="width:150px;">
<input name="GridView1:_ctl2:txtStormTimeOn" type="text" value="9-15-2015 12:00" id="GridView1__ctl2_txtStormTimeOn">
</td>
<td style="width:5px;">
<input type="submit" name="GridView1:_ctl2:OffButton" value="Off" onclick="setDateTimeOn(this); return false;" language="javascript" id="GridView1__ctl2_OffButton" class="btn-blue">
</td>
<td style="width:150px;">
<input name="GridView1:_ctl2:txtStormTimeOff" type="text" value="9-15-2015 12:28" id="GridView1__ctl2_txtStormTimeOff">
</td>
<td style="width:500px;"> <span id="GridView1__ctl2_lblComments"></span>
</td>
<td style="width:500px;">
<input name="GridView1:_ctl2:txtStormComments" type="text" value="testfasdfsdfasdfsadfasdfsadf" maxlength="200" id="GridView1__ctl2_txtStormComments" style="width:200px;">
</td>
</tr>
<tr>
<td style="width:5px;">
<input type="hidden" name="GridView1:_ctl2:hndTxtId" id="GridView1__ctl2_hndTxtId" value="3601">
</td>
<td style="width:50px;"> <span id="GridView1__ctl3_lblVehicle0">215</span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl3_lblName2">MORGAN</span>
</td>
<td style="width:100px;"> <span id="GridView1__ctl3_lblEquip2">BKT/TDR</span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl3_lblScheduleb">0600-1430</span>
</td>
<td style="width:50px;"> <span id="GridView1__ctl3_lblScheduleOrig2">8</span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl3_lblTimeOn"></span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl3_lblTimeOff"></span>
</td>
<td>
<input id="GridView1__ctl3_chkOut" type="checkbox" name="GridView1:_ctl3:chkOut" class="out">
</td>
<td>
<input id="GridView1__ctl3_chkYes2" type="checkbox" name="GridView1:_ctl3:chkYes2" class="yesno">
</td>
<td>
<input id="GridView1__ctl3_chkNo2" type="checkbox" name="GridView1:_ctl3:chkNo2" class="yesno">
</td>
<td style="width:5px;">
<input type="submit" name="GridView1:_ctl3:AddButton0" value="On" onclick="setDateTimeOn(this); return false;" language="javascript" id="GridView1__ctl3_AddButton0" class="btn-blue">
</td>
<td style="width:150px;">
<input name="GridView1:_ctl3:txtStormTimeOn" type="text" id="GridView1__ctl3_txtStormTimeOn">
</td>
<td style="width:5px;">
<input type="submit" name="GridView1:_ctl3:OffButton" value="Off" onclick="setDateTimeOn(this); return false;" language="javascript" id="GridView1__ctl3_OffButton" class="btn-blue">
</td>
<td style="width:150px;">
<input name="GridView1:_ctl3:txtStormTimeOff" type="text" id="GridView1__ctl3_txtStormTimeOff">
</td>
<td style="width:500px;"> <span id="GridView1__ctl3_lblComments"></span>
</td>
<td style="width:500px;">
<input name="GridView1:_ctl3:txtStormComments" type="text" maxlength="200" id="GridView1__ctl3_txtStormComments" style="width:200px;">
</td>
</tr>
</table>
You already got the ID of the checkbox. To get the value of the hidden input field of the row use the following code:
$('.yesno').on('change', function () {
$(this).closest('tr').find('input[type="hidden"]').val()
});
See this JSfiddle demo
You can find information about the selectors at : https://api.jquery.com/category/selectors/
Taking a part of your fiddle, it looks about:
$tr = $(this).closest('tr');
hidden = $tr.find('input[type="hidden"]');
console.log(hidden);
Use the find method as you are already using but with 'input[type=hidden]':
$('.out').on('change', function () {
var $tr = $(this).closest('tr');
$tr.find('.out').not(this).prop('checked', false);
console.log(this.id);
//what is the hidden field value in same row?
var hiddenVal = $tr.find('input[type=hidden]').val();
console.log(hiddenVal);
});
$('.yesno').on('change', function () {
var $tr = $(this).closest('tr');
$tr.find('.yesno').not(this).prop('checked', false);
//what is the hidden field value in same row?
var hiddenVal = $tr.find('input[type=hidden]').val();
console.log(hiddenVal);
});
Fiddle
You already have the id of the checkbox. You can get the id of the hidden input element using:
var hiddenID = $(this).closest('tr').find('input[type=hidden]').prop('id');
And you can get the value of the same field like so:
var hiddenVal = $(this).closest('tr').find('input[type=hidden]').val();
Following is my table structure:
<tr class="odd">
<td class=" sorting_1">
<input id="clone1042154701" class="fileCheckAll" type="checkbox" name="clone1042154701" checked="">
</td>
<td class="">
<input id="appName1042154701" class="fileAppName invalid" type="text" onblur="validate(this.value,1042154701)" name="appName1042154701">
<div id="error1042154701">
</td>
<tr>
<tr>
<tr class="even">
<td class=" sorting_1">
<input id="clone1042154702" class="fileCheckAll" type="checkbox" name="clone1042154702" checked="">
</td>
<td class="">
<input id="appName1042154702" class="fileAppName invalid" type="text" onblur="validate(this.value,1042154701)" name="appName1042154701">
<div id="error1042154702">
</td>
<tr>
<tr>
.
.
.
and many more rows
On onblur event I am calling a javascript validate function which sets class as "invalid" on error.
Now before form submission I am call a javascript method inside which checks class for error and returns false id error.
if ($("[id^=appName]").hasClass("invalid")) {
alert("Invalid Application name");
return false;
}
The problem that I am facing is that it is validation all the table rows irrespective of whether it is checked via checkbox or not. I need to validate only those row which are checked via checkbox.
Can some please suggest me how to proceed.
Updated answer: it took me while, but I might have got the desired result. So if you use the following:
if ($(".invalid[id^=appName]").closest("tr").find("input:checked").length > 0 ) {
alert("Invalid Application name");
return false;
}
it alerts only if there are at least one element with class invalid and the checkbox is selected on the same row.
Also, I'd have a look at the table as well, I noticed some missing ending tags for tr (</tr>) and for divs that were inside td. Sorry for pointing this out, but it might have some effect on HTML validation.
function validate() {
var invalidRowCount = $(".invalid[id^=appName]").closest("tr").find("input:checked").length;
console.log(invalidRowCount); //prints 2
if ($(".invalid[id^=appName]").closest("tr").find("input:checked").length > 0 ) {
alert("Invalid Application name");
return false;
}
}
td div { display: inline }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr class="odd">
<td class=" sorting_1">
<input id="clone1042154701" class="fileCheckAll" type="checkbox" name="clone1042154701" checked="">
</td>
<td class="">
<input id="appName1042154701" class="fileAppName invalid" type="text" onblur="validate(this.value,1042154701)" name="appName1042154701">
<div id="error1042154701">invalid</div>
</td>
</tr>
<tr class="even">
<td class=" sorting_1">
<input id="clone1042154702" class="fileCheckAll" type="checkbox" name="clone1042154702" checked="">
</td>
<td class="">
<input id="appName1042154702" class="fileAppName invalid" type="text" onblur="validate(this.value,1042154701)" name="appName1042154701">
<div id="error1042154702">invalid</div>
</td>
</tr>
<tr class="odd">
<td class=" sorting_1">
<input id="clone1042154701new" class="fileCheckAll" type="checkbox" name="clone1042154701new" checked="">
</td>
<td class="">
<input id="appName1042154701new" class="fileAppName" type="text" onblur="validate(this.value,1042154701)" name="appName1042154701">
<div id="error1042154701new">valid</div>
</td>
</tr>
</table>
<br>
<button onclick="validate()">Click me</button>
You can use:
$('#someId').filter(':checked');
i.e. use the filter method for it.
I have a table which is defined like:
<table>
<tr>
<td>
<label>First</label>
</td>
<td>
<input type='text' style='widht:200px; height:100px;' />
</td>
<td>
<button class='but'></button>
</td>
</tr>
<tr>
<td>
<label>Second</label>
</td>
<td>
<select style='widht:100px; height:150px;'>
<option>one</one>
</select>
</td>
<td>
<button class='but'></button>
</td>
</tr>
<tr>
<td>
<label></label>
</td>
<td>
<input type='text' style='widht:200px; height:100px;' />
</td>
<td>
<button class='but'></button>
</td>
</tr>
<tr>
<td>
<label>Third</label>
</td>
<td>
<textarea style='widht:500px; height:200px;'></textarea>
</td>
<td>
<button class='but'></button>
</td>
</tr>
</table>
Then on button click I want to get the height of the previous control. So I wrote this code:
$(".but").live('click',function(){
alert($(this).prev().css('width'));
alert($(this).prev().css('height'));
});
But the alert's are showing the values as undefined. How can I solve this?
Use:
var input = $(this).parent().prev().find("input");
if(input) { // You have a select, so this won't be found in all circumstances
alert(input.css('width'));
alert(input.css('height'));
}
Use real width() to get real width of an element instead of width defined in css (.css('width')). The same applies for height:
$(".but").live('click',function(){
alert($(this).prev().width());
alert($(this).prev().height());
});
you can try: jsFiddle
$(".but").live('click',function(){
alert($(this).closest("tr").find('input').css('width'));
// OR
//alert($(this).closest("tr").find('select').css('width'));
});
In fact there is no previous target of your buttons.
If you want the TD height, you should call .parent() instead.
And please, pay attention to your HTML !
EDIT: Fiddle updated:
http://jsfiddle.net/jVsRW/4/
$(".but").on('click', function() {
// Of course display null for the first button that do not have a previous form element.
alert($(this).closest('tr').prev().find('input, select, textarea').height());
});
Here is my html:
<table>
<tbody><tr>
<td>
<label for="DocumentsName">Názov</label>
</td>
<td>
<input name="DocumentsName" class="input documentsName" value="" style="width: 10em;" type="text">
</td>
</tr>
<tr>
<td>
<label for="DocumentsDescription">Popis</label>
</td>
<td>
<textarea name="DocumentsDescription" id="DocumentsDescription" cols="15" rows="4" class="input" style="width: 340px; font: 1em sans-serif;"></textarea>
</td>
</tr>
<tr>
<td>
<label for="Document1">Doc 1</label>
</td>
<td>
<input name="Document1" class="input document1" style="width: 10em;" type="file">
</td>
</tr>
</tbody></table>
+++++
I am trying to get the litest input with type="file" from the table upon clicking the #addDocumentFileInput link.
This returns null. Why?
<script type="text/javascript">
$(document).ready(function() {
$("#addDocumentFileInput").click(function() {
var $lastFileInput = $(this).prev().children("tr").last().children("input");
alert($lastFileInput.html());
return false;
});
});
</script>
Because prev() gives you the table element and it has no tr children, only one tbody child. A row has no input children either, only td children.
children only searches for elements one level below.
Use find instead:
$(this).prev().find('input[type="file"]').last()
// or fancy: find('input:file:last')