Develop Reference

Alert multiple column using javascript

I'm trying to alert fields. Here is my html
<table width="100%" id="example1" class="table table-bordered table-striped">
<tr>
<td> Nip </td>
<td> Nama Lengkap </td>
</tr>
<tr id='ke0'>
<td> <input class="form-control nipnya" type="text" name="nip[]" /> </td>
<td> <input class="form-control namanya" type="text" name="namalengkap[]" /> </td>
</tr>
<tr id='ke1'>
</tr>
</table>
<div>
<a id="add_row" class="btn btn-success pull-left">Tambah Baris Baru</a>
<a id="delete_row" class="pull-left btn btn-danger">Hapus Baris</a>
</div>
and i have this jquery
$(document).ready(function() {
$("#rmnya").change(function() {
$('#td11').html($("#rmnya").val());
});
var i = 1;
$("#add_row").click(function() {
$('#ke' + i).html('<td><input class="form-control nipnya" type="text" name="nip[]" /> </td>' +
'<td> <input class="form-control namanya" type="text" name="namalengkap[]" />' +
'</td>');
$('#example1').append('<tr id="ke' + (i + 1) + '"></tr>');
i++;
});
$("#delete_row").click(function() {
if (i > 1) {
$("#ke" + (i - 1)).html('');
i--;
}
});
});
As you can see from my script. There is only one Row <tr></tr>. I can alert it if it only one row. But when click Tambah Baris Baru there is another row showing up. I can't alert it. Here is my other javascript
$(".nipnya").change(function(){
$('.nipnya').each(function(i, obj) {
alert($('.nipnya').val());
});
});
So, can you tell me how to alert after onchange in every field that showing up dynamically.
Here is my fiddle https://jsfiddle.net/spc5884w/
Sorry for my bad english.

Currently what you are using is called a "direct" binding which will only attach to element that exist on the page at the time your code makes the event binding call.
You need to use Event Delegation using .on() delegated-events approach, when generating elements dynamically.
General Syntax
$(staticParentElement).on('event','selector',callback_function)
Example
$('table').on('click', ".nipnya", function(){
alert($(this).val());
});
DEMO

how to add jquery toggle between smarty loop or foreach items

For the jquery Guru's out there, I am trying. I am trying to add a jquery toggle between smarty template { foreach item list } my code works great just that it works on the first list item, it does not toggle when I click on the 2nd, 3rd etc items in the list. any suggestions?
jquery code
<script>
$(function(){
$("#itm_add").each(function(){
$(this).click(function(e){
e.preventDefault();
$("#itm_add_box").parent("tr").empty();
href=$(this).attr("href");
$(this).closest("tr").next("tr").empty().append('<td colspan="6"><div
id="itm_add_box" data-href="'+href+'">
<input type="text" id="itm_serial" class="input" placeholder="Serial
Number..." />
<input type="text" id="itm_qty" class="input"
placeholder="Quantity..." />
<button class="green" id="itm_submit">Submit</button></div><td>');
$("#itm_add_box button").click(function(e){
e.preventDefault();
href2=$(this).parent("#itm_add_box").attr("data-href");
serial=$(this).parent().find("#itm_serial").val();
qty=$(this).parent().find("#itm_qty").val();
href2=href2+"&item_serial="+serial+"&item_quantity="+qty;
window.location=href2;
});
});
});
});
</script>
Smarty template:
<table>
<tr>
<td class="olohead" align="center" width="80">ID</td>
<td class="olohead" align="center">Type</td>
<td class="olohead" align="center">Name</td>
<td class="olohead" align="center">No</td>
<td class="olohead" align="center">Features</td>
</tr>
{foreach from=$customer item=customer}
<td class="olotd4" nowrap align="center">{$customer.ID}</td>
<td class="olotd4" nowrap align="center">{$customer.TYPE}</td>
<td class="olotd4" nowrap > {$customer.NAME} </td>
<td class="olotd4" nowrap > {$customer.NO} </td>
<td class="olotd4" nowrap align="center">
<a id="itm_add">Add</a>
</td>
</tr>
{/foreach}
</table>
Again: This works, just that the toggle only works on the first listed item. Any suggestions?

The suggestion to remove the id from the loop and make it into a class was already made in the comments. With that in mind, I tried to clean up your js a bit:
$(function() {
$(".itm_add").click(function(e) {
e.preventDefault();
$(this).parent("tr").empty();
$(this).closest("tr").next("tr").empty().append(getTemplate($(this).attr("href")));
$(this).find("button").click(function(e) {
e.preventDefault();
var href = $(this).parent("#itm_add_box").attr("data-href");
var serial = $(this).parent().find("#itm_serial").val();
var qty = $(this).parent().find("#itm_qty").val();
href += "&item_serial=" + serial + "&item_quantity=" + qty;
window.location = href;
});
});
});
function getTemplate(href) {
return '<td colspan="6">'
+ '<div id="itm_add_box" data-href="' + href + '" >'
+ '<input type="text" id="itm_serial" class="input" placeholder="Serial Number..." /> '
+ '<input type="text" id="itm_qty" class="input" placeholder="Quantity..." /> '
+ '<button class="green" id="itm_submit">Submit</button>'+
+'</div>'
+ '<td>';
}
Note that this code is not tested, so there could be bugs in there...
What I changed:
Removed the .eachas it is not required. jQuery will automatically
add the event handler on all elements that the selector applies to.
Used $(this) inside the handler, to make the code only apply to the item that has triggered the event, in stead of all the matched items.
Moved the html to a separate function, just to keep things a bit more readable.
Made all the variables function scope in stead of global, by adding the varkeyword in front of their declaration.
Let me know if there are any bugs that I missed, or if this is anything that needs further explanation.

jQuery dynamically mark all checkboxes checked

I have the following HTML structure -
<div class="first_checkbox">
<input type="checkbox" name="checkbox" class="all-checkbox" value="">
</div>
<table>
<tr>
<td>
<input type="checkbox" name="checkbox-32" id="checkbox-32" value="" style="opacity: 0;" />
</td>
<td class="h_pincode">380059</td>
<td class="b_add2">Nr. Swatik Cross Road, Navrangpura</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox-34" id="checkbox-34" value="" style="opacity: 0;" />
</td>
<td class="h_pincode">380015</td>
</tr>
</table>
The functionality, I want to achieve is, when I click on the first radio box, all the subsequent checkbox in s be checked.
The JS to do that is as follows -
$(function(){
$(".all-checkbox").on("click", function(){
$('input[type=checkbox]').each(function(ind, val){
$(this).prop('checked', 'checked');
console.log(this.name + ' ' + this.value + ' ' + this.checked);
});
});
});
I am getting the console logs correctly, only difference being, the radio boxes does not get checked.
The fiddle is located here - http://jsfiddle.net/dAJM8/

check jsFiddle
JQuery
$("#checkbox-all").click(function () {
$('input:checkbox').not(this).prop('checked', this.checked);
});

Filter table with multiple radio inputs

All I want is filter the table with radio inputs.
This is my jsfiddle
I am using this inputs and table:
<div style="border:1px solid;">
<input type="radio" id="Bob" name="name" />Bob
<input type="radio" id="Jay" name="name" />Jay
</div>
<div style="border:1px solid; margin:5px 0;">
<input type="radio" id="developer" name="position" />Developer
<input type="radio" id="itManager" name="position" />Manager
</div>
<table border="1" style="text-align:center;">
<tr>
<th>Name</th><th>Position</th>
</tr>
<tr>
<td>Bob</td><td>Developer</td>
</tr>
<tr>
<td>Jay</td><td>Manager</td>
</tr>
<tr>
<td>Bob</td><td>Manager</td>
</tr>
<tr>
<td>Jay</td><td>Developer</td>
</tr>
</table>
and this js:
$('#Bob').change( function() {
$('tr').show();
$('tr:not(:has(th)):not(:contains("Bob"))').hide();
});
$('#Jay').change( function() {
$('tr').show();
$('tr:not(:has(th)):not(:contains("Jay"))').hide();
});
$('#developer').change( function() {
$('tr').show();
$('tr:not(:has(th)):not(:contains("Developer"))').hide();
});
$('#itManager').change( function() {
$('tr').show();
$('tr:not(:has(th)):not(:contains("Manager"))').hide();
});
All I need is double filter, when I select Bob, its shows only bobs than when I select Developer I want to see Bob - Developer tr.
I know js code is wrong but I wanted you make understand what I want to do.

Try this, more simple:
$('input[type="radio"]').change(function () {
var name = $('input[name="name"]:checked').prop('id') || '';
var position = $('input[name="position"]:checked').prop('id') || '';
$('tr').hide();
$('tr:contains(' + name + ')').show();
$('tr').not(':contains(' + position + ')').hide();
});
Demo here
The only change in the HTML you need is to have the ID of the position radio buttons to be the same as the table. The that information can be used in the tr show/hide. Like:
<input type="radio" id="Developer" name="position" />Developer
<input type="radio" id="Manager" name="position" />Manager

JavaScript +css - Change main category's checkbox css, if any items beneath it are checked

All,
I have the attached code snippet where a category checkbox is checked if all items underneath it are checked. How can I modify the code such that:
If any checkbox underneath any category is checked, the CSS Style of it's parent "Category" checkbox should look greyed out. (I do not want to disable the checkbox. Just look grey or any color through CSS). This will denote some items are checked if the category is collapsed.
If all items are checked underneath a category, then the checkbox doesn't have to look greyed out as it will be checked too.
All the existing code functionality should be maintained as it works great..
PS: Sorry for the HTML being a mess...
Any suggestions?
Thanks
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
</script>
<script language="JavaScript">
function toggleTableRows()
{
$(document).ready(function() {
$('img.parent')
.css("cursor","pointer")
.toggle(
function() {
$(this).attr("title","Click to Expand")
$(this).attr("src","arrow_collapsed.gif");
$('tr').siblings('#child-'+this.id).toggle();
},
function() {
$(this).attr("title","Click to Collapse");
$(this).attr("src","arrow_expanded.gif");
$('tr').siblings('#child-'+this.id).toggle();
}
);
initCheckBoxes();
});
}
function toggleCheckboxes(current, form, field) {
$(document).ready(function() {
$("#"+ form +" :checkbox[name^='"+ field +"[']")
.attr("checked", current.checked);
});
}
function toggleParentCheckboxes(current, form) {
var checked = $("#"+ form +" :checkbox[name='"+ current.name +"']").length ==
$("#"+ form +" :checkbox[name='"+ current.name +"']:checked").length;
// replace '[anything]' with '' instead of just '[]'
$("#"+ form +" :checkbox[name='"+ current.name.replace(/\[[^\]]*\]/, "") +"']")
.attr("checked", checked);
}
function initCheckBoxes(form) {
$("#"+ form +" :checkbox:checked").each(function() {
if (this.name.match(/chk[0-9]\[.*\]/)) {
toggleParentCheckboxes(this, form);
}
});
}
</script>
<script language="JavaScript">toggleTableRows();</script>
<style type="text/css">tr.c1 {display: none;}</style>
</head>
<body>
<form name="frmDinnerMenu" id="frmDinnerMenu" method="POST" action="">
<table border=1>
<tr>
<td><img class="parent" id="0" src="arrow_collapsed.gif" title="Click to Expand">Category - Fruits</td>
<td><input type="checkbox" name="chk0" onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk0');"/></td>
</tr>
<tr class="c1" id="child-0">
<td>Apple</td>
<td><input type="checkbox" value="true" name="chk0[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-0">
<td>Banana</td>
<td><input type="checkbox" value="false" name="chk0[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-0">
<td>Orange</td>
<td><input type="checkbox" checked value="true" name="chk0[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr>
<td><img class="parent" id="1" src="arrow_collapsed.gif" title="Click to Expand">Category - Vegetables</td>
<td><input type="checkbox" name="chk1" onclick="toggleCheckboxes(this, 'frmDinnerMenu', 'chk1');"/></td>
</tr>
<tr class="c1" id="child-1">
<td>Eggplant</td>
<td><input type="checkbox" value="true" name="chk1[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-1">
<td>Tomato</td>
<td><input type="checkbox" value="false" name="chk1[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
<tr class="c1" id="child-1">
<td>Cabbage</td>
<td><input type="checkbox" checked value="true" name="chk1[]" onclick="toggleParentCheckboxes(this, 'frmDinnerMenu');"/></td>
</tr>
</table>
</form>
</body>
</html>

Code looks familiar ;)
Include a CSS class similar to this one (add further styling if you need it)
.graymeout { background-color:#D8D8D8 }
Change toggleParentCheckboxes to this (some "optimizations" included. Refactored out common selector parts and removed a "double" selection by using filter)
function toggleParentCheckboxes(current, form) {
var selector1 = "#"+ form +" :checkbox[name='";
var selector2 = selector1 + current.name +"']";
var set = $(selector2);
var checked = set.length == set.filter(":checked").length;
// replace '[anything]' with '' instead of just '[]'
var ele = $(selector1 + current.name.replace(/\[[^\]]*\]/, "") +"']");
ele.attr("checked", checked);
if(!checked)
ele.addClass("graymeout")
else
ele.removeClass("graymeout");
ele=null; set=null; selector1=null; selector2=null;
}
If you change the call to initCheckBoxes in toggleTableRows to initCheckBoxes("frmDinnerMenu"); you will get the highlighting also on page load instead of just when first child is changed.

I had also used the same approach as mentioned by jitter. It works pretty well and in my opinion is the only option available since a tri-state check box is not available on a browser.