I have a table with a hidden field in each row. I need to Alert the value of hidden field when a button in that row is clicked. I have the following jQuery code. But it does not work. How do we make it work?
CODE: http://jsfiddle.net/Lijo/xWanB/
<script>
$(document).ready(function () {
//"Show ID" for Associate Button Click
$('.resultGridTable tr > td > .actionButtonNational').click(function () {
//"this" means show ID button
//Traversing to get the parent row and then the required columns in the row
var associateID = $(this).parents('tr:first > .wrapperDivHidden input[type=hidden]').val();
alert(associateID);
return false;
});
});
</script>
HTML
<td>
XXXXX
<input type="submit" name="ctl00$detailContentPlaceholder$grdSubscribedAssociates$ctl04$btnNational"
value="Show ID" id="detailContentPlaceholder_grdSubscribedAssociates_btnNational_2"
class="actionButtonNational" style="color: White; background-color: #A7A7A6;
font-weight: bold; width: 60px" />
<div id="wrapperDivHidden" class="wrapperDivHidden">
<input type="hidden" name="ctl00$detailContentPlaceholder$grdSubscribedAssociates$ctl04$hdnAssociateID"
id="detailContentPlaceholder_grdSubscribedAssociates_hdnAssociateID_2"value="789345680" />
</div>
</td>
your selector starts with tr:first > .wrapperDivHidden ... but .wrapperDivHidden is not an immediate child of tr so change your selector like so:
$(this).parents('tr').find('.wrapperDivHidden input[type="hidden"]').val();
Fiddle: http://jsfiddle.net/xWanB/3/
Try this:
<script type="text/javascript">
$(document).ready(function () {
//"Show ID" for Associate Button Click
$('.actionButtonNational').click(function () {
var associateID = $('input[type=hidden]', $(this).closest("td")).val();
alert(associateID);
return false;
});
});
</script>
Here is an over simplified example of what you are trying to do:
http://jsfiddle.net/6S5rD/
if the first column of your row is hidden then use this
var x = $('input[type=hidden]', $(this).find("td:first")).val();
Related
I would like to ask if anyone knows how to solve my problem. Filtering works for every other (I want to use case insensitive), but the checkbox does not appear after searching for "food". I need to create a list of categories with checkboxes. If you search for a category, you can immediately check the checkbox
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myDIV *").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
</head>
<body>
<h2>Filter</h2>
<!--Type something in the input field to search for a specific text inside the div element with id="myDIV" -->
<input id="myInput" type="text" placeholder="Search..">
<div id="myDIV">
<p>dog</p>
<div>master20</div>
<button>Button</button>
<p>Welcome5</p>
<label class="important_class_for_me">Food
<input type="checkbox">
<span class="my_custom_checkmark"></span>
</label>
</div>
</body>
</html>
The problem is character *, selector $("#myDIV *"). By specifying this character you are referring to all children as parent - child - child - child ....
You only need to reference the first child of parent #myDIV. Replace * with >. Like that:
$("#myDIV >").filter(function() { ... }
$(document).ready(function () {
$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#myDIV >").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Filter</h2>
<!--Type something in the input field to search for a specific text inside the div element with id="myDIV" -->
<input id="myInput" type="text" placeholder="Search.." />
<div id="myDIV">
<p>dog</p>
<div>master20</div>
<button>Button</button>
<p>Welcome5</p>
<label class="important_class_for_me">
Food
<input type="checkbox" />
<span class="my_custom_checkmark"></span>
</label>
</div>
You are hiding every element inside myDIV, not only the intimidate child.
it happens that :
<input type="checkbox">
<span class="my_custom_checkmark"></span>
both are child and they do not have .text() so they will toggle.
Instead, just do the filter by the intimidate child by changing $("#myDIV *") to $("#myDIV > *")
I have a problem with removing cloned div. I*m unable to remove the cloned div which div clicked on to be remove. My code is like below:
<div id="item_details">
<table>
<tr>
<td>
<p class="label_text">Name:</p>
</td>
<td>
<input name="item_name[]" type="text" value="" id="item_name" class="input_text" style="width: 126px;" />
</td>
<td>
<p class="label_text">Brand:</p>
</td>
<td>
<input name="item_brand[]" type="text" value="" id="item_brand" class="input_text" style="width: 126px;" />
</td>
<td>
<p class="label_text">Model No:</p>
</td>
<td>
<input name="model_number[]" type="text" value="" id="model_number" class="input_text" style="width: 126px;" />
</td>
</tr>
</table>
<p style="margin:-16px 0px 0px 600px;">
Remove Item
</p>
</div>
<div id="new_item_details" class="new_item_details"></div>
<p style="margin:0px 0px 0px 0px;">
Add New Item Here
</p>
And my jquery code like this:
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script>
jQuery(document).ready(function(){
var id=0;
var max=10;
jQuery('#add_item').click(function(){
var button = $('#item_details').clone();
id++;
button.find('input').val('');
button.removeAttr('id');
button.insertBefore('.new_item_details');
button.attr('id','new_'+id);
});
jQuery('.remove').click(function(e){
jQuery("#new_1").last().remove();
//jQuery('#removeitem').toggle( !$("#new_item_details").is(":empty") );
e.preventDefault();
});
});
</script>
I tried like this. For every cloned div I appended new div id with increment number. But I'm unable to remove the particular cloned div. First div dont be removed. please help me how to solve this. Thanks.
The problem is that you subscribe to .remove elements click event at page load. The .remove elements inside your cloned divs will not be part of this subscribe. You have to use event delegation to subscribe to new elements created after page load as well:
replace:
jQuery('.remove').click(function(e){
by
jQuery(document).on('click', '.remove', function(e){
Also, a simpler solution will be to just remove the parent div of your clicked .removeelement:
jQuery(document).on('click', '.remove', function(e){
var parentDiv = jQuery(this).parent().parent();
// if not original div (id == item_details)
if(parentDiv.attr('id') !== 'item_details') {
parentDiv.remove();
}
e.preventDefault();
});
Whilst the first answer was there before me and pointed out the problem with the click, I'll still post this as I may as well, it's a different approach to solving the removal.
I've added data attributes to each of the clones, and a corresponding data-id to the button too, so on click it check it's id and removes the form with that id.
So if it helps :) http://jsfiddle.net/sfmwbgfa/
jQuery(document).ready(function(){
var id=0;
var max=10;
jQuery('#add_item').click(function(){
var button = $('#item_details').clone();
id++;
button.find('input').val('');
button.removeAttr('id');
button.insertBefore('.new_item_details');
button.attr('id','new_'+id).attr('data-id', id);
button.find('.remove').attr('data-id',id);
});
jQuery(document).on('click', '.remove', function(e){
var thisId = jQuery(this).data('id');
jQuery('div[data-id="'+thisId+'"]').remove();
//jQuery('#removeitem').toggle( !$("#new_item_details").is(":empty") );
e.preventDefault();
});
});
try
use event delegation like which is used by manji
jQuery(document).on("click",".remove",function (e) {
OR use clone(true) : it will copy event handler (deep copy)
var button = $('#item_details').clone(true);
NOTE: id should be unique
var id = 0;
jQuery(document).ready(function () {
var max = 10;
jQuery('#add_item').click(function () {
var button = $('#item_details').clone(true);
id++;
button.find('input').val('');
button.removeAttr('id');
button.insertBefore('.new_item_details');
button.attr('id', 'new_' + id);
});
jQuery('.remove').click(function (e) {
jQuery("#new_"+id).remove();
//jQuery('#removeitem').toggle( !$("#new_item_details").is(":empty") );
id--;
e.preventDefault();
});
});
**
DEMO
**
I'm trying to remove input's val when clicking a button that appear when focusing on input.
This is my html:
<div class="search-area">
<form action="#" id="ingredientSearchForm">
<input type="text" placeholder="Arama" id="ingredientsSearch"/>
<span class="clearable"></span>
<span></span>
<input id="ingredientSearchSubmit" type="submit" class="hidden" placeholder="Arama"/>
</form>
</div>
And this is javascript function:
var searchinput = $(".search-area").find("input");
searchinput.focus(function(){
$(this).data('placeholder',$(this).attr('placeholder'));
$(this).attr('placeholder','');
$(this).siblings(".clearable").show();
});
$(".search-area").find(".clearable").on("click", function() {
$(this).val('');
});
searchinput.blur(function(){
$(this).attr('placeholder',$(this).data('placeholder'));
$(this).siblings(".clearable").hide();
});
.clearable is a span with background. Normally it is display:none.
I think you're wanting to clear searchinput on clicking .clearable?
If so, you should instead use:
$(".search-area").find(".clearable").on("click", function() {
searchinput.val('');
});
if you want to remove value of span then:
$(".search-area").find(".clearable").on("click", function() {
$(this).text('');
});
if you are trying to remove textbox value then:
$(".search-area").on("click",".clearable", function() {
$(this).closest("#ingredientSearchForm").find('#ingredientsSearch').val('');
});
Please help me with this issues.
i'm going to get the index number of checked checkbox array which reside in a html table, but each time i alert the each of checkbox's index inside .each() , its will return 0 for each loop.
but this code will work if i remove the table and all its tr and td (leave the two checbox alone)
my jquery code:
function notify() {
$("input[type = 'checkbox']:checked").each(function(){
alert($(this).index()); /*always return zero when the check[] inside a table or div */
});
}
function main() {
$("input[type = 'button']").click(notify);
}
$(document).ready(main);
my html code:
<table>
<tr><td>
<input type='checkbox' name='check[]' />
</td><td>
<input type='checkbox' name='check[]' />
</td> </tr>
</table>
<input type='button' name='button' value='ok'/>
this is the link to my code in jsfiddle
Try this
$("input:checkbox:checked").each(function(index,value){
alert($(this).parents('td').index());
});
http://jsfiddle.net/cuNE6/9/
This is probably what you are looking for. SInce you are wrapping your check boxes in td's, why not find the index of td
[Demo]
function notify() {
$("input[type = 'checkbox']:checked").each(function () {
alert($(this).parents('td').index());
});
}
I have the following partially completed code example that clicking on any table cell populates the firstinput text box. I'd like 2nd and 3rd clicks in the table to populate the 2nd and 3rd input fields. And if a fourth text cell is clicked, it starts the count over by populating from the first field, etc.
There's also a small bug in the function that when the page first loads, it doesn't recognize the first mouse click. It takes a 2nd click to populate the first field.
Thank you in advance for helping me solve this and learn from it. :)
<html>
<head>
<style>
td:hover { cursor: hand; color: blue; font-weight: bold; background: #FFDE00; }
</style>
</head>
<body >
<p>Click on a cell to have it populate the text fields below<p>
<table border="1" onclick="populateFields()" style=font-size:11; cellspacing="1" cellpadding="5">
<tr><td>apple</td><td>orange</td><td>banana</td><td>peach</td></tr>
<tr><td>tomato</td><td>potato</td><td>onion</td><td>garlic</td></tr>
<tr><td>chicken</td><td>fish</td><td>beef</td><td>pork</td></tr>
</table>
<form>
<p>The cells you clicked on contain this data:</p>
<input type="text" name="item1" id="txtCellData"></input>
<input type="text" name="item2" id="textCellData2"></input>
<input type="text" name="item3" id="textCellData3"></input>
</form>
<script>
function populateFields(){
//put all tds in an array
var alltds = document.getElementsByTagName("td");
//go through each item in the array
for (var i in alltds) {
alltds[i].onclick = function (){
txtCellData.value = this.innerHTML;
}
}
}
function setThis(value) {
document.getElementById("txtCellData").value = value;
}
</script>
</body>
</html>
Created a fiddle for you . Look at this code
<body onload=populateFields() >
<p>Click on a cell to have it populate the text fields below<p>
<table border="1" onclick="populateFields()" style=font-size:11; cellspacing="1" cellpadding="5">
<tr><td>apple</td><td>orange</td><td>banana</td><td>peach</td></tr>
<tr><td>tomato</td><td>potato</td><td>onion</td><td>garlic</td></tr>
<tr><td>chicken</td><td>fish</td><td>beef</td><td>pork</td></tr>
</table>
<form>
<p>The cells you clicked on contain this data:</p>
<input type="text" name="item1" id="txtCellData"></input>
<input type="text" name="item2" id="textCellData2"></input>
<input type="text" name="item3" id="textCellData3"></input>
</form></body>
<script>
var index=0;
function populateFields(){
//put all tds in an array
var alltds = document.getElementsByTagName("td");
//go through each item in the array
for (var i in alltds) {
alltds[i].onclick = function (){
if(index==1){txtCellData.value = this.innerHTML;}
else{
setThis(this.innerHTML);
}
}
}
if(index<3){
index++;
}else{
index = 1;
}
alert(index);
}
function setThis(value) {
document.getElementById("textCellData"+index).value = value;
}
</script>