I have a multiple column table with one of the columns being a checkbox. I can check different rows and then hit a "Checkout" button and it will display the corresponding selected table row data in the body of an email.
Whenever a checkbox is checked, it also displays an extra column Quantity # which contains a spinner where the user can either type in a number or use the up/down arrows to select a number. However, when I enter a number and then hit the "Checkout" button, the value is always displayed as undefined.
I am getting the value of the spinner in my console but am unsure of how to get it displayed on my email. How can I get it so that the value will be read and correctly displayed on the email body?
HTML:
<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 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 class="sku ui-widget-content" data-sku="<?php echo $row['SKU'] ?>" id="sku-<?php echo intval ($row['SKU'])?>"><?php echo $row['SKU'];?></td>
<td 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 class="description ui-widget-content" data-description="<?php echo htmlspecialchars($row['Description']) ?>" id="description-<?php echo intval ($row['Description'])?>"><?php echo $row['Description'];?></td>
<td 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 class="unit ui-widget-content" data-unit="<?php echo $row['Unit'] ?>" id="unit-<?php echo intval ($row['Unit'])?>"><?php echo $row['Unit'];?></td>
<td style="display: none;" class="quantity_num ui-widget-content" data-spinner="<?php echo intval ($row['ID'])?>"><input type="textbox" style="width: 100px;" class="spinner" id="spin-<?php echo intval ($row['ID'])?>"></td>
</tr>
<?php } ?>
</tbody>
</table>
Javascript to send data to email:
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 data = current_tr.find('.loc').data('loc');
body += encodeURIComponent(data) + '\xa0\xa0';
var data =current_tr.find('.rp-code').data('rp-code');
body += encodeURIComponent(data) + '\xa0\xa0';
var data =current_tr.find('.sku').data('sku');
body += encodeURIComponent(data) + '\xa0\xa0';
var data =current_tr.find('.special-id').data('special-id');
body += encodeURIComponent(data) + '\xa0\xa0';
var data =current_tr.find('.description').data('description');
body += encodeURIComponent(data) + '\xa0\xa0';
var data =current_tr.find('.quantity').data('quantity');
body += encodeURIComponent(data) + '\xa0\xa0';
var data =current_tr.find('.unit').data('unit');
body += encodeURIComponent(data) + '\xa0\xa0';
var data =current_tr.find('.quantity_num').data('spinner');
body += encodeURIComponent(data) + '\xa0\xa0';
body += '%0D%0A';
});
body += '';
link += body;
console.log(link);
window.location.href = link;
}
JavaScript for spinner:
$(function () {
$(".check").change(function(){
$(this).closest('tr').find('td.quantity_num').toggle(this.checked);
console.log($('input.check').is(':checked'));
var quantity = $(this).closest('tr').find('td.quantity').data('quantity');
console.log(quantity);
if($('input.check').is(':checked'))
$(this).closest('table').find('th.num').toggle(true);
else
$(this).closest('table').find('th.num').toggle(false);
$(this).closest("tr").find(".spinner" ).spinner({
spin: function( event, ui ) {
if ( ui.value > quantity ) {
$( this ).spinner( "value", quantity );
return false;
} else if ( ui.value <= 1 ) {
$( this ).spinner( "value", 1 );
return false;
}
var test = ui.value;
sessionStorage.setItem("test", JSON.stringify(test));
var testtrue = sessionStorage.getItem("test");
console.log(JSON.parse(testtrue));
}
});
});
});
As far as I can tell, you want to get the current value of the so-called spinner, which is given by :
$(selector).spinner('value')
So, in full, something like this should build the required string :
function sendMail() {
var dataItems = [
{ 'clss':'.loc', 'prop':'loc' },
{ 'clss':'.rp-code', 'prop':'rpCode' },
{ 'clss':'.sku', 'prop':'sku' },
{ 'clss':'.special-id', 'prop':'specialId' },
{ 'clss':'.description', 'prop':'description' },
{ 'clss':'.quantity', 'prop':'quantity' },
{ 'clss':'.unit', 'prop':'unit' }
];
var link = "mailto:me#example.com" + "?subject=" + encodeURIComponent("Order") + "&body=";
link += $('#merchTable tr input[name="check"]:checked').closest('tr').get().map(function(tr) {
var str = dataItems.map(function(item) {
return encodeURIComponent($(tr).find(item.clss).data(item.prop)) + '\xa0\xa0';
}).join('');
str += encodeURIComponent($(tr).find('.spinner').spinner('value')) + '\xa0\xa0';
return str;
}).join('') + '%0D%0A';
console.log(link);
window.location.href = link;
}
Note the use of .map() (twice) to map an Array of objects to Array of strings, and .join('') to put the pieces together.
Related
I am new in Javascript. I have created an invoice table where the total value in the last column is calculated by selecting item price with putting the value in quantity field.
There are two issues being faced by me.
The total value is calculated correctly when I put the value in the quantity but total value isn't updating the correct total when I change item name.
The total value isn't reflecting, when I set the type of input i.e type="number" and try to add value by arrow
Here is the Code:
<div class="box pattern pattern-sandstone">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Item</th><th>Description</th><th>Price</th><th>Qty</th><th>Total</th>
</tr></thead>
<tbody id="customFields">
<tr>
<td>1</td><td >
<?php
$conn = mysqli_connect('localhost','dbuser','dbpass','dbname');
$query_order_to = "SELECT * from gs_items ORDER BY item_name ASC";
$result_order_to = $conn->query($query_order_to); ?>
<select name="selected_item" id="selected_item" onchange="myItemPrice()" data-placeholder="Item Name" >
<option value="">Select Item</option>
<?php
while($rows=mysqli_fetch_assoc($result_order_to))
{ ?> <option data-price='<?php echo $rows['price']; ?>' value='<?php echo $rows['Id']; ?>'> <?php echo $rows['item_name']; ?></option>";
<?php } ?> </select> </td>
<td ><textarea style="min-width: 90%;"></textarea></td>
<td > <input type="text" name="getprice" id="getprice" readonly></td>
<td ><input type="number" id="qty" onKeyUp="multiply()" input-number></td>
<td ><input type="text" id="total" readonly></td>
<td><button onclick="addRow();">Add</button></td>
</tr>
</tbody>
</table>
</div>
<script>
function findAddress(){
var address = $('#select_data').find(':selected').data('address');
$('#getcustomeraddress').val(address);
}
</script>
<script>
function myItemPrice(){
var price = $('#selected_item').find(':selected').data('price');
$('#getprice').val(price);
}
</script>
<?php
$conn = mysqli_connect('localhost','dbuser','dbpass','dbname');
function fill_unit_select_box($conn)
{
$query_item = "SELECT * from gs_items ORDER BY item_name ASC";
$result_item = $conn->query($query_item);
$x = 1;
foreach($result_item as $rows)
{ echo '<option data-prices="'.$rows['price'].'" value="'.$rows['Id'].'">'.$rows['item_name'].'</option>';
}
} ?>
<script>
function addRow()
{ var table = document.getElementById("customFields");
var i = 0;
while (i <= table.rows.length) {
i++;
}
i=i-1;
var html = '';
html += '<tr>';
html += '<td >'+i+'</td>';
html += '<td><select name="selected_items'+i+'" id="selected_items'+i+'" onchange="myItemPrices(' + i +')" data-placeholder="Item Name" ><option value="">Select Item</option>';
html += ' <?php echo fill_unit_select_box($conn); ?>
</select></td>';
html += '<td > <textarea style="min-width: 90%;"></textarea></td>';
html +='<td ><input type="text" disabled name="getprices'+i+'" style="font-size: 12px; color: #333333;" id="getprices'+i+'" ></td>';
html +='<td ><input type="number" ></td>';
html +='<td ><input type="number" ></td>';
html +='<td><button onclick="remove();">Remove</button></td>';
html +='</tr>';
$('#customFields').append(html);
}
function myItemPrices(var1){
i=var1;
var prices = $('#selected_items'+i+'').find(':selected').data('prices');
$('#getprices'+i+'').val(prices); }
</script>
<script>
function multiply() {
a = Number(document.getElementById('qty').value);
b = Number(document.getElementById('getprice').value);
c = a * b;
document.getElementById('total').value = c;
}
</script>
After several tries to find the solution, Finally I got the answer:
<script>
function myItemPrice(){
var price = $('#selected_item').find(':selected').data('price');
$('#getprice').val(price);
var getprice = document.getElementsByName('getprice')[0].value;
var qty = document.getElementsByName('qty')[0].value;
var total;
total = parseFloat(getprice) * parseFloat(qty);
document.getElementsByName('total')[0].value = total;
}
</script>
I'm trying to do the sum of all cart items but it is not doing it.
It is showing only the sum of first or last item added in the cart.
What is the issue i cannot understand. I have tried by moving code in the java but no use.
Suppose i have 2 items.
Item1 total is = 100
Item2 total is = 200
Total should be 300 not only the 1 items total.
Below is my code.
Thanks in advance
<script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>
<table class="table mg-bottom-45 refresh" id="myTable">
<thead>
<tr>
<th class="product-cart-price"><span>PRICE</span></th>
<th class="product-cart-price"><span>TOTAL</span></th>
</tr>
</thead>
<tbody>
<?php
include ('inc/db.php');
$citem = "select * from orders_temp
where user_id = 1 order by id
";
$ciquery = $dba2->query($citem);
while ($cifetch = $ciquery->fetch_assoc()){
$orderID = $cifetch['id'];
$userID = $cifetch['user_id'];
?>
<td class="product-cart-thumbnail">
<input name="quantity" type="text" data-id="<?php echo $orderID; ?>"
data-price="" value="<?php echo $cifetch['qty']; ?>"
class="un quant" />
</td>
<td class="product-cart-thumbnail">
<input name="quantity" type="text" data-id="<?php echo $orderID; ?>"
data-price="<?php echo $cifetch['price']; ?>"
value="<?php echo $cifetch['price']; ?>" class="un pricex" />
</td>
<?php } ?>
<td class="totalAmount"></td>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function() {
updatexx<?php echo $orderID; ?>();
function updatexx<?php echo $orderID; ?>() {
var sumx = '';
$('#myTable > tbody > tr').each(function() {
var quantityx = $(this).find('.quant').val();
var pricex = $(this).find('.pricex').attr('data-price').replace(',', '.');
var amountx = (quantityx * pricex).toFixed(3);
sumx += amountx;
});
$('.totalAmount').text(sumx);
}
});
</script>
First, please make sure that your loop is running multiple times (same number of products in cart).
$('#myTable > tbody > tr').each(function() {})
so that the above loop iterate exact number times as per required.
You should make some changes in code as follows:
var sumx = 0.00;
and in loop code should be
sumx += parsefloat(amountx);
So here is the solution with some changes in my code.
Now it is working perfectly as required. It is doing the sum of all items and everything what i want.
<table class="table mg-bottom-45 refresh" id="myTable">
<tbody>
<?php
$i = 0;
//error_reporting(0);
$ses_mem = 1;
include ('inc/db.php');
$citem = "select id, user_id, qty, org_price from orders_temp
where user_id = '".$ses_mem."' and status = 1
order by id
";
$ciquery = $dba2->query($citem);
while ($cifetch = $ciquery->fetch_assoc()){
$orderID = $cifetch['id'];
?>
<tr>
<script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
updatexx<?php echo $orderID; ?>();
function updatexx<?php echo $orderID; ?>() {
var sumx = 0.000;
var quantity;
$('#myTable > tbody > tr').each(function() {
quantity = $(this).find('.quant').val();
var price = $(this).find('.pricex').attr('data-price').replace(',', '.');
var amountx = (quantity * price);
var munterx = amountx.toFixed(3);
sumx += amountx;
$(this).find('.amountx<?php echo $orderID; ?>').text('' + munterx);
});
var sumxx = sumx.toFixed(3);
$('.total').text(sumxx);
}
});
</script>
<td class="single-qty" style="border: 0;">
<input id="<?php echo $orderID; ?>" name="quantity" type="text"
data-id="<?php echo $orderID; ?>"
data-price="" value="<?php echo $cifetch['qty']; ?>"
class="un quant" />
</td>
<td class="product-cart-price pricex" data-price="<?php echo $cifetch['org_price']; ?>">
</td>
<td class="amountx<?php echo $orderID; ?>">
</td>
</tr>
<?php } ?>
</tbody>
</table>
<table class="table">
<tbody>
<tr>
<td>Sub Total (RS)</td>
<td class="text-right"
style="text-shadow: 2px 2px 3px #999999; font-weight: bold;
color: black; direction: rtl;">
<span class="total">
</span>
</td>
</tr>
</tbody>
</table>
Hello devs/programmers/coders.. When I press Tab to proceed to the next row NaN value is automatically inputted, and even onclick gives me NaN, then the sum of the total column will NaN and will not change.. I have no idea on how will I remove the NaN value... please help me! Here is my code:
<html>
<link rel = "stylesheet" href = "styling.css?version=3"></link>
<body>
<div id='acctdetails' style='padding-left: 15% '>
<?php
echo "USERNAME: ". $_SESSION["dynau"];
?>
OR Date: <input type='text' placeholder='OR Date' name='ordate' value='<?php echo date('M, d, Y');?>'>
OR ID: <input type='text' placeholder='OR ID' name='orid'>
Payor : <input type='text' placeholder='Payor' name='payor' >
</div>
<center>
<form method="POST">
<?php
$result = mysqli_query($link,"SELECT * FROM account_db");
echo"<html>";
echo "<script>";
echo "function calculate(amount, id){
document.getElementById('total' + id).innerHTML = parseInt(document.getElementById('copy' + id).value) * amount;
var x=parseInt(document.getElementById('total' + id).innerHTML);
var y = document.getElementById('sumtotal').innerHTML;
var a = y.split(' ');
var z = parseInt(a[1]) + parseInt(x);
document.getElementById('sumtotal').innerHTML = 'Total: ' + z;
}";
echo "</script>";
echo"<center>";
echo "<form method='POST'>";
echo "<br></br>";
echo "<table style='border:1px solid black' id='thetable' name='pleasework'>";
echo"<th>FILES</th>";
echo"<th>AMOUNT</th>";
echo"<th>NO. OF COPIES</th>";
echo"<th>TOTAL AMOUNT</th>";
$counter = 0;
while($row = mysqli_fetch_row($result))
{
echo"<tr>";
echo "<td >$row[1] </td>";
echo "<td align=center>$row[2] </td>";
echo "<td align=center>
<input type='number' id='copy" . $counter . "' onkeyup='calculate(" . $row[2] . ", " . $counter . ")'>
</td>";
echo "<td align=center id='total" . $counter . "'></td>";
echo"</tr>";
$counter++;
}
echo"<tr>
<td id='sumtotal'>TOTAL: 0</td>
</tr>";
echo "</table>";
echo " <br><div style='padding-left: 15px'><input type='submit' id='btn1' value='Transact' name='transaction' onclick='javascript: window.print()'></div>";
echo"</center>";
echo"</html>";
?>
</center>
</body>
</html>
Your first issue is in this line:
document.getElementById('total' + id).innerHTML = parseInt(document.getElementById('copy' + id).value) * amount;
In order to understand the issue you can try by yourself:
parseInt('')
The result of the previous operation is undefined, so:
parseInt('')+amount
will be NaN (not a number).
That means you need to test the value before to proceed with the computation:
!!ele.value.trim() --> value is not empty
I suggest you to use:
.value (for input field): The initial value of the control. This attribute is optional except when the value of the type attribute is radio or checkbox.
Note that when reloading the page, Gecko and IE will ignore the value specified in the HTML source, if the value was changed before the reload.
.textContent(for cell with text values): represents the text content of a node and its descendants
instead of:
.innerHTML : sets or gets the HTML syntax describing the element's descendants.
Moreover, in order to simplify your code you may consider to traverse the dom in order to get the values contained in the other two sibling cells.
Use the keyword this in your case. This keyword stands for the current element, so you don't need to get it from the dom.
The snippet:
function calculate(ele) {
if (!!ele.value.trim()) {
var x = +ele.value * +ele.parentElement.previousElementSibling.textContent.trim();
var y = +document.getElementById('sumtotal').textContent.trim().split(' ').pop();
ele.parentElement.nextElementSibling = x;
var z = x + y;
document.getElementById('sumtotal').textContent = 'Total: ' + z;
}
}
<div id='acctdetails' style='padding-left: 15% '>
USERNAME: ...
OR Date: <input type='text' placeholder='OR Date' name='ordate' value='01/01/2017'>
OR ID: <input type='text' placeholder='OR ID' name='orid'>
Payor : <input type='text' placeholder='Payor' name='payor'>
</div>
<form method="POST"><br/>
<table style='border:1px solid black' id='thetable' name='pleasework'>
<th>FILES</th>
<th>AMOUNT</th>
<th>NO. OF COPIES</th>
<th>TOTAL AMOUNT</th>
<tr>
<td>1</td>
<td align=center>11</td>
<td align=center>
<input type='number' id='copy1' onkeyup="calculate(this)">
</td>
<td align=center id='total1'></td>
</tr>
<tr>
<td id='sumtotal'>TOTAL: 0</td>
</tr>
</table>
<br>
<div style='padding-left: 15px'><input type='submit' id='btn1' value='Transact' name='transaction'
onclick='javascript: window.print()'></div>
</form>
I have assigned three select options with the same name which will be stored in the my database table. My code was working well at first right now i don't why it's working well. right now it only saves the value assigned to the last select option panel. Please i need help
<?php
if(isset($_POST['submit'])){
$vic_title = $_POST['vic_title'];
$vic_name = $_POST['vic_name'];
echo $vic_name;
if($vic_name=='')
echo "<font color='Green'><b>Please fill in the discription the accused name THANKS!!</b></font>";
else
$insert = "INSERT INTO discips(vic_title, vic_name)
values('$vic_title','$vic_name')";
$run = mysql_query($insert);
if ($run) {
echo "<font color='Green'><b>the incident was added</b></font>";
# code...
}
else{
echo "<font color='red'><b>the incident was not added</b></font>";
}
}
?>
Here is my form that i used.
<form name="harvets" id="form" action="?pg=<?php echo $_GET[pg]."&lodge_inc"."&hv=$token"; ?>" method="post" enctype="multipart/form-data">
<input type="hidden" name="id" value="<?php echo $edit_ca;?>">
<center style="padding-top: 2%; margin-top: 3%;"><h3>Enter Incident Informtion</h3></center>
<table width="100%" class="m_aligned">
<tr>
<td align="right" style="width: 100%;">Victim *</td>
<td align="left" style="width: 100%;">
<select style="width: 100%;" id="victim" name="vic_title" class="sect" placeholder="Select a Role">
<option></option>
<option value="staff">Staff</option>
<option value="student">Student</option>
<option value="visitor">Vistor</option>
</select>
</td>
</tr>
<tr id="staff_name" style="display: none;">
<td align="right" style="width: 100%;">Staff Name : </td>
<td align="left" style="width: 100%;">
<select style="width: 100%;" name="vic_name" class="sect" placeholder="Staff's Name">
<?php
$get_staf = "select * from useraccounts";
$run_staf = mysql_query($get_staf);
while ($row = mysql_fetch_array($run_staf)) {
$staf_id = $row['username'];
$staf_name = $row['name'];
echo "<option value='$staf_id'>". $staf_name ."</option>";
# code...
}
?>
</select>
</td>
</tr>
<tr id="vis_name" style="display: none;">
<td align="right" style="width: 100%;">Visitor Name : </td>
<td align="left" style="width: 100%;"><input type="text" name="vic_name" placeholder="Visitor's Name"></td>
</tr>
<tr id="stud_name" style="display: none;">
<td align="right" style="width: 100%;">Student Name: </td>
<td align="left" style="width: 100%;">
<select style="width: 100%;" class="sect" name="vic_name" placeholder="Student's Name" cols="9">
<option></option>
<?php
$get_stud= "SELECT * FROM studentdetails";
$run_stud = mysql_query($get_stud);
while ($row = mysql_fetch_array($run_stud)) {
$stud_id = $row['id'];
$stud_fname = $row['fname'];
$stud_lname = $row['lname'];
echo "<option value='$stud_id'>". $stud_fname ." ". $stud_lname ."</option>";
# code...
} ?>
</select>
</td>
</tr>
SAVE
Here is My JavaScript
<script type="text/javascript">
$("#victim").change(function (ev){
if($(this).val()=='visitor') $("#vis_name").css("display", "table-row")
else $("#vis_name").css("display", "none")
if($(this).val()=='student') $("#stud_name").css("display", "table-row")
else $("#stud_name").css("display", "none")
if($(this).val()=='staff') $("#staff_name").css("display", "table-row")
else $("#staff_name").css("display", "none")
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".sect").select2({
allowClear: true
});
</script>
Getting the value of the last field (select or anything) using a given name is the correct behaviour. If you wish to send multiple values when submiting the form, you must give different names to their fields.
Ask yourself why you want to name them the same way. How are you supposed to get them ? If I create three different inputs, name the three of them 'title' and submit the form after type different things in each input, what do you guess I'll get if I access $_POST['title'] ? More problematic, what should I type to get the value of the first of my three inputs ? How the hell would I know, these are identical elements with different purposes !
If you design different elements, give them different features or they won't be different. They will just overwrite each other and you'll only have the last of the lot.
If you truly need to have them named the same, add hooks at the end of the name like this :
name="vic_name[].
It will append the value of that field to $_POST['vic_name'], which will now be an array, and therefore may contain multiple values. That's the only way.
I have solved the problem. I created two files by using AJAX to call another file to replace one a certain line of code. Sometimes we may want something and we fail in someway or another, but when we focus deeply we can solve the code.
i replaced my Javasrcipt file with
<script type="text/javascript">
$("#victim").change(function () {
var cat = $(this).val();
$.ajax({
type: "GET"
, url: "student/fetch_victim.php"
, data: "n=" + Math.random() + "&vr=" + cat
, beforeSend: function () {
$("#ctg").html("<img src='imgs/loader.gif' />...loading")
}
, success: function (response) {
$("#tryme").html(response)
}
});
});
</script>
and i moved the sections i wanted to another file
<?php
require "../ht.php"; $hom = new ht;
if($_GET['vr']){
$q = $_GET['vr'];
if($q =='staff'){
echo "
<td align='right' style='width: 100%;'>Staff Name : </td>
<td align='left' style='width: 100%;'>
<select name='vic_name' class='sect' style='width: 100%;' value='<?php echo $edit[2] ?>' placeholder='Staff's Name'>";
$staf = mysql_query("SELECT * FROM useraccounts"); $w=mysql_error();
while ($row = mysql_fetch_array($staf)) {
echo "<option value='$row[0]'>". $row[1] ."</option>";
# code...
}
echo "</select>
</td>
";
}elseif ($q == 'student') {
echo "
<td align='right' style='width: 100%;'>Student Name: </td>
<td align='left' style='width: 100%;'>
<select style='width: 100%;' class='sect' name='vic_name' value='".$edit[2] ."' placeholder='Student's Name' cols='9'>
<option></option>";
$stud= mysql_query("SELECT * FROM studentdetails");
while ($row = mysql_fetch_array($stud)) {
echo "<option value='$row[31]'>". $row[0] .' '. $row[1] ."</option>";
# code...
}
echo "</select>
</td>
";
}else{
echo "
<td align='right' style='width: 100%;'>Visitor Name : </td>
<td align='left' style='width: 100%;'><input style='width: 100%;' type='text' name='vic_name' value='".$edit[2] ."'placeholder='Visitor's Name'></td>
";
}
}
?>
<script type="text/javascript">(function($){
var code = $('.html-container').html();
$('.html-viewer').text(code);
})(jQuery);</script>
I have a multiple column table with one column being checkboxes. If you check a checkbox then press the "Checkout" button, it will take the specified rows and display them in the body of an email.
I originally bring in the top 100 rows to keep the info to a minimum for the user. I also have a search functionality where the user can search for specific rows. The user can maneuver throughout different searches and still keep all of the checkboxes checked with session storage. However, when a user hits "Checkout" the body of the email only displays the table rows that are checked and currently visible on the page.
So, if a user searches for a table row and checks it, but then navigates back to the original top 100 rows by clicking home, that row would not display on the email because it is not displayed in the top 100.
How can I fix this and show ALL rows that have been checked, whether they are visible on the page or not?
JavaScript that sends information to email body:
function sendMail() {
var dataItems = [
{ 'clss':'.loc', 'prop':'loc' },
{ 'clss':'.rp-code', 'prop':'rpCode' },
{ 'clss':'.sku', 'prop':'sku' },
{ 'clss':'.special-id', 'prop':'specialId' },
{ 'clss':'.description', 'prop':'description' },
{ 'clss':'.quantity', 'prop':'quantity' },
{ 'clss':'.unit', 'prop':'unit' }
];
var link = "mailto:me#example.com" + "?subject=" + encodeURIComponent("Order") + "&body=";
link += $('#merchTable tr input[name="check"]:checked').closest('tr').get().map(function(tr) {
var str = dataItems.map(function(item) {
return encodeURIComponent($(tr).find(item.clss).data(item.prop)) + '\xa0\xa0';
}).join('');
str += encodeURIComponent($(tr).find('.spinner').spinner('value')) + '%0D%0A';
return str;
}).join('') + '%0D%0A';
console.log(link);
window.location.href = link;
}
JavaScript that includes code to keep all checkboxes checked throughout session:
$(function(){
var showQuantityHeader = false;
$(':checkbox').each(function() {
// Iterate over the checkboxes and set their "check" values based on the session data
var $el = $(this);
//console.log('element id: ',$el.prop('id'),' sessionStorage[id]: ',sessionStorage[$el.prop('id')]);
$el.prop('checked', sessionStorage[$el.prop('id')] === 'true');
if ($el.prop('checked')) {
//show the quantity cell in the column under header with class num
$el.closest('tr').find('td.quantity_num').toggle(this.checked);
showQuantityHeader = true;
setupSpinner(this);
var quantity = sessionStorage['value_'+$el.prop('id')];
if (quantity) {
$el.closest("tr").find(".spinner" ).spinner( "value", quantity );
}
}
});
if (showQuantityHeader) {
$('#merchTable').find('th.num').show();
//console.log('header with class num: ',$('#merchTable').find('th.num'));
}
$('input:checkbox').on('change', function() {
// save the individual checkbox in the session inside the `change` event,
// using the checkbox "id" attribute
var $el = $(this);
sessionStorage[$el.prop('id')] = $el.is(':checked');
});
});
HTML 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 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 class="sku ui-widget-content" data-sku="<?php echo $row['SKU'] ?>" id="sku-<?php echo intval ($row['SKU'])?>"><?php echo $row['SKU'];?></td>
<td 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 class="description ui-widget-content" data-description="<?php echo htmlspecialchars($row['Description']) ?>" id="description-<?php echo intval ($row['Description'])?>"><?php echo $row['Description'];?></td>
<td 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 class="unit ui-widget-content" data-unit="<?php echo $row['Unit'] ?>" id="unit-<?php echo intval ($row['Unit'])?>"><?php echo $row['Unit'];?></td>
<td style="display: none;" class="quantity_num ui-widget-content"><input disabled="true" type="textbox" style="width: 100px;" class="spinner" id="spin-<?php echo intval ($row['ID'])?>"></td>
</tr>
<?php } ?>
</tbody>
</table>