i want this code to be reusable ,instead of this :
$(this).closest("tr").find("td input").eq(1).val()
i was hoping for calling it by name using :
(($(this).closest("tr").find("td input").attr("name")) so i dont have to set every .eq(n)
but its not working :
here's my jquery code :
$('.tdiv').on("click", "#tddelete", function () {
if ($(this).closest("tr").find("td input").eq(1).val() == "ADD") alert("add");
else alert("change");
});
see this working FIDDLE for my first code.
id attributes should be unique. Also you're looking for the attribute selector in jQuery. EG.
$(this).closest("tr").find("td input[type='text']").val();
JS
$('.tdiv').on("click", ".tddelete", function () {
var inputVal = $(this).closest("tr").find("td input[type='text']").val();
alert(inputVal);
});
UPDATE FIDDLE
UPDATE BASED ON COMMENTS
It appears that you could have more than one input of type text in your table cell. As such i would suggest adding a class to the input element you are looking to get the value from.
HTML
<table class="tdiv">
<tr>
<td>
<input type="button" class="tddelete" />
</td>
<td>
<input type="text" class="getVal" value="ADD" />
</td>
</tr>
<tr>
<td>
<input type="button" class="tddelete" />
</td>
<td>
<input type="text" class="getVal" value="CHANGE" />
</td>
</tr>
</table>
JS
$('.tdiv').on("click", ".tddelete", function () {
var inputVal = $(this).closest("tr").find(".getVal").val();
alert(inputVal);
});
EXAMPLE FIDDLE
First of all you should not use id for multiple elements, so change id="tddelete" to class="tddelete" for all button elements.
<input type="button" class="tddelete" />
You can find for input element present in next td of button's parent td. Don't forget to put name attribute for input elements.
$('.tdiv').on("click", ".tddelete", function () {
var val = $(this).closest("td").siblings().find("input[name=flag]").val();
alert(val);
});
Demo
Instead of using attr, use an attribute selector in your find method .find("td input[name=somename]")
$('.tdiv').on("click", "#tddelete", function () {
if ($(this).closest("tr").find("td input[name=somename]").eq(1).val() == "ADD") alert("add");
else alert("change");
});
Related
I have a request to create a table, with "dynamic" rows adding when TAB is being pressed on last column in a row.
Eventually I've created a structure in HTML
<table id="some_table">
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
And then I've used this simple code for JS
$('#some_table').on('keydown', 'input', function (e) {
var keyCode = e.keyCode;
if (keyCode !== 9) return;
var $this = $(this),
$lastTr = $('tr:last', $('#some_table')),
$lastTd = $('td:last', $lastTr);
if (($(e.target).closest('td')).is($lastTd)) {
$lastTr.after($lastTr.clone());
}
});
And I've added script source
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
What it actually does, when you type data and press TAB on last one, the clone() is cloning last row WITH DATA, and I want to avoid that. I would like to just clone the empty columns for a new row, in fact, create new row with same structure which does not have any data.
How can one do that?
I've added jsfiddle link to it
I've just added this to your code
$('tr:last', $('#some_table')).find('td > input').each(function(index, value){
$(value).val('')
})
Take a look at
https://jsfiddle.net/ctxmb29q/
Is this what you wanted?
I am listing items via table then want to change individual names of items.
<td class="tdFileName">
<?php $nameArray = explode(".", $f->file_name); ?>
<input type="text" name="ra_name" class="raName" value="{{$nameArray[0]}}">
<button type="submit" class="btn-warning btnRaName">Düzenle</button>
</td>
<td>{{$userName}}</td>
$('.btnRaName').on('click', function (e) {
e.preventDefault();
alert($('.raName').val());
location.reload();
});
When I click the individual button I only get first input's value. How can I fix that?
On click you need to pick the prev HTML element as it will be the desired input field:
$('.btnRaName').on('click', function (e) {
e.preventDefault();
var txt = $(this).prev('input.raName').val();
console.log(txt);
location.reload();
});
You need to use DOM traversal to get only the .raName element thats related to the clicked button. Try this:
$('.btnRaName').on('click', function (e) {
e.preventDefault();
var raName = $(this).closest('td').find('.raName').val();
console.log(raName);
});
Select the element relative to your clicked element using sibling()
$('.btnRaName').on('click', function (e) {
e.preventDefault();
var raName = $(this).siblings('.raName').val();
console.log(raName);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<td class="tdFileName">
<input type="text" name="ra_name" class="raName" value="the value">
<button type="submit" class="btn-warning btnRaName">Düzenle</button>
</td>
<td class="tdFileName">
<input type="text" name="ra_name" class="raName" value="another value">
<button type="submit" class="btn-warning btnRaName">Düzenle</button>
</td>
</table>
<div id="radiodiv1">
<ul id="span1" data-role="listview">
<li>value1</li>
<li>value2</label></li>
</ul>
</div>
<br>
<table style="border:none;">
<tr>
<td>
<input type="text" id="item" />
</td>
<td>
<input type="button" value="Add params to list" onclick="appendToList()"/>
</td>
</tr>
</table>
script
$(document).on("click", "#bizParams", function(e) {
$("#span1").find("li").each(function(){
var product = $(this);
// rest of code.
console.log(product);
});
});
when clicked the button am getting in log as
Object[li.ui-li-static.ui-body-inherit.ui-first-child]
Object[li.ui-li-static.ui-body-inherit.ui-last-child]
i have to get the values as value1 and value2
can someone say what was wrong here
You want to get the text() property, not the entire object, change this:
console.log(product);
to this:
console.log(product.text());
Use
console.log(product.text());
(it is plain vanilla jQuery)
problem is with this line
var product = $(this);
You have to extract text
var product = $(this).text();
$("#myid li").click(function() {
alert(this.id); // id of clicked li by directly accessing DOMElement property
alert($(this).attr('id')); // jQuery's .attr() method, same but more verbose
alert($(this).html()); // gets innerHTML of clicked li
alert($(this).text()); // gets text contents of clicked li
});
jquery get the id/value of LI after click function
you should use :
$(document).on("click", "#bizParams", function(e) {
$("#span1").find("li").each(function(){
var product = $(this);
// rest of code.
console.log(product.text());
});
});
bur before that add the id="bizParams" to your button.
<input type="button" id="bizParams"value="Add params to list" />
I have some piece of an html table which reads like
<table>
<tr>
<td>
<input type="text" class="myclass" name="first_ele[]" value="100" />
</td>
<td>
<input type="text" class="anotherclass" name="secon_ele[]" value="" />
</td>
</tr>
</table>
I have a piece of jquery that will get the value of the element that contains class "myclass" on keyup and I am getting the proper value.
I need to get the value of the next input element.
FYI , The table gets rows added dynamically.
My issue is I don't know how to point to the next available input element.
my jquery to get the element which has the class "myclass" is as follows.
$('.tInputd').keyup(function(){
var disc = $(this).val();
});
your help is greatly appreciated.
Try
$('.myclass').on('keyup', function () {
var disc = $(this).closest('td').next().find('input').val();
});
or
$('.myclass').on('keyup', function () {
var disc = $('.anotherclass').val();
});
I have two different buttons. Both of which when clicked runs the JQuery function 'ShowCommentBox'
However when the second button is clicked I want to load an additional JQuery function along 'SHowCommentBox' - the additional function allowing extra options on screen.
<input id="SubmitCommentsForBOQ" type="button" value="Comments" onclick="ShowCommentBox('<%: item.ItemCode %>'')" />
Above is the second button I want to also run the
$("#SubmitCommentsForTwo").click(function () {
$("#hiddenBox").show();
});
, which makes the extra features visible...how can I do this?
Thank you for any replies
Below is the original JQuery: which loads a dialogue box
function ShowCommentBox(itemIdentifier, labourOrPlant, desc) {
id = itemIdentifier;
LabouringOrPlanting = labourOrPlant;
description = desc;
Function.DisplayBox(itemIdentifier);
$("#LabourOrPlantDialog").dialog({ modal: true });
}
and my other code:
<div id="LabourOrPlantDialog" title="Comments" style="display:none;">
<table class="detailstable FadeOutOnEdit">
<tr>
<th>Item</th>
</tr>
<tr>
<td id="Item"></td>
</tr>
</table>
<br />
<textarea id="ExistingComments" type="text" runat="server" rows="7" cols="30"
maxlength="2000"> </textarea>
<input id="SubmitComment" type="button" value="Submit"
onclick="SubmitButton()" />
<br />
<div id="hiddenBox">
<input type="text" name="BoqTextBox" id="BoqTextBox" value="7.15" />
</div>
</div>
It's best to separate behavior from markup. You can solve both problems using an HTML data- attribute.
First embed the data in the HTML:
<input id="SubmitCommentsForBOQ" type="button" value="Comments"
data-item-code="<%: item.ItemCode %>" />
Instead of onclick, bind the event handler using jQuery only, and perform all the actions you need at once:
$("#SubmitCommentsForBOQ").click(function () {
var itemCode = $(this).data('itemCode');
ShowCommentBox(itemCode);
});
$("#SubmitCommentsForTwo").click(function () {
$("#hiddenBox").show();
var itemCode = $(this).data('itemCode');
ShowCommentBox(itemCode);
});
Multiple handlers will execute in the order in which they are bound, so you could also do something like this:
// happens first, but only for this specific button
$("#SubmitCommentsForTwo").click(function () {
$("#hiddenBox").show();
});
// happens for all buttons
$("input[data-item-code]").click(function () {
var itemCode = $(this).data('itemCode');
ShowCommentBox(itemCode);
});