Enable/disable multiple textboxes - javascript

Code:
<?php
include('conect.php');
$result = mysqli_query($conn,"SELECT * FROM `op` WHERE `type` = 2 ;");
echo "<table class='table table-striped table-hover'id='datatables-example'>
<tr>
<td class='pure-table'><b>Title 1</b></td>
<td class='pure-table'><b>Title 2</b></td>
<td class='pure-table'><b>Check 1</b></td>
<td class='pure-table'><b>Title 3</b></td>
<td class='pure-table'><b>VCheck 2</b></td>
</tr>";
while($row = mysqli_fetch_array($result))
{
echo "<tbody data-link='row' class='rowlink'>
<tr>
<td>' . $row['Op'] . '</td>
<td> <input type='text' name='T2' class='form-control'>
<td style='text-align:center;'> <input type='checkbox' name='C1' id='C1' >
<td> <input type='text' name='T3' id='T3' class='form-control' disabled >
<td style='text-align:center;'> <input type='checkbox' name='C2'>
</tr>
</tbody>
}
</table>";
mysqli_close($conn);
?>
<script language ="JavaScript">
document.getElementById('C1').onchange = function() {
document.getElementById('T3').disabled = !this.checked;
};
</script>
I want to enable/disable multiple textboxes generated by the row number of input data.
The first row works fine but the other lines not.
What am I doing wrong?

None of your <td> tags are closed in the second row.

Related

How to calculate discount, TAX (VAT), Subtotal and Grand Total In a dynamic Table

I just started with jQuery so im a still a newbie. Could somebody please help me with how to calculate the new price in a dynamic table. I have a dynamic table with 3 columns, Qty, Discount and Price. I need to recalculate the new price after a user enter a discount(%) in the same textbox the current price is, the subtotal and the grand total.
Here is my table:
<table class="table">
<thead><tr><th style="width:60%">Description</th><th class="centrer" style="width:10%">Qty</th><th class="centrer" style="width:10%">Discount</th><th class="centrer" style="width:20%">Price</th></tr></thead>
<tbody>
<?php
if(isset($listeArticlePourUnDossier) && count($listeArticlePourUnDossier) > 0)
{
$sousTotal = 0;
$symbol = '';
$VAT = 0;
$TTC = 0;
$iArticles = 0;
while($iArticles < count($listeArticlePourUnDossier))
{
$ARTICLE_CURRENCY = $listeArticlePourUnDossier[$iArticles]['ARTICLE_CURRENCY'];
$sousTotal = $sousTotal + ($listeArticlePourUnDossier[$iArticles]['ARTICLE_PRIX']);
?>
<tr>
<td><?php echo ($listeArticlePourUnDossier[$iArticles]['ARTICLE_NOM']); ?></td>
<td class="centrer">1</td>
<td class="centrer"><input type="text" name="txtdiscount" id="txtdiscount_<?php echo $iArticles; ?>" onkeyup="calc()"/></td>
<td class="centrer"><input type="text" name="txtPrice" id="txtPrice_<?php echo $iArticles; ?>" readonly value="<?php echo (number_format($listeArticlePourUnDossier[$iArticles]['ARTICLE_PRIX'],2)); ?>"/></td>
</tr>
<?php
$iArticles++;
}
?>
<tr>
<td class="nocolor"></td>
<td></td>
<td class="centrer bold">Subtotal</td>
<td class="centrer bold"><?php echo (number_format($sousTotal,2)); ?></td>
</tr>
<tr>
<td class="nocolor"></td>
<td></td>
<td class="centrer bold">VAT</td>
<td class="centrer"><?phpecho (number_format($VAT,2)); ?></td>
</tr>
<tr>
<td class="nocolor"></td>
<td></td>
<td class="centrer bold">G.Total</td>
<td class="centrer bold">
<?php
$TTC = $sousTotal - $VAT;
echo (number_format($TTC,2));
?>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
How to fill up the new price in the current price textbox as soon as a user enter a discount say 10%?
Thank you for your assistance.
You can fill the discounted amount in the price field like this, please check the below code, Hope it will help,
Here, updated td's, which you are using and js code.
Thanks.
<td class="centrer">
<input type="text" name="txtdiscount" value ="" id="txtdiscount_<?php echo $iArticles; ?>" onkeyup="calc(this.value,'<?php echo $iArticles; ?>')"
/>
</td>
<td class="centrer">
<input type="text" name="txtPrice" id="txtPrice_<?php echo $iArticles; ?>" readonly value="<?php echo (number_format($data['price'],2)); ?>" />
<input type="hidden" name="hidden_txtPrice" id="hidden_txtPrice_<?php echo $iArticles; ?>" readonly value="<?php echo (number_format($data['price'],2)); ?>" />
</td>
<tr>
<td class="nocolor"></td>
<td></td>
<td class="centrer bold">VAT</td>
<td class="centrer">
<select name="vatDropdown" id="vatDropdown">
<option value="-1">Select VAT</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
</td>
</tr>
<tr>
<td class="nocolor"></td>
<td></td>
<td class="centrer bold">G.Total</td>
<td class="centrer bold" id="grandtotal">
<?php echo (number_format($TTC,2)); ?>
</td>
<input type="hidden" name="hidden_total" id="hidden_total" value="<?php echo (number_format($TTC,2)); ?>" />
</tr>
<script>
function calc(discount, article_id)
{
var price = 0;
var dis_amt = 0;
var calculatedAmt = 0;
var discount_amt = 0;
price = $("#hidden_txtPrice_"+article_id).val();
if(discount != '')
{
dis_amt = parseFloat(discount) / 100;
calculatedAmt = parseFloat(price) * parseFloat(dis_amt);
discount_amt = parseFloat(price) - parseFloat(calculatedAmt);
$("#txtPrice_"+article_id).val(discount_amt);
}
else
{
$("#txtPrice_"+article_id).val(price);
}
}
$("#vatDropdown").on('change', function(){
var dropdown_val = $(this).val();
var grandtotal = $("#hidden_total").val();
if(dropdown_val == '1')
{
var vat_dis = 15 / 100;
var vat_amt = parseFloat(grandtotal) * parseFloat(vat_dis);
var gTotal = parseFloat(grandtotal) + parseFloat(vat_amt);
$("#grandtotal").html(gTotal.toFixed(2));
}
else
{
$("#grandtotal").text(grandtotal);
}
});
</script>

Add Checked Table Rows to Email Body

I have a table where each row can be selected by checking a checkbox. Whatever rows are selected, I am wanting those rows to be pasted to the body of an email that pops up when the "Checkout" button is pressed.
Currently, whenever I hit the "Checkout" button, the email pops up and it will display the first row in the table, whether selected or not, but nothing more.
How can I get multiple selections displayed based on if it is checked?
Table:
<section id="checkout-btn">
<button id="checkout" name="order" onclick="sendMail(); return false">Checkout</button>
</section>
<br>
<table id="merchTable" cellspacing="5" class="sortable">
<thead>
<tr class="ui-widget-header">
<th class="sorttable_nosort"></th>
<th class="sorttable_nosort">Loc</th>
<th class="merchRow">Report Code</th>
<th class="merchRow">SKU</th>
<th class="merchRow">Special ID</th>
<th class="merchRow">Description</th>
<th class="merchRow">Quantity</th>
<th class="sorttable_nosort">Unit</th>
<th style="display: none;" class="num">Quantity #</th>
</tr>
</thead>
<tbody>
<?php foreach ($dbh->query($query) as $row) {?>
<tr>
<td class="ui-widget-content"><input type="checkbox" class="check" name="check" id="checkid-<?php echo intval ($row['ID'])?>"></td>
<td class="loc ui-widget-content" data-loc="<?php echo $row['Loc'] ?>"><input type="hidden"><?php echo $row['Loc'];?></td>
<td name="rows[0][0][rp-code]" class="rp-code ui-widget-content" align="center" data-rp-code="<?php echo $row['Rp-Code'] ?>" id="rp-code-<?php echo intval ($row['Rp-Code'])?>"><?php echo $row['Rp-Code'];?></td>
<td name="rows[0][0][sku]" class="sku ui-widget-content" data-sku="<?php echo $row['SKU'] ?>" id="sku-<?php echo intval ($row['SKU'])?>"><?php echo $row['SKU'];?></td>
<td name="rows[0][0][special-id]" class="special-id ui-widget-content" data-special-id="<?php echo $row['Special-ID'] ?>" align="center" id="special-id-<?php echo intval ($row['Special-ID'])?>"><?php echo $row['Special-ID'];?></td>
<td name="rows[0][0][description]" class="description ui-widget-content" data-description="<?php echo $row['Description'] ?>" id="description-<?php echo intval ($row['Description'])?>"><?php echo $row['Description'];?></td>
<td name="rows[0][0][quantity]" class="quantity ui-widget-content" data-quantity="<?php echo $row['Quantity'] ?>" align="center" id="quantity-<?php echo intval ($row['Quantity'])?>"><?php echo $row['Quantity'];?></td>
<td name="rows[0][0][unit]" class="unit ui-widget-content" data-unit="<?php echo $row['Unit'] ?>" id="unit-<?php echo intval ($row['Unit'])?>"><?php echo $row['Unit'];?></td>
<td name="rows[0][0][quant]" style="display: none;" class="quantity_num ui-widget-content"><input type="textbox" style="width: 100px;" class="spinner" id="spin-<?php echo intval ($row['ID'])?>"></td>
</tr>
<?php } ?>
</tbody>
</table>
Javascript that adds data to email:
function sendMail() {
var link = "mailto:me#example.com"
+ "?subject=" + encodeURIComponent("Order")
+ "&body=" + encodeURIComponent($('.loc').data('loc')) + '\xa0\xa0' + encodeURIComponent($('.rp-code').data('rp-code')) + '\xa0\xa0' + encodeURIComponent($('.sku').data('sku')) + '\xa0\xa0' + encodeURIComponent($('.special-id').data('special-id')) + '\xa0\xa0' + encodeURIComponent($('.description').data('description')) + '\xa0\xa0' + encodeURIComponent($('.quantity').data('quantity')) + '\xa0\xa0' + encodeURIComponent($('.unit').data('unit')) + '\xa0\xa0' + encodeURIComponent($('.quantity_num').data('quantity_num'));
window.location.href = link;
}
While this is terrbile idea to send emails via JS like this, You can try:
function sendMail(){
var link = "mailto:me#example.com"
+ "?subject=" + encodeURIComponent("Order")
+ "&body=";
var body = '';
$('table tr input[name="check"]:checked').each(function(){
var current_tr = $(this).parent().parent();
var loc = current_tr.find('.loc').data('loc');
body += encodeURIComponent(loc) + '\xa0\xa0';
var loc =current_tr.find('.rp-code').data('rp-code');
body += encodeURIComponent(loc) + '\xa0\xa0';
});
body += '"';
link += body;
console.log(link);
}
You need to iterate over every TR that contains checkbox and check if it's :checked .
Then add avery data that You need into your's body var.
You are calling array elements like rows[0][0][rp-code] outside of PHP tags.
You could create the tables more easily by keeping all nested inside the PHP tags and by echoing each table elements.
Like so:
echo <tr>;
echo <td name="rows[0][0][rp-code]">Some Text</td>;
echo </tr>;
You could also do everything inside javascript, but this depends on your preferences

How to get the id of the last element?

I have the list of products ,using below code
<table id="product">
<thead>
<tr>
<th style="width:30%;">Item Name</th>
<th style="width:11%;">Price</th>
<th style="width:11%;">Qty</th>
</tr>
</thead>
<tbody id="cart_contents">
<?php $i=1;
foreach($cart as $line=>$item)
{
?>
<tr>
<td style="align:center;"><?php echo $item['name']; ?></td>
<td><input type="text" id="price_<?php echo $i;?>" value="<?php echo $item['price']; ?>" name="price"></td>
<td id="qnty"><input type="text" id="quantity_<?php echo $i;?>" value="<?php echo $item['quantity']; ?>" name="quantity"></td>
</tr>
<?php
$i++;
}
?>
</tbody>
</table>
I need to edit quantity and price fields of last added product.
<table width="297px" style="float:left" class="CSSTableGenerator">
<tr>
<td onclick="click_quantity();">Qty</td>
<td onclick="click_price();"> <a href="javascript:void(0);" >Price</a></td>
</tr>
</table>
function click_quantity(){
$("#table register").find("td qnty").each(function(){
var id = $(this).attr("id");
alert(id);
})
}
How to get the last quantity field's id, after clicking the Qty link?
I have tried some codes, but I am unable to get last element's id.
EX : id names are quantity_1, quantity_2, quantity_3, quantity_4.
How to get quantity_4 (last elment's id)?
HTML
<table id="product">
<thead>
<tr>
<th style="width:30%;">Item Name</th>
<th style="width:11%;">Price</th>
<th style="width:11%;">Qty</th>
</tr>
</thead>
<tbody id="cart_contents">
<?php $i=1;
foreach($cart as $line=>$item)
{
?>
<tr>
<td style="align:center;"><?php echo $item['name']; ?></td>
<td>
<input type="text" id="price_<?php echo $i;?>" value="<?php echo $item['price']; ?>" name="price"/>
</td>
<td class="qnty">
<input class="qnty_input" type="text" id="quantity_<?php echo $i;?>" value="<?php echo $item['quantity']; ?>" name="quantity"/>
</td>
</tr>
<?php
$i++;
} ?>
</tbody>
</table>
JS Code
function click_quantity(){
var id = $("#cart_contents tr:last-child .qnty_input").attr("id");
// rest of your logic
}
1) you are using same ID in loop, that is not valid;
2) I think your js is wrong, use : $("#register").find("#qnty"), but has to be find('.qnty')
Try this one.
var last_id = $( 'table tbody tr td:last-child').attr( 'id' );
To get the last row(td) in table you can use this,
$('table tbody tr td:last-child')
In order to get last child element you can make use of Try to use last property of jquery
$("#cart_contents td:last").find('input[type=text]').attr('id');
$("#cart_contents td:last")
using this you'll find last column in each row so you have to use
$("#cart_contents tr:last-child td.qnty")

SUM dynamic input field onchange with javascript

how to sum all those field (name="envelope[]") and display the result in another input. I'm not sure how to do that because those fields are generated dynamycally. tks Seby
UPDATE: here's what I tried with the javascript function. the problem I have is that the function start but gives me the result of all envelope[] input. But i need the result on every lines, not from all the envelope[] fields.
I've change the hilighted field, but the top amount changed.
see example here: http://www.soniajanelle.ca/example.jpg
function findTotal(){
var arr = document.getElementsByName('envelope[]');
var tot=0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('totalsum').value = tot;
}
</script>
</head>
<body>
<div id="slimScroll" style="overflow:auto; overflow-x:hidden; overflow-y:hidden; height:<? echo $row_admin_detail['size_height'];?>px;" >
<table width="100%" align="center" border="0">
<tr><td height="0px" align="center" colspan="2"></td></tr>
<tr>
<table border="0" width="100%" class="ft12" >
<tr><td class="ann_title" align="center" colspan="2"><h2>Transactions</h2></td></tr>
<td valign="top" align="center" >
<div id="delDiv" >
</table>
<table width="450px" border="0" cellspacing="0" cellpadding="0" >
<tr class="table" height="125px">
<th width="1%" align="center"></th>
<th width="3%" align="center"></th>
<th width="10%" align="center" colspan="2" >Action</th>
<th width="8%" align="center">Type</th>
<th width="8%" align="center">Date</th>
<th width="20%" align="center">Payee</th>
<th width="8%" align="center">Amount</th>
<th width="20%" align="center">Envelope</th>
<th width="2%" align="center"></th>
<?
$query = "SELECT * from envelope_sub order by budgeted_amount desc";
$result = mysql_query($query) or die(mysql_error());
while ($envelopeSub = mysql_fetch_array($result))
{
echo "
<th width=\"8%\" align=\"right\"
><p><FONT size=\"2\"> ".$envelopeSub['real_amount']=number_format($envelopeSub['real_amount'],2,'.','')."$</FONT> </p><br>
<p class=\"rotate\">".$envelopeSub['name']."</p></th>
";
}
?>
</tr>
<tr >
<form method="post" action="main.php?act=stats&do=add&type=insert">
<th align="center"></th>
<th align="center"><img src="http://www.sebyphotographe.com/simplestudio/images/plus-icon 2.png" class="removeimg"></a></th>
<th align="center" colspan="2" ><div class="ann_search_submit"><input class="ann_submit" type="submit" value="Ajouter" /></div></th>
<th align="center"><input class="ann_textbox" name="type" type="text" size="8%"/></th>
<th align="center"><input class="ann_textbox" name="date" type="text" size="8%"/></th>
<th align="center"><input class="ann_textbox" name="payee" type="text" size="20%"/></th>
<th align="center"><input class="ann_textbox" name="amount" type="text" size="8%" onkeypress="return isNumeric(event)" /></th>
<th align="center"><select>
<option selected="selected">Distribuer montant...</option>
<option>par pourcentage</option>
<option>par montant fixe</option>
<option>Manuellement</option>
</select></th>
<th align="center"></th>
<?
$query = "SELECT * from envelope_sub order by id desc";
$result = mysql_query($query) or die(mysql_error());
while ($envelopeSub = mysql_fetch_array($result))
{
echo "
<input type=\"hidden\" name=\"envelope_id[]\" value=\"".$envelopeSub['id']."\">
<th align=\"center\"><input class=\"ann_textbox\" name=\"envelope[]\" type=\"text\" size=\"8%\" onkeypress=\"return isNumeric(event)\" /></th>
";
}
?>
</form>
</tr>
<?
$i=0;
$k=0;
$transactions = mysql_query("select * from transactions");
while($row_transactions=mysql_fetch_array($transactions))
{
?>
<form method="post" action="main.php?act=stats&do=edit&type=update">
<input type="hidden" name="id" value="<? echo $row_transactions['id']?>">
<tr class="<?=$bgcolor?>" nowrap="nowrap" onmouseover="style.backgroundColor='#EAEFF3';" onmouseout="style.backgroundColor='<?=$bgs?>'" >
<td align="left" nowrap="nowrap"> </td>
<td colspan="2" ><img src="http://www.sebyphotographe.com/simplestudio/images/icon_delete.png" class="removeimg"></td>
<td ><div class="ann_search_submit"><input class="ann_submit" type="submit" value="Update" ></div></td>
<td ><input class="ann_textbox" name="type" type="text" value="<?echo $row_transactions['type']?>" size="8%"/></td>
<td ><input class="ann_textbox" name="date" type="text" value="<?echo $row_transactions['date']?>" size="8%"/></td>
<td ><input class="ann_textbox" name="payee" type="text" value="<?echo $row_transactions['payee']?>" size="20%"/></td>
<? $row_transactions['amount']=number_format($row_transactions['amount'],2,'.',''); ?>
<td >
<? if ($row_transactions['type']=="Expense"){?>
<input id="totalsum" class="ann_textbox" name="amount" type="text" style="color:red;text-align:right;" value=" <?echo "(".$row_transactions['amount'].")";?>" size="8%"/></td><?
}ELSE{ ?>
<input id="totalsum" class="ann_textbox" name="amount" type="text" style="text-align:right;" value=" <?echo $row_transactions['amount'];?>" size="8%"/></td><? } ?>
<td ><input class="ann_textbox" name="envelope_<?echo $i?>" type="text" value="<?echo $row_transactions['envelope']?>" /></td>
<td></td>
<?
$query_env = "SELECT * from transactions_details WHERE transactions_id='".$row_transactions['id']."' order by enveloppe_sub_id desc";
$result_env = mysql_query($query_env) or die(mysql_error());
while ($env_amount = mysql_fetch_array($result_env))
{
if ($env_amount['amount']==0){$env_amount['amount']="";}
$env_amount['amount']=number_format($env_amount['amount'],2,'.','');
if ($env_amount['type']=="Expense"){
echo "
<input type=\"hidden\" name=\"trans_id[]\" value=\"".$env_amount['transactions_id']." \">
<input type=\"hidden\" name=\"envelope_id[]\" value=\"".$env_amount['enveloppe_sub_id']."\">
<input type=\"hidden\" name=\"type_env[]\" value=\"".$row_transactions['type']."\">
<td align=\"center\"><input onchange=\"findTotal()\" class=\"ann_textbox\" name=\"envelope[]\" type=\"text\" size=\"8%\" style=\"text-align:right;color:red\" value=\"(".$env_amount['amount'].")\" /></td>";
}ELSE{
echo "
<input type=\"hidden\" name=\"trans_id[]\" value=\"".$env_amount['transactions_id']." \">
<input type=\"hidden\" name=\"envelope_id[]\" value=\"".$env_amount['enveloppe_sub_id']."\">
<input type=\"hidden\" name=\"type_env[]\" value=\"".$row_transactions['type']."\">
<td align=\"center\"><input onchange=\"findTotal()\" class=\"ann_textbox\" name=\"envelope[]\" type=\"text\" size=\"8%\" style=\"text-align:right;\" value=\"".$env_amount['amount']."\" /></td>";
}
}
?>
</tr>
</form>
<?
$i++;
$k++;
}
?>
Something like this should do the trick
var elems = document.getElementByName('envelope[]');
var sum = 0;
for (var i = 0; i < elems.length; i++)
{
sum += parseInt(elems[i].value);
}
document.getElementById('yourelementid').value = sum;

EDIT: add an identifier to a dynamically generated row

I'm pulling down two tables from the db. There's a Javascript function that adds a row from Table2 into the Table1. What i've been trying to do is get the data from Table1 on the confirm_trade.php page so I can put it into the db but can't figure out how to pull that row(item_id). I thought putting the table in a form would allow me to access them through the $_POST but that's not working. How to add an identifier to the jquery row so I can grab on the confirm page?
The appended rows coming from the jQuery function are the rows I need the item_id from.
function addto(obj)
{
var $row = $(obj).parents("tr");
var $table = $("#tradee");
var item_id = $row.find(".item-id").text();
var item_name = $row.find(".item-name").text();
var item_desc = $row.find(".item-desc").text();
var newTR = $("<tr><td>"+item_id+"</td><td>"+item_name+
"</td><td>"+item_desc+"</td></tr>");
$table.append(newTR);
}
Table2:
<div id='fixedDiv'>
<form action="confirm.php" method="post">
<table align="center" id="Table2">
<tr><td>Other Item</td></tr>
<?php while($rowi =$item->fetch_assoc())
{?>
<tr>
<td>
<?php echo $rowi['item_id']; ?>
</td>
<td>
<?php echo $rowi['item_name']; ?>
</td>
<td><?php echo $rowi['item_description'];?></td>
</tr>
<?php } ?>
<tr>
<td><input type="submit" name="submit" value="Continue"/></td>
</tr>
</table>
</form>
</div>
<br>
Table 1:
<table align="center" id="Table1">
<tr><th>item_id</th>
<th>Cat_id</th>
<th>Name</th>
<th>Description</th>
</tr>
<?php while($row =$item_results->fetch_assoc())
{?>
<tr></tr>
<tr>
<td class="item-id"> <?php echo $row['item_id']; ?> </td>
<td><?php echo $cat_id = $row['cat_id']; ?> </td>
<td class="item-name"><?php echo $item_id = $row['item_name'];?></td>
<td class="item-desc"><?php echo $item_descrip = $row['item_description'];?>
</td>
<td><input type="button" class="added" onclick="addto(this)"
value="Add" />
<td><input type="button" class="removed" onclick="remove()"
value="Remove" >
</td>
</tr>
<?php } ?>
</table>
Judging by your code, you can use <input type="hidden" name="some_hidden_data" value="field-value">. be sure that you also wrap your table with <form method="post"></form>
the hidden field will be then included as $_POST['hidden_field_name'];

Categories

Resources