I have 4 class named Agefrom, Ageto, coverage, premium. These classes are for textboxes. I want to do something whenever the text of any textbox changes. I wrote this jQuery but it is not working:
<table>
<tr>
<td><input class="Agefrom" type="text"/></td>
<td><input class="Ageto" type="text"/></td>
<td><input class="coverage" type="text"/></td>
<td><input class="premium" type="text"/></td>
</tr>
</table>
My jQuery
$(document).ready(function(){
$('[class^=Age],.coverage,.premium').live('change', function () {
alert('do something');
});
});
My Fiddle
you should use on as live is deprecated and selector is case sensitive:
$(document).ready(function(){
$('[class^=Age],.coverage,.premium').on('change', function () {
alert('do something');
});
});
FIDDLE UPDATED
Firstly, you are using live which was removed from jQuery 2.0+. Use on instead. Secondly, class selectors are case sensitive. Try this:
$('[class^=Age], .coverage, .premium').on('change', function () {
alert('do something');
});
Updated fiddle
Also note that the change event on the text field will not fire until the element loses focus. If you need the event to fire as soon as there is a change to the value, use keyup.
A better solution entirely is to use a common class on all required elements and select that only.
Put some other common class (e.g. watchChange) on the inputs in addition to the existing classes, and match on that, i.e.:
<td><input class="watchChange Agefrom" type="text"/></td>
<td><input class="watchChange Ageto" type="text"/></td>
<td><input class="watchChange coverage" type="text"/></td>
<td><input class="watchChange premium" type="text"/></td>
$('.watchChange').on('change', document) ...
You can use , separator for this.
live is deprecated one. You can use on instead of this. But your elements are not dynamic. So you can use like this
$('.Agefrom,.Coverage,.Premium').change(function () {
alert('do something');
});
If your elements are dynamically generated, use on dellegate for binding events,
$(document).on("change",'.Agefrom,.Coverage,.Premium',function () {
alert('do something');
});
Try this and will help you lot...
$(document).ready(function(){
$('[class^=Age],.coverage,.premium').on('change', function () {
alert('do something');
});
});
Fiddle link .. http://jsfiddle.net/BL3Ft/
Possibly better add one class to row and find all input inside? something like
<table>
<tr class="rowclass">
<td><input class="Agefrom" type="text"/></td>
<td><input class="Ageto" type="text"/></td>
<td><input class="coverage" type="text"/></td>
<td><input class="premium" type="text"/></td>
</tr>
</table>
and in jQuery
$(document).ready(function(){
$('.rowclass input').on('change', function () {
alert('do something');
});
});
Related
I can't use a form in this situation, but I have a group of inputs elements. I have a table row and each td is an input. Once one loses focus I want to check to see if any others are active, if not i want to run some code.
js
$(document).on("blur", ".table-row", function(e) {
var $tr = $(e.currentTarget),
$inputs = $tr.find("inputs);
$inputs.each(function(input) {
$tr[input].is(":focus");
});
});
The idea is I'm creating an edit form. I want to make the that once the form is done being edited I will render some different html.
You will check it using $('.table-row input:focus').length. If length is 0, there isn't a focused input.
But if you check it immediately after the event was fired, you'll never get it right, because the event fire just after the input blur, but before the other input gains focus.
So, you can wrap your evaluation in an instant timeout. It'll fire after 0 seconds, but after other synchronous code has been executed.
$(document).on("blur", "input", function(e) {
setTimeout(function(){
if ($('input:focus').length) {
console.log(true);
} else {
console.log(false);
}
}, 0);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
</tr>
</table>
You can set the tabIndex to all the element of DOM and on focus change you can check whether it is last tabINdex value or not, if is it that so then render some another HTML that you want to
I have a table within a form with a dynamic number of rows that are added by clicking a button to add a new "dummy" row. I put a button at the end of each row that is supposed to delete the corresponding row, but I cannot get the delete button to do anything.
This is the enitre row with the button:
<tr id="dummyRow" class="hidden-print" style="display:none">
<td></td>
<td></td>
<td><input id="Qty" name="Qty" value="" class="qtyField" type="number" min="0" pattern="[0-9]*" maxlength="6" size="3"></td>
<td><input id="Price" name="Price" class="PriceField" type="text" maxlength="8" value=""></td>
<td><input id="Desc" name="Desc" class="hidden" value=""></td>
<td class="totalCol" taxable="true"></td>
<td><button type="button"class="btn btn-xs btn-warning" name="deleteRow"id="deleteRow">X</button></td>
</tr>
And this is the function as I currently have it (which does not work)
$("#deleteRow").click(function() {
var tr = $(this).closest('tr');
tr.remove();
totalQuote();
return false;
});
The function is within the $(document).ready(function(){} and the other button to add the rows is in the same function and works fine. I have researched this for an entire day and have tried several different ways to do this but none of them work when the button is within the "dummy row." When it is outside of the row, it works fine, just not within the row.
Does anyone have any idea what I am doing wrong? I dont know if I am putting the button in the wrong spot or the function in the wrong spot or none of the above
Since it is hidden, may be can you try showing it once on screen and removing it?
$(function () {
$("#deleteRow").click(function() {
var tr = $(this).closest('tr');
tr.remove();
totalQuote();
return false;
});
});
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<table>
<tr id="dummyRow" class="hidden-print">
<td></td>
<td></td>
<td><input id="Qty" name="Qty" value="" class="qtyField" type="number" min="0" pattern="[0-9]*" maxlength="6" size="3"></td>
<td><input id="Price" name="Price" class="PriceField" type="text" maxlength="8" value=""></td>
<td><input id="Desc" name="Desc" class="hidden" value=""></td>
<td class="totalCol" taxable="true"></td>
<td><button type="button"class="btn btn-xs btn-warning" name="deleteRow"id="deleteRow">X</button></td>
</tr>
</table>
Also please try delegating function, if you are using .clone() by using .on(). And when you give the .clone(), please pass the two parameters as true:
.clone(true, true);
This is for cloning the events as well.
If you are using this row for clone purposes, than you have to bind future events to that button, and you need to use a class instead of an ID.
To bind and event to all DOM and future ones, which you crate with JS you should use .on()
$("body").on("click",".deleteRow",callBack);
For some reason this is not working on your table code, however check this code within this JSFiddle;
$('button.btn').on('click', function () {
var a = $(this).parent().parent().remove();
totalQuote();
return false;
});
ID's should be unique to a page "It must be unique to a document". If you plan on using the dummy row multiple times, I suggest placing a class on the button instead and then using event delegation to handle .delete-row
Here is a simple example of event delegation:
(function () {
// Event delegation:
$('#unique-table-id').on('click', 'button.delete-row', function () {
$(this).closest('tr').remove();
});
$('button.add-row').on('click', function () {
$('#unique-table-id').append($('<tr><td>' + $('#unique-table-id tr').length + '</td><td><button class="delete-row">Delete</button></td></tr>'));
});
})();
table td {
border: 1px solid black;
}
table {
border: 1px solid black;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="add-row">Add Row</button>
<table id="unique-table-id"></table>
#Burimi had it exactly right. this function worked perfectly.
$("#quoteForm").on("click", ".deleteBtn", function(e) {
$(this).parent().parent().remove();
totalQuote();
});
It also worked with .closest instead of .parent().parent()
Try to add in row id a unique value to identify.
$('#myTableRow').remove();
This works fine, if your row has an id, such as:
<tr id="myTableRow"><td>blah</td></tr>
I have a table which includes a checkbox and mutliple input boxes in its each row.
I want to change the value of all input boxes of that row when I check the checkbox. Currently I only access the first input box.
My codes are.
<table>
<tr>
<td><input type="checkbox" class='isActive'/></td>
<td><input type="text" class='name'/></td>
<td><input type="text" class='name'/></td>
<td><input type="text" class='name'/></td>
</tr>
<tr>
<td><input type="checkbox" class='isActive'/></td>
<td><input type="text" class='name'/></td>
<td><input type="text" class='name'/></td>
<td><input type="text" class='name'/></td>
</tr>
</table>
and JS
$('body').on('click','.isActive',function(){
if ($(this).is(':checked')) {
$(this).parent().next().find('.name').val('Demian');
}
});
how to solve this. JS fiddle link is http://jsfiddle.net/Iftakharul_alam/txpg8mhf/1/
Do this:
$('body').on('click','.isActive',function(){
if($(this).is(':checked')) {
$(this).closest('tr').find('.name').val('Demian');
} else {
$(this).closest('tr').find('.name').val('');
}
});
This will change all .name elements on the current row.
As j08691 pointed out, you can use the ternary operator to reduce code.
When chaining several jQuery methods together, you can separate them for legibility:
$('body').on('click','.isActive',function(){
$(this)
.closest('tr')
.find('.name')
.val(this.checked ? 'Demian' : '');
});
Note that you can refer to the checked property simply as this.checked instead of $(this).is(':checked').
Fiddle
Instead of next() use parent()
$('body').on('click','.isActive',function(){
if ($(this).is(':checked')) {
$(this).parent().parent().find('.name').val('Demian');
}
});
You just need to use .nextAll() instead of .next():
$('body').on('click', '.isActive', function () {
$(this).parent().nextAll().find('.name').val($(this).is(':checked') ? 'Demian' : '');
});
jsFiddle example
And as you can see, you can use a ternary operator to reduce the amount of code.
I have a table. Inside table i have rows, each with a column : checkbox.
as following
<table>
<tr class="row">
<td class ="checkclass" ><input type="checkbox"></td>
<td></td>
<td></td>
</tr>
<tr class="row">
<td class ="checkclass" ><input type="checkbox"></td>
<td></td>
<td></td>
</tr>
</table>
I want whenever i select the checkbox, a pop up is created.
Please note : i can not edit the html code.. However i can only do some changes in javascript.
PS : At last i want to highlight the selected row.
well you could use the Jquery library and take advantage of the .change() functionality
$('.target').change(function() {
alert('Handler for .change() called.');
});
reference: http://api.jquery.com/change/
On how to use JQuery is a different question
Now for javascript its a bigger hack:
function checkAddress(checkbox)
{
if (checkbox.checked)
{
alert("a");
}
}
To add the on click on the HTML with Javascript
document.getElementById("ElementID").setAttribute("onchange", function() {checkAddress(this));
HTML
<input type="checkbox" name="checkAddress" />
please check following links
http://jqueryui.com/dialog/#modal-form
http://www.mywebdeveloperblog.com/my-jquery-plugins/modalpoplite
<td class ="checkclass" ><input type="checkbox" onchange='checkBoxClicked();'></td>
function checkBoxClicked()() {
alert("Hi");
}
for more info you can use [javascript pop-up][1] but i will suggest to go with jQuery or modal
[1]: http://www.echoecho.com/jsbasics.htm
you can do with jquery
$('.checkclass input').change(function() {
// code here
});
I hope it will help to solve your problem.
I need to loop through all checkboxes that are inside a div tag with id #abc123
How can I do this?
$("#abc123").foreach( ???? )
Update
my html row looks like:
<tr>
<td><input .../> </td>
<td>234</td>
</tr>
I need to add the value of the <td> into the ID of the checkbox.
Would I just get the parent, then ancestor it somehow?
$("#abc123 input[type=checkbox]").each(function()
{
});
UPDATE:
Ok, Let'd see if I got this straight. Given:
<tr>
<td><input .../> </td>
<td>234</td>
</tr>
You want the result to be (effectively)
<tr>
<td><input id="abc234" .../> </td>
<td>234</td>
</tr>
$("td input[type=checkbox]").each(function()
{
var id = $(this).next("td").text();
$(this).attr("id", "abc"+ id);
});
$("#abc123 input[type=checkbox]").each(function() {
$(this).dosomething();
});
Use a onkeydown event... I recommend the tab key which is keycode "9"
$(document).keydown(function(e){
if(event.keyCode == '9'){
...
}
Inside the if statement you'll need a nested if statement that checks which element is in focus and then assigns focus to the next element like this :
document.div.id.focus();
You didn't label where #abc123 is in your code. Also, do the <td> tags have any identification? The following may work.
$("#abc123 input:checkbox").each(function(i) {
id = $(this).closest('td').next('td').text();
$(this).attr('id', id);
});
I am not sure how deep your <div id="abc123"> is in the <td> so I used the closest() method to get to the cell wrapper. If it is only 1 deep, i.e. there is no <div> as it appears in your code, then you can just use parent(). Good luck.