Find sum of the column - javascript

I have the following table row:
<tr class="table-row">
<td class="column-1">
<div class="cart-img-product b-rad-4 o-f-hidden">
<img src="../admin/uploads/<?php echo $info['product_photo']; ?>" alt="IMG-PRODUCT">
</div>
</td>
<td class="column-2">
<?php echo $info['product_name']; ?>
</td>
<td class="column-3"><input type="text" value="<?php echo $info['product_price']; ?>" readonly></td>
<td class="column-4"><input type="text" value="<?php echo $info['product_amount']; ?> Piece" readonly></td>
<td class="column-5"><input style="color:red;" type="text" value="Rs <?php echo $info['product_price']*$info['product_amount']; ?>" readonly></td>
</tr>
I want to get the sum of the last td which will be the total pricing. I thought of using js but as the row may get dynamically added it is hard. How can i get the total price.
I want the total to be displayed here.
<span class="m-text21 w-size20 w-full-sm">
<strong><input type="text" id="total" value=""></strong>
</span>

try
let v = [...document.querySelectorAll('.column-5 input')];
total.value = v.reduce((a,c)=> +c.value.replace(/Rs /,'')+a, 0)
We use here standard: querySelectorAll, reduce, arrow functions, spread syntax (to cast NodeList to array - to have access to reduce), replace with simple regular expression (to remove Rs prefix). The v contains array with <input> elements from last column for all rows. By+ in +c.val.. JS make implicit cast string to number.
let v = [...document.querySelectorAll('.column-5 input')];
total.value = v.reduce((a,c)=> +c.value.replace(/Rs /,'')+a, 0)
<table><tbody>
<tr class="table-row">
<td class="column-1">
<div class="cart-img-product b-rad-4 o-f-hidden">
<img src="../admin/uploads/xxx" alt="IMG-PRODUCT">
</div>
</td>
<td class="column-2">
<?php echo $info['product_name']; ?>
</td>
<td class="column-3"><input type="text" value="10000" readonly></td>
<td class="column-4"><input type="text" value="2 Piece" readonly></td>
<td class="column-5"><input style="color:red;" type="text" value="Rs 20000" readonly></td>
</tr>
<tr class="table-row">
<td class="column-1">
<div class="cart-img-product b-rad-4 o-f-hidden">
<img src="../admin/uploads/xxx" alt="IMG-PRODUCT">
</div>
</td>
<td class="column-2">
<?php echo $info['product_name']; ?>
</td>
<td class="column-3"><input type="text" value="14000" readonly></td>
<td class="column-4"><input type="text" value="1 Piece" readonly></td>
<td class="column-5"><input style="color:red;" type="text" value="Rs 14000" readonly></td>
</tr>
<tbody><table>
<span class="m-text21 w-size20 w-full-sm">
<strong><input type="text" id="total" value=""></strong>
</span>

You can try with querySelectorAll() and forEach() like the following way:
var lastTDs = document.querySelectorAll('tbody tr td:last-child input');
var sum = 0;
[...lastTDs].forEach(function(td) {
sum += Number(td.value.split(' ')[1]);
});
console.log(sum);
<table>
<tbody>
<tr class="table-row">
<td class="column-1">
<div class="cart-img-product b-rad-4 o-f-hidden">
<img src="../admin/uploads/<?php echo $info['product_photo']; ?>" alt="IMG-PRODUCT">
</div>
</td>
<td class="column-2"><?php echo $info['product_name']; ?></td>
<td class="column-3"><input type="text" value="<?php echo $info['product_price']; ?>" readonly></td>
<td class="column-4"><input type="text" value="<?php echo $info['product_amount']; ?> Piece" readonly></td>
<td class="column-5"><input style="color:red;" type="text" value="Rs 50" readonly></td>
</tr>
<tr class="table-row">
<td class="column-1">
<div class="cart-img-product b-rad-4 o-f-hidden">
<img src="../admin/uploads/<?php echo $info['product_photo']; ?>" alt="IMG-PRODUCT">
</div>
</td>
<td class="column-2"><?php echo $info['product_name']; ?></td>
<td class="column-3"><input type="text" value="<?php echo $info['product_price']; ?>" readonly></td>
<td class="column-4"><input type="text" value="<?php echo $info['product_amount']; ?> Piece" readonly></td>
<td class="column-5"><input style="color:red;" type="text" value="Rs 100" readonly></td>
</tr>
</tbody>
</table>

Related

I have a button here and try do it in jdfiddle and its worked but in html its not

Its worked in JSFiddle but not in notepad ++. Why ?
Only the first button is worked but not the second button. i tried to change the id to make it unique but it also doesnt work .also tried the class also didnt work. is there anything wrong here ? can someone help me ? really need someone who can help to solve this . Thank You in advance
JS CODE :
function getDate() {
var sd = document.getElementById('start_date').value;
var d = document.getElementById('duration').value;
var date = new Date(sd);
var newdate = new Date(date);
var durations = parseInt(d);
newdate.setDate((newdate.getDate() + durations)-1);
var dd = newdate.getDate();
var mm = newdate.getMonth()+1;
var y = newdate.getFullYear();
var someFormattedDate = y + '-' + mm + '-' + dd;
document.getElementById('end_date').value = someFormattedDate;
}
PHP CODE :
&sme_id=&pc_id=" enctype="multipart/form-data">
<tr>
<th style="font-family:century gothic"><strong><font color="black">Major</font></strong></td>
<th style="font-family:century gothic"><strong><font color="black">Stage</font></strong></td>
<th style="font-family:century gothic"><strong><font color="black">Task</font></strong></td>
<th style="font-family:century gothic"><strong><font color="black">Task Mark</font></strong></td>
<th style="font-family:century gothic"><strong><font color="black">Marking</font></strong></td>
<th style="font-family:century gothic"><strong><font color="black">Destination Marking</font></strong></td>
<th style="font-family:century gothic"><strong><font color="black">Days</font></strong></td>
<th style="font-family:century gothic"><strong><font color="black">Duration</font></strong></td>
<th style="font-family:century gothic"><strong><font color="black">Start</font></strong></td>
<th style="font-family:century gothic"><strong><font color="black">Finish</font></strong></td>
<th></th>
</tr>
</thead>
<tbody>
<?
//GET DATA FROM PROJECT_SCHEDULE
/*$sql ="SELECT task_name,task_mark,marking,destination_marking,start_date,end_date FROM project_detail_new
WHERE stage_id='1'";*/
/*$sql = "SELECT ps.ps_id,ps.pc_id,ps.major_id,pms.major_name,ps.stage_id,psl.stage_name,ps.task_id,pst.task_name,
ps.task_mark,ps.marking,ps.destination_marking,ps.days,ps.duration,ps.start_date,ps.end_date,ps.sys_id,ps.agency_id
FROM project_schedule ps
LEFT JOIN project_major_stage pms
ON ps.major_id=pms.major_id
LEFT JOIN project_stage_list psl
ON ps.stage_id=psl.stage_id
LEFT JOIN project_stage_task pst
ON ps.task_id=pst.task_id
WHERE ps.pc_id='$pc_id'";*/
$sql= "SELECT DISTINCT(ps.major_id),pms.major_name
FROM project_schedule ps
LEFT JOIN project_major_stage pms
ON ps.major_id=pms.major_id
WHERE ps.pc_id='$pc_id' ";
$select = mysql_query($sql);
$i= 1;
while($list =mysql_fetch_array($select))
{
$major_name=$list['major_name'];
$major_id=$list['major_id'];
?>
<tr>
<td style ="font-family:century gothic"colspan="12"><strong><font color="black"><?echo $list['major_name'];?></font></strong></td>
</tr>
<?
$sqla= "SELECT DISTINCT (ps.stage_id),psl.stage_name,pms.major_name
FROM project_schedule ps
LEFT JOIN project_stage_list psl
ON ps.stage_id=psl.stage_id
LEFT JOIN project_major_stage pms
ON ps.major_id=pms.major_id
WHERE ps.pc_id=1 AND pms.major_id='$major_id'";
$selecta=mysql_query($sqla);
while($lista =mysql_fetch_array($selecta))
{
$stage_name=$lista['stage_name'];
$stage_id=$lista['stage_id'];
?>
<tr>
<td></td>
<td style="font-family:centruy-gothic" colspan="10"<strong><font color="black"><?echo $lista['stage_name'];?></font></strong></td>
</tr>
<?
$sqlb ="SELECT ps.*,pst.task_name,psl.stage_name
FROM project_schedule ps
LEFT JOIN project_stage_task pst
ON ps.task_id=pst.task_id
LEFT JOIN project_stage_list psl
ON ps.stage_id=psl.stage_id
WHERE ps.pc_id=1 AND psl.stage_id='$stage_id'";
$selectb =mysql_query($sqlb);
while($listb=mysql_fetch_array($selectb))
{
$ps_id=$listb['ps_id'];
$task_name=$listb['task_name'];
$task_mark=$listb['task_mark'];
$marking=$listb['marking'];
$destination_marking=$listb['destination_marking'];
$days=$listb['days'];
$duration=$listb['duration'];
$start_date=$listb['start_date'];
$end_date=$listb['end_date'];
?>
<!----THIS IS THE PHP CODE TO BE USED TO CALCULATE THE END DATE BASED ON START DATE ENTERED AND DURATION PICKED FROM DATABASE-->
<tr>
<td></td>
<td></td>
<td style="font-family:century-gothic">
<strong>
<font color="black">
<?echo $listb['task_name'];?>
</font>
</strong>
</td>
<td>
<input type="text" id="task_mark1" class="task_mark" name="task_mark" value="<? echo $listb['task_mark'];?>" />
</td>
<td>
<input type="text" id="marking1" class="marking" name="marking" value="<? echo $listb['marking'];?>" />
</td>
<td>
<input type="text" id="destination_marking1" class="destination_marking" name="destination_marking" value="<? echo $listb['destination_marking'];?>" />
</td>
<td>
<input type="text" id="days1" class="days" name="days" value="<? echo $listb['days'];?>" />
</td>
<td>
<input type="text" id="duration1" class="duration" name="duration" value="<? echo $listb['duration'];?>" />
</td>
<td>
<input type="text" id="start_date1" class="start_date" name="start_date" value="<? echo $listb['start_date'];?>" />
</td>
<td>
<input type="text" id="end_date1" class="end_date" name="end_date" value="<? echo $listb['end_date'];?>" />
</td>
<td align="center">
<input type="button" id ="btn1" value="GENERATE" name="action" class ="submit-green" onclick="getDate(this.id)"/>
</td>
</tr>
<!--------------------------------------------------------------------------------------------------------------------------------------->
<td>
<input type="text" id="task_mark2" class="task_mark" name="task_mark" value="<? echo $listb['task_mark'];?>" />
</td>
<td>
<input type="text" id="marking2" class="marking" name="marking" value="<? echo $listb['marking'];?>" />
</td>
<td>
<input type="text" id="destination_marking2" class="destination_marking" name="destination_marking" value="<? echo $listb['destination_marking'];?>" />
</td>
<td>
<input type="text" id="days2" class="days" name="days" value="<? echo $listb['days'];?>" />
</td>
<td>
<input type="text" id="duration2" class="duration" name="duration" value="<? echo $listb['duration'];?>" />
</td>
<td>
<input type="text" id="start_date2" class="start_date" name="start_date" value="<? echo $listb['start_date'];?>" />
</td>
<td>
<input type="text" id="end_date2" class="end_date" name="end_date" value="<? echo $listb['end_date'];?>" />
</td>
<td align="center">
<input type="button" id ="btn2" value="GENERATE" name="action" class ="submit-green" onclick="getDate(this.id)"/>
</td>
</tr>
<?
}}}
?>
<tr>
<td colspan=5 align="center"><input class="submit-green" type="submit" value="Save" /></td>
</tr>
</form>
function getDate(id) {
id = id.match(/\d+/);
var sd = document.getElementById('start_date'+ id).value;
var d = document.getElementById('duration' + id).value;
var date = new Date(sd);
var newdate = new Date(date);
var durations = parseInt(d);
newdate.setDate((newdate.getDate() + durations)-1);
var dd = newdate.getDate();
var mm = newdate.getMonth()+1;
var y = newdate.getFullYear();
var someFormattedDate = y + '-' + mm + '-' + dd;
document.getElementById('end_date' + id).value = someFormattedDate;
}
<table>
<thead>
<tr>
<th style="font-family:century gothic">
<strong><font color="black">Major</font></strong></th>
<th style="font-family:century gothic"><strong><font color="black">Stage</font></strong></th>
<th style="font-family:century gothic"><strong><font color="black">Task</font></strong></th>
<th style="font-family:century gothic"><strong><font color="black">Task Mark</font></strong></th>
<th style="font-family:century gothic"><strong><font color="black">Marking</font></strong></th>
<th style="font-family:century gothic"><strong><font color="black">Destination Marking</font></strong></th>
<th style="font-family:century gothic"><strong><font color="black">Days</font></strong></th>
<th style="font-family:century gothic"><strong><font color="black">Duration</font></strong></th>
<th style="font-family:century gothic"><strong><font color="black">Start</font></strong></th>
<th style="font-family:century gothic"><strong><font color="black">Finish</font></strong></th>
<th></th>
</tr>
</thead>
<tbody>
<?
//GET DATA FROM PROJECT_SCHEDULE
/*$sql ="SELECT task_name,task_mark,marking,destination_marking,start_date,end_date FROM project_detail_new
WHERE stage_id='1'";*/
/*$sql = "SELECT ps.ps_id,ps.pc_id,ps.major_id,pms.major_name,ps.stage_id,psl.stage_name,ps.task_id,pst.task_name,
ps.task_mark,ps.marking,ps.destination_marking,ps.days,ps.duration,ps.start_date,ps.end_date,ps.sys_id,ps.agency_id
FROM project_schedule ps
LEFT JOIN project_major_stage pms
ON ps.major_id=pms.major_id
LEFT JOIN project_stage_list psl
ON ps.stage_id=psl.stage_id
LEFT JOIN project_stage_task pst
ON ps.task_id=pst.task_id
WHERE ps.pc_id='$pc_id'";*/
$sql= "SELECT DISTINCT(ps.major_id),pms.major_name
FROM project_schedule ps
LEFT JOIN project_major_stage pms
ON ps.major_id=pms.major_id
WHERE ps.pc_id='$pc_id' ";
$select = mysql_query($sql);
$i= 1;
while($list =mysql_fetch_array($select))
{
$major_name=$list['major_name'];
$major_id=$list['major_id'];
?>
<tr>
<td style ="font-family:century gothic" colspan="12">
<strong>
<font color="black">
<? echo $list['major_name'];?>
</font>
</strong>
</td>
</tr>
<?
$sqla= "SELECT DISTINCT (ps.stage_id),psl.stage_name,pms.major_name
FROM project_schedule ps
LEFT JOIN project_stage_list psl
ON ps.stage_id=psl.stage_id
LEFT JOIN project_major_stage pms
ON ps.major_id=pms.major_id
WHERE ps.pc_id=1 AND pms.major_id='$major_id'";
$selecta=mysql_query($sqla);
while($lista =mysql_fetch_array($selecta))
{
$stage_name=$lista['stage_name'];
$stage_id=$lista['stage_id'];
?>
<tr>
<td></td>
<td style="font-family:centruy-gothic" colspan="10">
<strong>
<font color="black">
<?echo $lista['stage_name'];?>
</font>
</strong>
</td>
</tr>
<?
$sqlb ="SELECT ps.*,pst.task_name,psl.stage_name
FROM project_schedule ps
LEFT JOIN project_stage_task pst
ON ps.task_id=pst.task_id
LEFT JOIN project_stage_list psl
ON ps.stage_id=psl.stage_id
WHERE ps.pc_id=1 AND psl.stage_id='$stage_id'";
$selectb =mysql_query($sqlb);
while($listb=mysql_fetch_array($selectb))
{
$ps_id=$listb['ps_id'];
$task_name=$listb['task_name'];
$task_mark=$listb['task_mark'];
$marking=$listb['marking'];
$destination_marking=$listb['destination_marking'];
$days=$listb['days'];
$duration=$listb['duration'];
$start_date=$listb['start_date'];
$end_date=$listb['end_date'];
?>
<!----THIS IS THE PHP CODE TO BE USED TO CALCULATE THE END DATE BASED ON START DATE ENTERED AND DURATION PICKED FROM DATABASE-->
<tr>
<td></td>
<td></td>
<td style="font-family:century-gothic">
<strong>
<font color="black">
<?echo $listb['task_name'];?>
</font>
</strong>
</td>
<td>
<input type="text" id="task_mark1" class="task_mark" name="task_mark" value="<? echo $listb['task_mark'];?>" />
</td>
<td>
<input type="text" id="marking1" class="marking" name="marking" value="<? echo $listb['marking'];?>" />
</td>
<td>
<input type="text" id="destination_marking1" class="destination_marking" name="destination_marking" value="<? echo $listb['destination_marking'];?>" />
</td>
<td>
<input type="text" id="days1" class="days" name="days" value="<? echo $listb['days'];?>" />
</td>
<td>
<input type="text" id="duration1" class="duration" name="duration" value="<? echo $listb['duration'];?>" />
</td>
<td>
<input type="text" id="start_date1" class="start_date" name="start_date" value="<? echo $listb['start_date'];?>" />
</td>
<td>
<input type="text" id="end_date1" class="end_date" name="end_date" value="<? echo $listb['end_date'];?>" />
</td>
<td align="center">
<input type="button" id ="btn1" value="GENERATE" name="action" class ="submit-green" onclick="getDate(this.id)"/>
</td>
</tr>
<!--------------------------------------------------------------------------------------------------------------------------------------->
<td>
<input type="text" id="task_mark2" class="task_mark" name="task_mark" value="<? echo $listb['task_mark'];?>" />
</td>
<td>
<input type="text" id="marking2" class="marking" name="marking" value="<? echo $listb['marking'];?>" />
</td>
<td>
<input type="text" id="destination_marking2" class="destination_marking" name="destination_marking" value="<? echo $listb['destination_marking'];?>" />
</td>
<td>
<input type="text" id="days2" class="days" name="days" value="<? echo $listb['days'];?>" />
</td>
<td>
<input type="text" id="duration2" class="duration" name="duration" value="<? echo $listb['duration'];?>" />
</td>
<td>
<input type="text" id="start_date2" class="start_date" name="start_date" value="<? echo $listb['start_date'];?>" />
</td>
<td>
<input type="text" id="end_date2" class="end_date" name="end_date" value="<? echo $listb['end_date'];?>" />
</td>
<td align="center">
<input type="button" id ="btn2" value="GENERATE" name="action" class ="submit-green" onclick="getDate(this.id)"/>
</td>
</tr>
<?
}}}
?>
<tr>
<td colspan=5 align="center">
<input class="submit-green" type="submit" value="Save" />
</td>
</tr>
</form>
You can do it as following: Make all your id's for each row in table to be different increasing the number on the end from 1,2,3...etc. Example btn1, btn2, etc. And then in HTML code instead onclick="getDate()" change to onclick="getDate(this.id)". And use the below javascript code with some changes to your code.
The Javascript code:
function getDate(id) {
id = id.match(/\d+/);
var sd = document.getElementById('start_date'+ id).value;
var d = document.getElementById('duration' + id).value;
var date = new Date(sd);
var newdate = new Date(date);
var durations = parseInt(d);
newdate.setDate((newdate.getDate() + durations)-1);
var dd = newdate.getDate();
var mm = newdate.getMonth()+1;
var y = newdate.getFullYear();
var someFormattedDate = y + '-' + mm + '-' + dd;
document.getElementById('end_date' + id).value = someFormattedDate;
}
The HTML code:
<table>
<thead>
<tr>
<td colspan=11 align="center"><input class="submit-green" type="submit" value="Save" /></td>
</tr>
<tr>
<td style="font-family:century gothic"><strong><font color="black">Major</font></strong></td>
<td style="font-family:century gothic"><strong><font color="black">Stage</font></strong></td>
<td style="font-family:century gothic"><strong><font color="black">Task</font></strong></td>
<td style="font-family:century gothic"><strong><font color="black">Task Mark</font></strong></td>
<td style="font-family:century gothic"><strong><font color="black">Marking</font></strong></td>
<td style="font-family:century gothic"><strong><font color="black">Destination Marking</font></strong></td>
<td style="font-family:century gothic"><strong><font color="black">Days</font></strong></td>
<td style="font-family:century gothic"><strong><font color="black">Duration</font></strong></td>
<td style="font-family:century gothic"><strong><font color="black">Start</font></strong></td>
<td style="font-family:century gothic"><strong><font color="black">Finish</font></strong></td>
</tr>
</thead>
<tbody>
<tr>
<td style="font-family:century gothic" colspan="12"><strong><font color="black">Initial</font></strong></td>
</tr>
<tr>
<td></td>
<td style="font-family:century gothic" colspan="11"><strong><font color="black">Prelim</font></strong></td>
</tr>
<tr>
<td></td>
<td></td>
<td style="font-family:century gothic"><strong><font color="black">Side Rail</font></strong></td>
<!----THIS IS THE PHP CODE TO BE USED TO CALCULATE THE END DATE BASED ON START DATE ENTERED AND DURATION PICKED FROM DATABASE-->
<td>
<input type="text" id="task_mark1" class="task_mark" value="" />
</td>
<td>
<input type="text" id="marking1" class="marking" value="" />
</td>
<td>
<input type="text" id="destination_marking1" class="destination_marking" value="" />
</td>
<td>
<input type="text" id="days1" class="days" value="" />
</td>
<td>
<input type="text" id="duration1" class="duration" value="" />
</td>
<td>
<input type="text" id="start_date1" class="start_date" value="" />
</td>
<td>
<input type="text" id="end_date1" class="end_date" value="" />
</td>
<td align="center">
<input type="button" id="btn1" value="GENERATE" class="btnGenerate" onclick="getDate(this.id)" />
</td>
</tr>
<tr>
<td></td>
<td></td>
<td style="font-family:century gothic"><strong><font color="black">Bina Stor</font></strong></td>
<td>
<input type="text" id="task_mark2" class="task_mark" name="task_mark" value="" />
</td>
<td>
<input type="text" id="marking2" class="marking" name="marking" value="" />
</td>
<td>
<input type="text" id="destination_marking2" class="destination_marking" name="destination_marking" value="" />
</td>
<td>
<input type="text" id="days2" class="days" name="days" value="" />
</td>
<td>
<input type="text" id="duration2" class="duration" name="duration" value="" />
</td>
<td>
<input type="text" id="start_date2" class="start_date" name="start_date" value="" />
</td>
<td>
<input type="text" id="end_date2" class="end_date" name="end_date" value="" />
</td>
<td align="center">
<input type="button" id="btn2" value="GENERATE" class="btnGenerate" onclick="getDate(this.id)" />
</td>
</tr>
<tr>
<td colspan=5 align="center"><input class="submit-green" type="submit" value="Save" /></td>
</tr>
</tbody>
</table>

jquery input field changes all php loop items value in wordpress

I am trying to create a custom wordpress template for products. For which I need to update the Total quantity when 2 sub-quantity is increased or decreased. Also the value of total quantity will be multiplied with price.
Let's say:
sub-quantity-1 value = 2 and sub-quantity-2 value = 3,
So Total quantity value = 5 and price is 5 x $100 = $500
The problem is I am generating this input fields using wordpress loop, so all the inputs have same class & name.
Lets say: I am increasing sub-quantity for PRODUCT 1 which increases all Total Quantity for PRODUCT 1 to PRODUCT 100
PHP CODE:
<?php $wp_query = new WP_Query( array(
'post_type' => 'product',
'post__in' => array( 481, 478, 934, 178 ),
'posts_per_page' => 15,
'offset' => 0,
'orderby' => '',
'order' => 'ASC' ) );
?>
<?php if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_querys->the_post();
global $product;
$product = get_product( get_the_ID() );
?>
<table>
<thead>
<tr>
<th>Price</th>
<th>Quantity</th>
<th>Total Quantity</th>
<th>Button</th>
</tr>
</thead>
<tbody class="products-container">
<tr class="product-<?php echo esc_attr( $product->id ); ?>">
<form action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" class="cart" method="post" enctype='multipart/form-data'>
<td class="price">
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">
<?php echo get_woocommerce_currency_symbol(); ?>
</span>
<?php echo $product->get_price() ?>
</span>
</td>
<td class="quantity">
<table>
<tr>
<?php echo qty-sz(); ?>
</tr>
<tr>
<?php echo qty-bn(); ?>
</tr>
</table>
</td>
<td class="quantity-total">
<?php woocommerce_quantity_input(); ?>
</td>
<td class="button">
<input type="hidden" name="add-to-cart" value="<?php echo esc_attr( $product->id ); ?>" />
<input type="hidden" name="product_id" value="<?php echo esc_attr( $product->id ); ?>" />
<input type="hidden" name="variation_id" class="variation_id" value="0" />
<button type="submit" class="button buy-now-btn cart-btn product_type_simple add_to_cart_button ajax_add_to_cart" />Add to Cart</button>
</td>
</form>
</tr>
</tbody>
<?php endwhile; wp_reset_query();?>
</table>
GENERATED HTML CODE:
<table>
<thead>
<tr>
<th></th>
<th>Product</th>
<th>Note Box</th>
<th>Price</th>
<th>Choose Your Keyblade</th>
<th>Product Total Quantity</th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="product-934" data-role="product">
<form action="/testsite/wholesale-product-page-template-custom/?add-to-cart=934" class="cart" method="post" enctype="multipart/form-data"></form>
<td class="image">
<img src="https://localhost/testsite/wp-content/plugins/woocommerce/assets/images/placeholder.png" alt="Placeholder" width="150px" height="150px"> </td>
<td class="title">
<h3>Group Product</h3>
</td>
<td class="note">
<label>Type Your Letter</label><input class="letter-note wh-input" name="_wholesale_letter" value="" maxlength="1" placeholder="TYPE 1 LETTER"> </td>
<td class="price">
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">
$ </span>
786 </span>
</td>
<td class="keyblade">
<table>
<tbody><tr>
<th>Schlage-SC1</th><td><input class="sc-note wh-input wh-qty" name="_wholesale_sc" value="" type="number"></td> </tr>
<tr>
<th>Kwikset-KW1</th><td><input class="kw-note wh-input wh-qty" name="_wholesale_kw" value="" type="number"></td> </tr>
</tbody></table>
</td>
<td class="quantity-field">
<div class="quantity">
<input step="1" min="1" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
</div>
</td>
<td class="button">
<input name="add-to-cart" value="934" type="hidden">
<input name="product_id" value="934" type="hidden">
<input name="variation_id" class="variation_id" value="0" type="hidden">
<button type="submit" class="button buy-now-btn cart-btn product_type_simple add_to_cart_button ajax_add_to_cart">Add to Cart</button>
</td>
</tr>
</tbody>
<style>.product-type-variable .summary .price { display: inline-block; } .quantity { display: inline-block; }</style>
<tbody><tr class="product-719 variation-722 wrapper" data-role="product">
<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="719" data-product_variations="null"></form>
<td class="image">
<img src="https://localhost/testsite/wp-content/uploads/2016/10/151-Sterling-Silver-Pink-Tourmaline.png" alt="Custom Key Blades-722" width="150px" height="150px"> </td>
<td class="title">
<h3>Custom Key Blades</h3><br>
<b>18 K Yellow Gold </b>
</td>
<td class="note">
<label>Type Your Letter</label><input class="letter-note wh-input" name="_wholesale_letter" value="" maxlength="1" placeholder="TYPE 1 LETTER"> </td>
<td class="price">
<span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>1,150.00</span></span> </td>
<td class="keyblade">
<table>
<tbody><tr>
<th>Schlage-SC1</th><td><input class="sc-note wh-input wh-qty" name="_wholesale_sc" value="" type="number"></td> </tr>
<tr>
<th>Kwikset-KW1</th><td><input class="kw-note wh-input wh-qty" name="_wholesale_kw" value="" type="number"></td> </tr>
</tbody></table>
</td>
<td>
<div class="quantity">
<input step="1" min="" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
</div>
</td>
<td>
<input name="attribute_pa_setting" value="18-k-yellow-gold" type="hidden">
<button type="submit" class="single_add_to_cart_button btn btn-primary ajax_add_to_cart"><span class="glyphicon glyphicon-tag"></span> Add to cart</button>
<input name="variation_id" value="722" type="hidden">
<input name="product_id" value="719" type="hidden">
<input name="add-to-cart" value="719" type="hidden">
</td>
</tr>
<tr class="product-719 variation-723 wrapper" data-role="product">
<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="719" data-product_variations="null"></form>
<td class="image">
<img src="https://localhost/testsite/wp-content/uploads/2016/10/1470935641.png" alt="Custom Key Blades-723" width="150px" height="150px"> </td>
<td class="title">
<h3>Custom Key Blades</h3><br>
<b>18 K White Gold </b>
</td>
<td class="note">
<label>Type Your Letter</label><input class="letter-note wh-input" name="_wholesale_letter" value="" maxlength="1" placeholder="TYPE 1 LETTER"> </td>
<td class="price">
<span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>1,000.00</span></span> </td>
<td class="keyblade">
<table>
<tbody><tr>
<th>Schlage-SC1</th><td><input class="sc-note wh-input wh-qty" name="_wholesale_sc" value="" type="number"></td> </tr>
<tr>
<th>Kwikset-KW1</th><td><input class="kw-note wh-input wh-qty" name="_wholesale_kw" value="" type="number"></td> </tr>
</tbody></table>
</td>
<td>
<div class="quantity">
<input step="1" min="" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
</div>
</td>
<td>
<input name="attribute_pa_setting" value="18-k-white-gold" type="hidden">
<button type="submit" class="single_add_to_cart_button btn btn-primary ajax_add_to_cart"><span class="glyphicon glyphicon-tag"></span> Add to cart</button>
<input name="variation_id" value="723" type="hidden">
<input name="product_id" value="719" type="hidden">
<input name="add-to-cart" value="719" type="hidden">
</td>
</tr>
<tr class="product-719 variation-724 wrapper" data-role="product">
<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="719" data-product_variations="null"></form>
<td class="image">
<img src="https://localhost/testsite/wp-content/uploads/2016/10/Modern-Iconic-Key-with-Black-Diamond-.png" alt="Custom Key Blades-724" width="150px" height="150px"> </td>
<td class="title">
<h3>Custom Key Blades</h3><br>
<b>18 K Rose Gold </b>
</td>
<td class="note">
<label>Type Your Letter</label><input class="letter-note wh-input" name="_wholesale_letter" value="" maxlength="1" placeholder="TYPE 1 LETTER"> </td>
<td class="price">
<span class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>950.00</span></span> </td>
<td class="keyblade">
<table>
<tbody><tr>
<th>Schlage-SC1</th><td><input class="sc-note wh-input wh-qty" name="_wholesale_sc" value="" type="number"></td> </tr>
<tr>
<th>Kwikset-KW1</th><td><input class="kw-note wh-input wh-qty" name="_wholesale_kw" value="" type="number"></td> </tr>
</tbody></table>
</td>
<td>
<div class="quantity">
<input step="1" min="" max="" name="quantity" value="1" title="Qty" class="input-text qty text" size="4" pattern="[0-9]*" inputmode="numeric" type="number">
</div>
</td>
<td>
<input name="attribute_pa_setting" value="18-k-rose-gold" type="hidden">
<button type="submit" class="single_add_to_cart_button btn btn-primary ajax_add_to_cart"><span class="glyphicon glyphicon-tag"></span> Add to cart</button>
<input name="variation_id" value="724" type="hidden">
<input name="product_id" value="719" type="hidden">
<input name="add-to-cart" value="719" type="hidden">
</td>
</tr>
</tbody>
</table>
AND HERE IS THE JQUERY SCRIPT
<script src="https://code.jquery.com/jquery-1.11.0.js" integrity="sha256-zgND4db0iXaO7v4CLBIYHGoIIudWI5hRMQrPB20j0Qw=" crossorigin="anonymous"></script>
<script>
var quantity = 0;
$(document).ready(function () {
$('input.wh-qty').each(function () {
quantity += parseInt($(this).val());
});
$('input[name="quantity"]').val(quantity);
$('input.wh-qty').on('input', function () {
quantity = 0;
$('input.wh-qty').each(function () {
var amountInfo = parseInt($(this).val());
amountInfo = (amountInfo) ? amountInfo : 0;
quantity += amountInfo;
});
$('input[name="quantity"]').val(quantity);
});
});
</script>
I think you can give your <tr class="product-<?php... an attribute of <tr data-role="product" class="product-<?ph and then use jQuery to get and set values of each row:
$(document).ready(function(){
$('input.wh-qty').on('input', function () {
setQuantity();
});
})
const setQuantity = function(){
$.each(
$(`tr[data-role="product"]`), // add role="product" to tr
function(index,element){
const $el = $(element);
const sc = $el.find("input.sc-note.wh-qty").val();
const kw = $el.find("input.kw-note.wh-qty").val();
if(sc!=="" || kw!==""){
$el.find('input[name="quantity"]').val(
(sc*1)+(kw*1)
);
}
}
);
};
If that doesn't work could you please post the entire html so we don't need to puzzle together what the html is?

jQuery get button classname on button click

I am trying to assign textbox a value on button click. I am assigning the value to previous textbox of button.
I used
var classic = window.Event.target.class;
alert(classic);
but this gives error undefined.
How can I identify which button clicked either by class name or id or some other way.
jQuery(document).ready(function() {
var formfield;
var classic = window.Event.target.class;
/* user clicks button on custom field, runs below code that opens new window */
jQuery(classic).click(function() {
formfield = jQuery(this).prev('input'); //The input field that will hold the uploaded file url
tb_show('','media-upload.php?TB_iframe=true');
return false;
});
//adding my custom function with Thick box close function tb_close() .
window.old_tb_remove = window.tb_remove;
window.tb_remove = function() {
window.old_tb_remove(); // calls the tb_remove() of the Thickbox plugin
formfield=null;
};
// user inserts file into post. only run custom if user started process using the above process
// window.send_to_editor(html) is how wp would normally handle the received data
window.original_send_to_editor = window.send_to_editor;
window.send_to_editor = function(html){
if (formfield) {
fileurl = jQuery('img',html).attr('src');
jQuery(formfield).val(fileurl);
tb_remove();
} else {
window.original_send_to_editor(html);
}
};
});
<form method="post" action="options.php">
<?php settings_fields( 'Option-Man-settings-group' ); ?>
<?php do_settings_sections( 'Option-Man-settings-group' ); ?>
<div class="frame">
<table class="form-table">
<tr valign="top">
<th class="label">Logo URL:</th>
<td><input type="text" name="logo-setting" size="45" value="<?php echo esc_attr( get_option('logo-setting') ); ?>" /></td>
<td><input name="op" class="option-man button" type="button" value="Upload Image" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Header:</th>
<td><input type="text" name="main-header" size="45" value="<?php echo esc_attr( get_option('main-header') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Carousel-url:</th>
<td><input type="text" name="carousel-image" size="45" value="<?php echo esc_attr( get_option('carousel-image') ); ?>" /></td>
<td><input class="option-man button" type="button" value="Upload Image" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Message:</th>
<td><input type="text" name="message-short" size="45" value="<?php echo esc_attr( get_option('message-short') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Question header:</th>
<td><input type="text" name="question-cur" size="45" value="<?php echo esc_attr( get_option('question-cur') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Happy Clients Post Image:</th>
<td><input type="text" name="happy-image" size="45" value="<?php echo esc_attr( get_option('happy-image') ); ?>" /></td>
<td><input class="option-man button" type="button" value="Upload Image" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Happy Clients Post Header:</th>
<td><input type="text" name="happy-header" size="45" value="<?php echo esc_attr( get_option('happy-header') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Happy Clients Post Text:</th>
<td><input type="text" name="happy-text" size="45" value="<?php echo esc_attr( get_option('happy-text') ); ?>" /></td>
</tr>
</tr>
<tr valign="top">
<th scope="row" class="label">Solution Builder Post Image:</th>
<td><input type="text" name="builder-image" size="45" value="<?php echo esc_attr( get_option('builder-image') ); ?>" /></td>
<td><input class="option-man button" type="button" value="Upload Image" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Solution Builder Post Header:</th>
<td><input type="text" name="builder-header" size="45" value="<?php echo esc_attr( get_option('builder-header') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Solution Builder Post Text:</th>
<td><input type="text" name="builder-text" size="45" value="<?php echo esc_attr( get_option('builder-text') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Agile Process Post Image:</th>
<td><input type="text" name="agile-image" size="45" value="<?php echo esc_attr( get_option('agile-image') ); ?>" /></td>
<td><input class="option-man button" type="button" value="Upload Image" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Agile Process Post Header:</th>
<td><input type="text" name="agile-header" size="45" value="<?php echo esc_attr( get_option('agile-header') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Agile Process Post Text:</th>
<td><input type="text" name="agile-text" size="45" value="<?php echo esc_attr( get_option('agile-text') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Honesty Transparency Post Image:</th>
<td><input type="text" name="honesty-image" size="45" value="<?php echo esc_attr( get_option('honesty-image') ); ?>" /></td>
<td><input class="option-man button" type="button" value="Upload Image" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Honesty Transparency Post Header:</th>
<td><input type="text" name="honesty-header" size="45" value="<?php echo esc_attr( get_option('honesty-header') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Honesty Transparency Post Text:</th>
<td><input type="text" name="honesty-text" size="45" value="<?php echo esc_attr( get_option('honesty-text') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">Medtegra Image:</th>
<td><input type="text" name="Client1-image" size="45" value="<?php echo esc_attr( get_option('Client1-image') ); ?>" /></td>
<td><input class="option-man button" type="button" value="Upload Image" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">HDFC Image:</th>
<td><input type="text" name="Client2-image" size="45" value="<?php echo esc_attr( get_option('Client2-image') ); ?>" /></td>
<td><input class="option-man button" type="button" value="Upload Image" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">iitjobs Image:</th>
<td><input type="text" name="Client3-image" size="45" value="<?php echo esc_attr( get_option('Client3-image') ); ?>" /></td>
<td><input class="option-man button" type="button" value="Upload Image" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">ProductiveTeams.com:</th>
<td><input type="text" name="Client4-image" size="45" value="<?php echo esc_attr( get_option('Client4-image') ); ?>" /></td>
<td><input class="option-man button" type="button" value="Upload Image" /></td>
</tr>
<tr valign="top">
<th scope="row" class="label">JFYS Image:</th>
<td><input type="text" name="Client5-image" size="45" value="<?php echo esc_attr( get_option('Client5-image') ); ?>" /></td>
<td><input class="option-man button" type="button" value="Upload Image" /></td>
</tr>
</tr>
<tr valign="top">
<th scope="row" class="label">Clients Message:</th>
<td><input type="text" name="Client-message" size="45" value="<?php echo esc_attr( get_option('Client-message') ); ?>" /></td>
</tr>
</tr>
</tr>
<tr valign="top">
<th scope="row" class="label">Google+:</th>
<td><input type="text" name="google" size="45" value="<?php echo esc_attr( get_option('google') ); ?>" /></td>
</tr>
</tr>
</tr>
<tr valign="top">
<th scope="row" class="label">Twitter:</th>
<td><input type="text" name="twitter" size="45" value="<?php echo esc_attr( get_option('twitter') ); ?>" /></td>
</tr>
</tr>
</tr>
<tr valign="top">
<th scope="row" class="label">Facebook:</th>
<td><input type="text" name="facebook" size="45" value="<?php echo esc_attr( get_option('facebook') ); ?>" /></td>
</tr>
</tr>
</tr>
<tr valign="top">
<th scope="row" class="label">Linkedin:</th>
<td><input type="text" name="linkedin" size="45" value="<?php echo esc_attr( get_option('linkedin') ); ?>" /></td>
</tr>
</table>
</div>
<?php submit_button(); ?>
</form>
I believe this is what you want.
$('.form-table').on('click', 'button, input[type="button"]', function () {
// Get the previous input
var input = $(this).closest('td').prev('td').find('input');
// Get this button class
alert($(this).attr('class'));
// Get this button id
alert($(this).attr('id'));
// Your code here
tb_show('', 'media-upload.php?TB_iframe=true');
return false;
});
Demo: https://jsfiddle.net/tusharj/o59eoomx/2/

How to make these button runs differently?

Well i have generate buttons. Their function are the same which is when i clicked it , it will do the calculations. the problem is when i clicked the second generate button, it will do the calculations for the first one and same goes to third button and so on. what i want is, each generate button will only do calculation for their own job. Can anyone help me ?
my generate button
And below is the code :
<tr>
<td></td>
<td></td>
<td style="font-family:centruy-gothic"<strong><font color = "black">
<?echo $listb['task_name'];?>
<input type="hidden" name="pc_id[]" value="<? echo $pc_id;?>" >
<input type="hidden" name="ps_id[]" value="<? echo $ps_id;?>" >
</font></strong></td>
<td align="center" style="font-family:century gothic"><input type="text" id ="task_mark" class="input-medium" name="task_mark[]" value="<? echo $listb['task_mark'];?>" onchange="getDate()"/></td>
<td align="center" style="font-family:century gothic"><input type="text" id="marking" class="input-medium" name="marking[]" value="<? echo $listb['marking'];?>"onchange="getDate()"/></td>
<td align="center" style="font-family:century gothic"><input type="text" id="destination_marking" class="input-medium" name="destination_marking[]" value="<? echo $listb['destination_marking'];?>"onchange="getDate()"/></td>
<td align="center" style="font-family:century gothic"><input type="text" id="days" class="input-medium" name="days[]" value="<? echo $listb['days'];?>"onchange="getDate()"/></td>
<td align="center" style="font-family:century gothic"><input type="text" id="duration" class="input-medium" name="duration[]" value="<? echo $listb['duration'];?>" onchange="calc()"/></td>
<td align="center" style="font-family:century gothic"><input type="text" id="start_date" class="input-long" name="start_date[]" value="<? echo $listb['start_date'];?>" class="date demo" onchange="getDate()" ></td>
<td align="center" style="font-family:century gothic"><input type="text" id="end_date" class="input-long" name="end_date[]" value="<? echo $listb['end_date'];?>" class="date demo" onchange="getDate()"></td>
<td align="center" ><input class="submit-green" id="end_date" type="button" name="end_date[]" value="GENERATE" onclick="getDate()"></td>
</tr>
And here's the script
<script>
function getDate()
{
var sd = document.getElementById('start_date').value;
var dura = document.getElementById('duration').value;
var m = document.getElementById('marking').value;
var date = new Date(sd);
var newdate = new Date (date);
var durations = parseInt(dura);
var markings = parseInt(m);
if (markings === 1)
{
newdate.setDate(newdate.getDate());
}
else if (markings === 2)
{
newdate.setDate(newdate.getDate() + durations);
}
else if (markings === 3)
{
newdate.setDate((newdate.getDate() + durations) + 1 );
}
var dd = newdate.getDate();
var mm = newdate.getMonth()+1;
var y = newdate.getFullYear();
var someFormattedDate = y + '-' + mm +'-' + dd;
document.getElementById('end_date').value = someFormattedDate;
}
</script>
You can give a parameter in the html code modifying the onchange="getDate()" like this:
<td align="center" style="font-family:century gothic"><input type="text" id ="task_mark" class="input-medium" name="task_mark[]" value="<? echo $listb['task_mark'];?>" onchange="getDate(1)"/></td>
<td align="center" style="font-family:century gothic"><input type="text" id="marking" class="input-medium" name="marking[]" value="<? echo $listb['marking'];?>"onchange="getDate(2)"/></td>
<td align="center" style="font-family:century gothic"><input type="text" id="destination_marking" class="input-medium" name="destination_marking[]" value="<? echo $listb['destination_marking'];?>"onchange="getDate(3)"/></td>
<td align="center" style="font-family:century gothic"><input type="text" id="days" class="input-medium" name="days[]" value="<? echo $listb['days'];?>"onchange="getDate(4)"/></td>
<td align="center" style="font-family:century gothic"><input type="text" id="duration" class="input-medium" name="duration[]" value="<? echo $listb['duration'];?>" onchange="calc()"/></td>
<td align="center" style="font-family:century gothic"><input type="text" id="start_date" class="input-long" name="start_date[]" value="<? echo $listb['start_date'];?>" class="date demo" onchange="getDate(5)" ></td>
<td align="center" style="font-family:century gothic"><input type="text" id="end_date" class="input-long" name="end_date[]" value="<? echo $listb['end_date'];?>" class="date demo" onchange="getDate(6)"></td>
<td align="center" ><input class="submit-green" id="end_date" type="button" name="end_date[]" value="GENERATE" onclick="getDate(7)"></td>
Then, in the script you get the parameter to do different things:
<script>
function getDate(param)
{
And now you now wich of the button he checked
I assume you have a foreach before your table rows.
In this case u have several times the same id for each input field.
Try to make the id's unique. Something like this:
<input type="text" id ="task_mark_row1">
//next table row:
<input type="text" id ="task_mark_row2">
...

How do I show alert message when field/s is not empty and button is not click?

I have html form with 4 fields which is 1) Department 2) Phone 3) Employees 4) Date. So If user press the save_department_number button without enter anything on the fields I can show a error message using jquery/ajax.
But now I want to show a alert message WHEN all field/fields is not empty BUT user forgot to click save_department_button button. How can I do this using JQuery / Javascript ?
Here is my html form
<div id="column3">
<form id="save_department">
<table border="0" width="520">
<div id="success"></div>
<tr>
<td colspan="1" valign="top"><b>Add Department Number <hr></b></td>
<td colspan="1" align="right"><a id="addmore">Add more (+)</a> </td>
<td colspan="2" valign="top" align="right" width="170"><input type="submit" class="search_submit" value="Save Department Number"><input type="hidden" name="cid" value="<?php echo $cid; ?>"></td>
</tr>
</table>
<div class="department_box">
<table border="0" width="510">
<tr>
<td valign="top" width="135"><b>Department</b></td>
<td valign="top" width="135"><b>Phone</b></td>
<td valign="top" width="75"><b>Employees</b></td>
<td valign="top"><b>Date</b></td>
</tr>
<?php
$depart_row_check = mysqli_query($link, "SELECT * FROM company_department WHERE cid = '$cid' ");
$num_depart_row_check = mysqli_num_rows($depart_row_check);
if($num_depart_row_check == 0){
?>
<tr id="clone">
<td><input type="text" name="department[]" class="medium" id="department" value="" placeholder="department"><input type="hidden" name="new[]" value="new" /></td>
<td><input type="text" name="phone[]" class="medium" id="phone" value="" placeholder="phone"></td>
<td><input type="text" name="employee[]" class="small" id="employee" value="" placeholder="employees"></td>
<td><input type="text" disabled="disabled" value="" class="date" placeholder="date"></td>
</tr>
<?php
}else{
$depart_row_check = mysqli_query($link, "SELECT * FROM company_department WHERE cid = '$cid' ");
while($fetch_department = mysqli_fetch_array($depart_row_check)){
$department_d = stripslashes($fetch_department['department']);
$phone_d = stripslashes($fetch_department['phone']);
$employee_d = stripslashes($fetch_department['employee']);
$updated_d = stripslashes($fetch_department['updated']);
$com_d_id = (int) $fetch_department['com_d_id'];
?>
<tr id="clone">
<td><input type="text" name="department[]" class="medium" id="department" value="<?php echo $department_d; ?>" placeholder="department">
<input type="hidden" name="existing[]" value="<?php echo $com_d_id; ?>" /></td>
<td><input type="text" name="phone[]" class="medium" id="phone" value="<?php echo $phone_d; ?>" placeholder="phone"></td>
<td><input type="text" name="employee[]" class="small" id="employee" value="<?php echo $employee_d; ?>" placeholder="employees"></td>
<td><input type="text" disabled="disabled" class="date" value="<?php echo $updated_d; ?>" placeholder="date"></td>
</tr>
<?php
}
}
?>
<div class="apendto"></div>
</table>
</div>
</form>
May be It can be done using this but can't complete it:
$(document).ready(function(){
$(document).click(function(e){
if ($(e.target).is('#save_department,#save_department *')) {
return;
}
else
{
alert("Hi");
}
});
});

Resources