Develop Reference

$(...).cells is undefined in jQuery

i have two forms, form1 contains the date and the display button, the show button allows you to hide the form1 and display the form2, the form2 contains the chosen date and a datatable with checkboxes and button valider, i want when i click the show button console show matricules of salaries.
$(document).ready(function() {
$('#check_all').on('click', function(e) {
if ($(this).is(':checked', true)) {
$(".checkbox").prop('checked', true);
} else {
$(".checkbox").prop('checked', false);
}
});
$('.checkbox').on('click', function() {
if ($('.checkbox:checked').length == $('.checkbox').length) {
$('#check_all').prop('checked', true);
} else {
$('#check_all').prop('checked', false);
}
});
$("#form2").hide();
$("#hide").click(function() {
$("#form1").hide();
$("#form2").show();
let dat = $("#dateS").val();
$("#da").text(dat);
$("tr").each(function(i, r) {
let mat = $(r).cells[2].innerText;
console.log(mat);
});
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- form 1 -->
<div id="form1">
<div class=" col-md-10 col-md-offset-1">
<div class="form-group col-md-3">
<label for="titre">date</label>
</div>
<div class="form-group col-md-5">
<input type="date" name="dateS" id="dateS" class="form-control">
</div>
</div>
<div class="col-md-6 col-md-offset-3">
<div class="form-group col-md-2">
<button class="btn btn-primary" id="hide" data-url="">show</button>
</div>
</div>
</div>
<!-- form 2 -->
<div id="form2">
<div class="col-md-10 col-md-offset-1">
<h4>dateS : <span id="da"></span></h4>
</div>
<table class="table table-bordered" id="mytable">
<tr>
<th><input type="checkbox" id="check_all"></th>
<th>nom</th>
<th>matricule</th>
<th>adresse</th>
<th>prime</th>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>najib</td>
<td>52</td>
<td>tihit</td>
<td><input type="text" name="prime" class="form-control prime" value="0"></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>adil</td>
<td>62</td>
<td>tagmast</td>
<td><input type="text" name="prime" class="form-control prime" value="0"></td>
</tr>
</table>
<div class="form-group col-md-offset-5 ">
<button class="btn btn-success add-all" type="submit" id="hide">valider</button>
</div>
</div>

Instead of $(r).cells[2].innerText use jQuery
$(r).find('td').eq(2).text()
or:
$(this).find('td:eq(2)').text();
cells is used in vanilla JavaScript to get the cells from TableRowElement, while your $(r) is a reference to a collection of elements wrapped into a jQuery object
therefore if you want to use JavaScript you still can, but like:
r.cells[2].textContent
also, notice the use of the preferred textContent vs innerText

Use print button in modal

I am designing a receipt generator for client. The client add payment receipt using add button and after they click on submit they have option to convert it to pdf or print this. However since my form contains texxt field . It not printing it properly and only outputting the filled content.I tried using window.print but its dispalying boxes as well. Not sure how to proceed. below is the code:
I used the javascript but is unable to add classes
$('button[name="e_subPrint"]').click(function(){
var mywindow = window.open('', 'PRINT', 'height=400,width=600');
var html = getPrintHtml("e_print");
mywindow.document.write(html);
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();
});
function getPrintHtml(print){
var center = $('#'+print +' input[name="center"]').val();
var dated = $('#'+print +' input[name="dated"]').val();
var payment = $('#'+print +' input[name="payment"]').val();
var studname = $('#'+print +' input[name="studname"]').val();
var cnum = $('#'+print +' input[name="cnum"]').val();
var pnum = $('#'+print +' input[name="pnum"]').val();
var sum = $('#'+print +' input[name="sum"]').val();
var amt = $('#'+print +' input[name="amt"]').val();
var chnum = $('#'+print +' input[name="chnum"]').val();
var chdate = $('#'+print +' input[name="chdate"]').val();
var chbank = $('#'+print +' input[name="chbank"]').val();
var course = $('#'+print +' input[name="course"]').val();
var tfees = $('#'+print +' input[name="tfees"]').val();
var sgst = $('#'+print +' input[name="sgst"]').val();
var cgst = $('#'+print +' input[name="cgst"]').val();
var gtotal = $('#'+print +' input[name="gtotal"]').val();
var html = "<html><table>\n\
<tr><td>CENTER: </td><td>"+center+"</td></tr>\n\
<tr><td>DATED: </td><td>"+dated+"</td></tr>\n\
<tr><td>PAYMENT: </td><td>"+payment+"</td></tr>\n\
<tr><td>STUDENT NAME: </td><td>"+studname+"</td></tr>\n\
<tr><td>CONTACT NUMBER: </td><td>"+cnum+"</td></tr>\n\
<tr><td>PARENTAL CONTACT: </td><td>"+pnum+"</td></tr>\n\
<tr><td>TOTAL AMOUNT: </td><td>"+amt+"</td></tr>\n\
<tr><td>CHEQUE NUMBER: </td><td>"+chnum+"</td></tr>\n\
<tr><td>CHEQUE DATE: </td><td>"+chdate+"</td></tr>\n\
<tr><td>CHEQUE BANK: </td><td>"+chbank+"</td></tr>\n\
<tr><td>COURSE: </td><td>"+course+"</td></tr>\n\
<tr><td>TUITION FEES: </td><td>"+tfees+"</td></tr>\n\
<tr><td>SGST: </td><td>"+sgst+"</td></tr>\n\
<tr><td>CGST: </td><td>"+cgst+"</td></tr>\n\
<tr><td>GRAND TOTAL: </td><td>"+gtotal+"</td></tr>\n\
\n\
</table></html>";
return html;
}
});
This the HTMl
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create New Receipt</h4>
</div>
<div class="modal-body">
<form method="post" action="controller/pdf.php">
<div id="print">
<div class="row">
<div class="col-md-7">
<img src="asset/logo.png" alt="Edumentor">
</div>
<div class="col-md-5">
<p style="font-size:15px;">Head Office: 80 Defence Enclave Delhi-110092
<br>
Tel : +91 9650499917,9650499918 web:wwww.edumentor.co.in
<br>
GST No.07AACCE9830DIZS
</p>
<br>
<p><strong>Receipt Number:</strong>
<?php
$val = getReceiptNum();
echo $val;
?>
</p>
</div>
</div>
<br>
<div id="values">
<div class="row">
<div class="form-inline">
<div style="text-align:right;" class="col-sm-8">
<label for="centre">Centre: </label>
<input name="center" id="centre" type="text" class="form-control" name="centre">
</div>
<div class="col-sm-4">
<label for="date">Dated:</label>
<input id="dated" name="dated" type="date" class="form-control" name="date">
</div>
</div>
</div>
<br>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<label for="pcentre">Payment Centre:</label>
<input name="payment" id="payment" type="text" class="form-control" name="pcentre">
</div>
</div>
</div>
<br>
<div class="row">
<div class="form-group">
<div class="col-sm-12">
<label for="stuname">Student Name:</label>
<input name="studname" id="stuname" type="text" class="form-control" name="stuname">
</div>
</div>
</div>
<br>
<div class="row">
<div class="form-inline">
<div class="col-sm-12">
<div class="col-sm-6">
<label for ="stucont">Contact Number:</label>
<input name="cnum" id="cnum" type="text" class="form-control" name="stucont">
</div>
<div class="col-sm-6">
<label for="stupcont">Parental Contact:</label>
<input name="pnum" id="pnum" type="text" class="form-control" name="stupcont">
</div>
</div>
</div>
</div>
<br>
<table class="table table-bordered">
<tbody>
<tr>
<td>
<div class="form-inline">
<label for="sfees">Sum of Rupees(In Words)</label>
<input name="sum" id="sum" type="text" class="form-control" name="sfees" size="30">
</div>
</td>
<td>
<div class="form-inline">
<label for="">Total Amount :</label>
<input name="amt" id="amt" type="number" name="snumfees" class="form-control" size="10" placeholder="Enter Amount">
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="col-sm-12">
<label>Paid by: </label>
<label class="radio-inline"><input id="cash" value="cash" type="radio" name="optradio">Cash</label>
<label class="radio-inline"><input id="cheque" type="radio" value="cheque" name="optradio">Cheque</label>
</div>
<div class="col-sm-4">
<input name="chnum" id="chnum" type="text" name="cheqno" class="form-control" placeholder="Enter cheque number">
</div>
<div class="col-sm-4">
<input name="chdate" id="chdate" type="date" name="cheqdate" class="form-control" placeholder="Enter cheque date">
</div>
<div class="col-sm-4">
<input name="chbank" id="chbank" type="text" name="cheqbank" class="form-control" placeholder="Enter cheque bank">
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="form-inline">
<label for="cname">Course Name:</label>
<input name="course" id="course" type="text" name="cname" class="form-control" placeholder="Enter Course name">
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="form-inline">
<label for="tutfees">Tution Fees:</label>
<input name="tfees" id="tfees" type="text" name="tutfees" class="form-control" readonly>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="form-inline">
<label for="stax">SGST:</label>
<input name="sgst" id="sgst" type="number" name="stax" class="form-control" readonly>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="form-inline">
<label for="ctax">CGST:</label>
<input name="cgst" id="cgst" type="number" name="ctax" class="form-control" readonly>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="form-inline">
<label for="gtfees">Grand Total:</label>
<input name="gtotal" readonly id="gtotal" type="number" name="gtfees" placeholder="Enter total fees" class="form-control">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<br>
<div><p><strong>Terms and Condition:</strong></p>
<br>
<p style="font-size:small; width:120%;margin-top:-4%;">
1.Any fees once paid shall not be refunded under any circumstances.<br>
2.We do not disclose any personal information of student before or after the announcement of the result.<br>
3.In case the cheque bounces, the student is liable to pay ₹500/- extra and deposit whole amount in cash within next 24-48 hours.<br>
4.In case of delay of installment from the due date, penalty # ₹250/- per day will be charged from the student.<br>
5.Tution fee inclusive of GST.<br>
6.All disputes are subject to exclusive juridsiction of Delhi Courts only.<br>
7.All cheque are to be drawn in favour of '<strong>Edumentor Educational Services Pvt. Ltd</strong>.'
</p>
</div>
I agree to the above terms and conditions
<br><br><br><br><br>
<div class="row">
<div class="col-md-8">
<label>Parents/Student Signature</label>
</div>
<div style="text-align:right;" class="col-md-4">
<label>Authorised Signatory</label>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-danger" name="pdf" id="pdf" value="Export To Pdf"/>
<button type="button" class="btn btn-primary" id="btnPrint" name="subPrint">PRINT</button>
<button type="button" class="btn btn-default" onclick="js:window.print()">print modal content</button>
<button type="button" class="btn btn-primary" id="submit">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</form>

Download printThis.js from the following link and include it in your html: https://github.com/jasonday/printThis/blob/0a7f799693af8a8303bf0b8df0efc80c2694af81/printThis.js
Wrap the content you want to print with the following div. Everything outside of this div will not be printed.
<div id="modalDiv">
..content to print..
</div>
Call the following jquery to print all the content including the content that is not viewable. You may include your css files in an array if you have multiple css files.
$("#modalDiv").printThis({
debug: false,
importCSS: true,
importStyle: true,
printContainer: true,
loadCSS: "../css/style.css",
pageTitle: "My Modal",
removeInline: false,
printDelay: 333,
header: null,
formValues: true
});

Simple dynamic list with checkbox

Looking for a way to make a dynamic list using checkbox "another item" with ability to remove if requested, like on this image:
It should support both adding and removing the items.
Edit:
My code is like:
<div id="contactdetails">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-list"></i></span>
<input name="firstname" id="firstname" type="text" class="form-control" spellcheck="false" placeholder="First Name">
</div>
<p class="note">Example: Mike</p>
</div><!--row and col-->
<div class="col-lg-6 col-md-12">
<div class="form-group">
<div class="input-group"><span class="input-group-addon"><i class="fa fa-usd"></i></span>
<input name="familyname" id="familyname" type="text" class="form-control" spellcheck="false" placeholder="Family Name">
</div>
<p class="note">Example: Johnson</p>
</div>
</div>
</div> <!--row and col-->
<div class="row">
<div class="col-lg-12 col-md-12">
<div class="checkbox" style="padding-left:10px; margin-top: 0px;">
<span>
<label>
<input name="addmore" id="addmore" type="checkbox" class="checkbox style-2">
<span> More contacts</span>
</label>
</span>
</div>
</div>
</div> <!--row and col-->
</div><!--contact details-->

You can append items to a container and remove each item if the checkbox is checked.
$("body").on("click","input[type='checkbox']",function()
{
if(!$(this).is(":checked"))
{
$(this).parent().remove();
}
else
{
$("#container").append('<div class="item"><input type="text" placeholder="Name"><input type="text" placeholder="Family Name"><input type="checkbox"></div>')
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="item"><input type="text" placeholder="Name"><input type="text" placeholder="Family Name"><input type="checkbox"></div>
</div>

Try this. As i mentioned before, you can make use of $.clone() to achieve this.
<div>
<table>
<tr>
<td>
Item1
</td>
<td>
Item2
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
</tr>
</table>
</div>
<script>
$(document).on("click",":checkbox",function()
{
if($(this).is(":checked"))
{
var clonedItem = $(this).closest('table').clone();
$(clonedItem).find(":checkbox").removeAttr("checked");
$(clonedItem).appendTo("div");
}
else
{
if($(document).find(":checkbox").length > 0)
$(this).closest('table').remove();
}
});
</script>
Example : https://jsfiddle.net/DinoMyte/sgcrupm8/1/

Why the <div> is not getting removed after clicking on image and why the image is getting removed in following case?

I'm having many <div class="rbt"></div> present on my webpage and each of these <div>'s contains an icon to delete that <div> only from which the icon is clicked. But what's happening is the respective <div> is not getting deleted and the cross button image gets hide. I've created one jsFiddle to demonstrate my issue but in jsFiddle the image is not getting hide as well as the <div> is also not getting deleted. Can some one please help me in this regard?
HTML code is:
<div class="col-md-10 rebate_block">
<div class="rbt">
<div style="overflow:auto" class="well">
</br>
<div class="table-responsive">
<table id="blacklistgrid_1" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th style="vertical-align:middle">Products</th>
<th style="vertical-align:middle">Pack Of</th>
<th style="vertical-align:middle">Quantity</th>
<th style="vertical-align:middle">Volume</th>
<th style="vertical-align:middle">Unit</th>
<th style="vertical-align:middle">Rebate Amount</th>
</tr>
</thead>
<tbody class="apnd-test">
<tr id="reb1_1">
<td>
<div class="btn-group">
<select name="product_id_1[1]" id="product_id_1_1" class="form-control prod_list">
<option value="" selected='selected'>Select Product</option>
</select>
</div>
</td>
<td>
<input type="text" name="pack[1]" id="pack_1" value="" class="form-control" size="8"/>
</td>
<td>
<input type="text" name="quantity[1]" id="quantity_1" value="" class="form-control" size="8"/>
</td>
<td>
<input type="text" name="volume[1]" id="volume_1" value="" class="form-control" size="8"/>
</td>
<td>
<div class="btn-group">
<select name="units[1]" id="units_1" class="form-control">
<option value="" selected='selected'>Select Unit</option>
<option value="5" >Microsecond</option>
<option value="7" >oz</option>
<option value="9" >ml</option>
<option value="10" >L</option>
<option value="12" >gms</option>
</select>
</div>
</td>
<td>
<input type="text" name="amount[1]" id="amount_1" value="" class="form-control" size="9"/>
</td>
</tr>
</tbody>
<tfoot>
<tr id="reb1_2">
<td>
<button style="float:right; margin-bottom: 20px" class="products" type="button" class="btn btn-default" onclick=""> Add</button>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
</div>
<div class="row">
<div class="col-xs-6">
<label for="name" class="col-lg-5">Rebate Start Date<span style="color:#FF0000">*</span></label>
<div class="col-lg-6">
<input class="form-control date_control" placeholder="yyyy-mm-dd" type="date" name="rebate_start_date[1]" id="rebate_start_date_1" value="">
</div>
</div>
<div class="col-xs-6">
<label for="name" class="col-lg-6">Rebate Expiry Date<span style="color:#FF0000">*</span></label>
<div class="col-lg-6">
<input class="form-control date_control" placeholder="yyyy-mm-dd" type="date" name="rebate_expiry_date[1]" id="rebate_expiry_date_1" value="">
</div>
</div>
</div>
</br>
<div class="row">
<div class="col-xs-6">
<label for="name" class="col-lg-5">Applicable States</label>
<div class="col-lg-7">
<select class="states" multiple="multiple" name="applicable_states[1][]" id="applicable_states_1">
<option value="1">Alabama</option>
<option value="2">Alaska</option>
// ... other states as options
<option value="49">Wisconsin</option>
<option value="50">Wyoming</option>
</select>
</div>
</div>
<div class="col-xs-6">
<label for="name" class="col-lg-6">Rebate Total Count</label>
<div class="col-lg-6">
<input type="text" class="form-control" name="rebate_total_count[1]" id="rebate_total_count_1" value="">
</div>
</div>
</div>
<div style="float: clear;"></div>
<div class="row">
<div class="col-xs-5"></div>
<div class="col-xs-2"></div>
<div align="right" class="col-xs-5">
<button style='color:#C00; opacity: 2;margin-right: -12px;' type='button' class='close del_reb' data-dismiss='alert' aria-hidden='true'>×</button>
</div>
</div>
</div> <!-- /span8 --></div>
</div>
jQuery code is:
$(function () {
//function to delete rebate entry(i.e. entire rebate block) in add rebate by product
$(document).delegate('.del_reb','click',function (event) {
$(this).parents('.rbt').remove();
event.preventDefault();
});
});
js Fiddle link

Its happening because you have not attached any jquery library in your fiddle..just attach any of the jquery library from dropdown and try again
Demo :- http://jsfiddle.net/3Fkf3/6/
$(function () {
//function to delete rebate entry(i.e. entire rebate block) in add rebate by product
$(document).delegate('.del_reb','click',function (event) {
$(this).parents('.rbt').remove();
event.preventDefault();
});
});
According to ur comments you are using jquery 1.9 so I would request you to take a look here :- As suggested by official jquery site http://api.jquery.com/delegate/
As of jQuery 1.7, .delegate() has been superseded by the .on() method.
For earlier versions, however, it remains the most effective means to
use event delegation. More information on event binding and delegation
is in the .on() method. In general, these are the equivalent templates
for the two methods:
// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, selector, data, handler );

Pouplate input form field on button click with text values in other div

I need to collect the data from the display div on click of edit button and pass it to the form div and populate corresponding inputs using jquery.
HTML Form Div
<form class="form-horizontal" name="editform" id="editform" action="include/abc.php" method="post">
<fieldset>
<div class="form-group">
<label for="username" class="col-lg-2 control-label">User Name </label>
<div class="col-lg-4">
<input class="form-control" name="username" placeholder="User Name" type="text" id="username" value="" >
</div>
<label for="email" class="col-lg-2 control-label">User Name </label>
<div class="col-lg-4">
<input class="form-control" name="email" placeholder="Email" type="text" id="uemail" value="" >
</div>
</div>
<div class="form-group">
<button type="submit" id="editdata" class="btn btn-success">Edit and Update </button>
</div>
</fieldset>
</form>
Display Div
<div class="well">
<div id="formdisplay">
<table>
<tr>
<td> User Name:</td><td id="u_name"> Paul </td>
</tr>
<tr>
<td> Email :</td><td id="u_email"> paul#abc.com</td>
</tr>
</table>
</div>
<button type="button" id="edit" class="btn btn-info">Edit</button>
<button type="button" id="delete" class="btn btn-danger">Edit</button>
</div>
Jquery
<script type="text/javascript">
$(function()
{
$("#edit").click(function(e) {
$("#username").val($("#u_name").text());
$("#uemail").val($("#u_email").text());
});
});
</script>

You are missing # in the id selector.
Try,
$(function()
{
$("#edit").click(function(e) {
$("#username").val($("#u_name").text());
$("#uemail").val($("#u_name").text());
});
});