Develop Reference

Keep the checkbox result same even page is refreshed

The out put of this code is shown by an image.How can I keep the same results even after page refresh. In other word, when once a button click how can I remain the same result even page is refreshed?
<style>
#cb3.highlight .label {background-color:yellow;}
#cb2.highlight .label {background-color:green;}
#cb1.highlight .label {background-color:red;}
</style>
<script>
var checked = [];
$(document).ready(function() {
if (localStorage.getItem("checked") == null)
localStorage.setItem("checked", checked);
$("#Table input").click(function() {
if ($(this).is(":checked")) {
$(this).parent().parent().addClass("highlight");
checked.push($(this).attr("id"));
} else {
$(this).parent().parent().removeClass("highlight");
checked.remove($(this).attr("id"));
}
localStorage.setItem("checked", JSON.stringify(checked));
});
var saved = JSON.parse(localStorage.getItem("checked"));
for (var i = 0;i < saved.length; i++) {
var itemAtIndex = $("#" + saved[i] + "");
itemAtIndex.click();
itemAtIndex.parent().parent().addClass("highlight");
}
});
</script>
<div class="col-lg-10">
<table id="Table" border="1">
<tr id="cb1">
<td><input type="checkbox" name="cb1" value="y" /></td>
<td class=label>Click me</td>
</tr><tr id="cb2">
<td><input type="checkbox" name="cb2" value="y" /></td>
<td class=label>Click me</td>
</tr>
<tr id="cb3">
<td><input type="checkbox" name="cb3" value="y" /></td>
<td class=label>Click me</td>
</tr>
</table>
</div>
output

How to ensure data is not lost on page refresh using PHP Cookies

I have a dynamic form that I am trying to create which I will save to MySQL database. What I want to do is to have so many dynamic rows on the page but to save the information typed in the fields to be stored in a PHP SESSION that will keep the data if the page is refreshed etc.
I cannot figure out how to get the data to be stored in PHP SESSIONS, any help would be much appreciated.
//adds extra table rows
var i=$('tr').length;
$(".addmore").on('click',function(){
html = '<tr>';
html += '<td><input class="case" type="checkbox" /></td>';
html += '<td><input type="text" name="product[]" id="product_'+i+'" class="fld field_large" value="" /></td>';
html += '<td class="ta_r"><input type="text" name="qty[]" id="qty_'+i+'" class="fld field_small trigger qty" value="" /></td>';
html += '<td class="ta_r"><input type="text" name="price[]" id="price_'+i+'" class="fld field_small trigger price" value="0.00" /></td>';
html += '<td class="ta_r"><input type="text" name="line_total[]"id="line_total_'+i+'" value="0.00" class="fld field_small trigger linetotal" disabled="disabled" /></td>';
html += '</tr>';
$('table').append(html);
i++;
});
//to check all checkboxes
$(document).on('change','#check_all',function(){
$('input[class=case]:checkbox').prop("checked", $(this).is(':checked'));
});
//deletes the selected table rows
$(".delete").on('click', function() {
$('.case:checkbox:checked').parents("tr").remove();
$('#check_all').prop("checked", false);
update();
});
var calcObject = {
defaultValue : '0.00',
subTotal : 0,
vatRate : 20,
run : function(obj) {
obj.live('change keyup blur', function(e) {
calcObject.subTotal = 0;
var thisQty = jQuery.find('.qty');
jQuery.each(thisQty, function() {
var thisQty = $(this).val();
var thisPrice = $(this).closest('tr').find('.price').val();
if (calcObject.isNumber(thisQty) && calcObject.isNumber(thisPrice)) {
var thisSubTotal = (parseFloat(thisQty) * parseFloat(thisPrice)).toFixed(2);
$(this).closest('tr').find('.linetotal').val(thisSubTotal);
calcObject.subTotal += parseFloat(thisSubTotal);
} else {
$(this).closest('tr').find('.linetotal').val(calcObject.defaultValue);
}
});
calcObject.update();
});
},
isNumber : function(numb) {
return !isNaN(parseFloat(numb)) && isFinite(numb);
},
update : function() {
if (calcObject.isNumber(calcObject.subTotal) && calcObject.isNumber(calcObject.vatRate)) {
var thisVat = ( (parseFloat(calcObject.subTotal) / 100) * parseFloat(calcObject.vatRate)).toFixed(2);
var thisTotal = parseFloat(parseFloat(calcObject.subTotal) + parseFloat(thisVat)).toFixed(2);
$('#subtotal').val(parseFloat(calcObject.subTotal).toFixed(2));
$('#vat').val(thisVat);
$('#total').val(thisTotal);
}
}
};
function add() {
document.getElementById('wrapper').innerHTML += '<input type="text"><br><br>';
sessionStorage.inputBoxes = document.getElementById('wrapper').innerHTML;
}
window.load = function() {
if (sessionStorage.inputBoxes) {
document.getElementById('wrapper').innerHTML = sessionStorage.inputBoxes;
}
};
$(function() {
calcObject.run($('.trigger'));
});
* {
margin: 0;
padding: 0;
border: none;
list-style: none;
font-weight: 100;
color: #333;
}
body {
font-family: Arial, Verdana, Sans-serif;
font-size: 12px;
text-align: center;
padding: 20px 0;
}
#wrapper {
text-align: left;
width: 800px;
margin: 0 auto;
}
.fld {
padding: 3px;
border: solid 1px #aaa;
}
th,td {
text-align:left;
vertical-align:top;
border-bottom:dashed 1px #aaa;
padding:7px 10px;
}
.btn {
padding: 6px 18px;
color: #fff;
background: #222;
cursor: pointer;
}
.dev {
height:14px
}
.col_1 {
width: 1%;
white-space: nowrap;
}
.col_15{width:65%}
.col_5{width:5%}
.ta_r,th.ta_r,.td.ta_r{text-align:right}
.button-success {
padding: 8px 18px;
color: #fff;
background: #0C3;
cursor: pointer;
}
.button-danger {
padding-left:20px;
padding: 8px 28px;
color: #fff;
background: #F00;
cursor: pointer;
}
.form-inline .form-group{
margin-bottom: 20px;
float: right;
}
/** Customs CSS **/
.field_large {
width:450px;
}
.field_small {
width:50px;
}
.total {
width:40%;
float:right;
margin-top:50px;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/core.css" media="all" type="text/css">
</head>
<body>
<div id="wrapper">
<h1>Invoice Form</h1>
<div class="dev"> </div>
<form method="post">
<table>
<tr>
<th width="2%"><input id="check_all" class="formcontrol" type="checkbox"/></th>
<th>Product name</th>
<th class="ten left">Qty</th>
<th class="ten left">Price</th>
<th class="ten left">Sub-Total</th>
</tr>
<tr>
<!-- remove input tage below to remove first checkbox -->
<th width="2%"> <input class="case" type="checkbox"/> </th>
<input type="text" data-type="productCode" name="itemNo[]" id="itemNo_1" class="form-control autocomplete_txt" autocomplete="off">
<td><input type="text" name="product[]" class="fld field_large" value="" /></td>
<td class="ta_r"><input type="text" name="qty[]" class="fld field_small trigger qty" value="" /></td>
<td class="ta_r"><input type="text" name="price[]" class="fld field_small trigger price" value="0.00" /></td>
<td class="ta_r"><input type="text" name="line_total[]" value="0.00" class="fld field_small linetotal" disabled="disabled" /></td>
</tr>
</table>
<div class="dev"> </div>
<button class="button-success addmore" type="button">+ Add More</button>
<button class="button-danger delete" type="button">- Delete</button>
<div class="dev"> </div>
<table cellpadding="0" cellspacing="0" border="0" class="total">
<tr>
<th><label for="subtotal">Sub-Total: </label></th>
<td>
<input type="text" name="subtotal" id="subtotal" value="0.00" class="fld" disabled="disabled" />
</td>
</tr>
<tr>
<th><label for="vat">Vat: </label></th>
<td>
<input type="text" name="vat" id="vat" value="0.00" class="fld" disabled="disabled" />
</td>
</tr>
<tr>
<th><label for="total">Total: </label></th>
<td>
<input type="text" name="total" id="total" value="0.00" class="fld" disabled="disabled" />
</td>
</tr>
<tr>
<th> </th>
<td><label for="btn" class="sbm"><input type="submit" id="btn" class="btn" value="Add" /></label></td>
</tr>
</table>
</form>
</div>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/core.js"></script>
</body>
</html>
Thanks

Why is the first table column skipped?

As this screenshot shows, the Title header is misaligned with the table data.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Writer's Tryst - Manage Uploads</title>
<style>
table {
border-spacing:0;
border-collapse:collapse;
}
td, th {
padding: 5px;
}
.nbr-pages {
width: 48px;
text-align: right;
padding-right: 2px;
}
.delete {
cursor: pointer;
}
</style>
</head>
<body>
<h1>Manage Uploads</h1>
<form id="form-manage-uploads">
<table id="table-writer-uploads">
<tbody>
<tr>
<th>Delete</th><th>TItle</th><th>Type</th><th>Genre</th><th>Length</th><th>PDF</th><th>Save</th>
</tr>
<tr class="tr-clone" >
<td><img class="delete" src="img/icons/delete.png" alt="delete" /> </td>
<td><input class="id" name="id" type="hidden" /></td>
<td><input class="title" name="title" placeholder="Title" autofocus="true" /></td>
<td>
<select class="form-type" name="form-type">
</select>
</td>
<td>
<select class="genre" name="genre">
</select>
</td>
<td><input class="nbr-pages" name="nbr-pages" required placeholder="Pages" /></td>
<td>Synopsis</td>
<td><input type="button" class="save btn btn-custom-primary" value="Save" /></td>
<td><input type="hidden" class="id" name="id" /></td>
</tr>
</tbody>
</table>
<input class="current-id" type="hidden" />
</form>
<script src="js/common.js"></script>
<script src="js/manage-uploads.js"></script>
</body>
</html>
The table is built using JavaScript:
function getWritersData() {
var data = {};
data.action = 'get-writer-data';
data["account-id"] = localStorage.getItem("account-id");
ajax('post', 'php/manage-uploads.php', data, getSuccess, "Error retrieving writer's data: ");
function getSuccess(data) {
var trClone = $(".tr-clone");
var jsonData = $.parseJSON(data);
var count = 0;
for (var key in jsonData) count++;
if (key != undefined) {
count--;
$.each(jsonData, function (index, value) {
trClone = trClone.clone().insertAfter($(".tr-clone:last"));
trClone.find(".id").val(value.ID);
trClone.find(".title").val(value.Title);
trClone.find(".form-type").val(value.FormType);
trClone.find(".genre").val(value.Genre);
trClone.find(".nbr-pages").val(value.NumberOfPages);
var filepath = "uploads/" + value.Filename;
var synopsis = trClone.find(".synopsis");
var sv = synopsis.val(filepath);
synopsis.attr("href", filepath);
});
} else {
$("h1").append("<br/><br/><div class='but-custom-warning'>No records were found.</div>"); //.css("disp
$("table").css("display", "none");
}
$(".tr-clone:first").css("display", "none");
}
}

You have an extra table column for the hidden input:
There's no need for this to be in its own table cell, so combine it with one of the other cells.
<td><input class="id" name="id" type="hidden" /><input class="title" name="title" placeholder="Title" autofocus="true" /></td>

You got an extra column with nothing visible in it:
<td><input class="id" name="id" type="hidden" /></td>
I'd recommend you put the hidden field in another column or use this:
<th colspan="2">Delete</th>

how can I get the value from a checkbox form in html?

I'm going to write a page the allow user click the checkbox of the item and then calculate the total amount of it
But I found that I can't get the element from checked check box. How do i return the value of that checkbox
Here is my code :
function calculate(){
if(document.forms["listForm"].getElementsByTagName("item1").checked==true)
prize1 = document.forms["listForm"].getElementsByTagName("item1Q").value * document.forms["listForm"].getElementsByTagName("item1").value
total = prize1
alert("The total is "+total)
}
<form action="" id="listForm" >
<table border="1" >
<tr>
<td style="text-align: center; width: 500px"><b>Books</b></td>
<td style="text-align: center; width: 50px"><b>Quantity</b></td>
</tr>
<tr>
<td><input type="checkbox" name="item1" value="19.95" />
XHTML Basic, $19.95</td>
<td><input type="text" name="item1Q" value="0" size="2" maxlength="2" /></td>

Your form's name attribute is missing.
define like this one
<form action="" id="listForm" name="listForm" >
define JS:
function calculate() {
if (document.forms["listForm"]["item1"].checked == true)
prize1 = document.forms["listForm"]["item1Q"].value * document.forms["listForm"]["item1"].value
total = prize1
alert("The total is " + total)
}

function calculate(){
if(document.forms["listForm"]["item1"].checked=true)
var prize1 = Number(document.forms["listForm"]["item1Q"].value) * Number(document.forms["listForm"] ["item1"].value)
var total = prize1;
alert("The total is "+total);
}
<form action="" id="listForm" >
<table border="1" >
<tr>
<td style="text-align: center; width: 500px"><b>Books</b></td>
<td style="text-align: center; width: 50px"><b>Quantity</b></td>
</tr>
<tr>
<td><input type="checkbox" name="item1" value="19.95" onchange="calculate()"/>
XHTML Basic, $19.95</td>
<td><input type="text" name="item1Q" value="2" size="2" maxlength="2" /> </td>

Using jQuery instead of Javascript would make code more readable and manageable. If this is feasible for you please try below code:
https://jsfiddle.net/6q3o6ghn/
<script>
$(document).ready(function(){
$('input[name=item1]').on('change',function(){
if($(this).is(':checked') == true) {
calculate($(this).val());
}
});
});
function calculate(_value) {
prize1 = $('input[name=item1Q]').val() * _value;
total = prize1
alert("The total is " + total)
}
</script>
<form action="" name="listForm" id="listForm" >
<table border="1" >
<tr>
<td style="text-align: center; width: 500px"><b>Books</b></td>
<td style="text-align: center; width: 50px"><b>Quantity</b></td>
</tr>
<tr>
<td><input type="checkbox" name="item1" value="19.95"/>
XHTML Basic, $19.95</td>
<td><input type="text" name="item1Q" value="0" size="2" maxlength="2" /></td></tr>

How to apply css style for dynamic tr with td and input tag?

I render the dynamically append the tr ,td and input tag with class name and I also write the css style for separate but it is not applied the dynamic tr.
Please find my code snippet.
<table style="width:100%" class="tSheet">
<tr class="t-header">
<th class="t-head">sno</th>
<th class="t-head">Description</th>
<th class="t-head">Debit</th>
<th class="t-head">Credit</th>
</tr>
<tr>
<td class="t-content"><input type="text" class="t-input" /></td>
<td class="t-content"><input type="text" class="t-input" /></td>
<td class="t-content"><input type="text" class="t-input" /></td>
<td class="t-content"><input type="text" class="t-input" /></td>
</tr>
</table>
css style:
.tSheet .t-head,.t-content {
border: 1px solid black;
}
.t-input{
border:0px none;
}
.t-input:focus{
outline:0;
}
my javaScript function:
$(function () {
$('input').css("width", $('input').parent().width());
for(var i=0;i<3;i++)
{
$("<tr><td class='t-content'><input class='t-content t-input/>'</td><td class='t-content'><input class='t-input/>'</td><td class='t-content'><input class='t-input/>'</td><td class='t-content'><input class='t-input/>'</td></tr>").attr({ class: "a" }).appendTo('.tSheet')
}
})

It's because the class attribute closing is misplaced
Instead of using attr() use addClass() for adding class
For applying width use css() with callback, also do it after adding dynamic element or you can set css width:100% to input element
In your code class name attribute is not properly closed, change <input class='t-content t-input/>' to <input class='t-content t-input'/> and <input class='t-input/>' to <input class='t-input'/>
for (var i = 0; i < 3; i++) {
$("<tr><td class='t-content'><input class='t-content t-input'/></td><td class='t-content'><input class='t-input'/></td><td class='t-content'><input class='t-input'/></td><td class='t-content'><input class='t-input'/></td></tr>").addClass("a").appendTo('.tSheet')
}
$('input').css("width", function() {
return $(this).parent().width()
});
.tSheet .t-head,
.t-content {
border: 1px solid black;
}
.t-input {
border: 0px none;
}
.t-input:focus {
outline: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table style="width:100%" class="tSheet">
<tr class="t-header">
<th class="t-head">sno</th>
<th class="t-head">Description</th>
<th class="t-head">Debit</th>
<th class="t-head">Credit</th>
</tr>
<tr>
<td class="t-content">
<input type="text" class="t-input" />
</td>
<td class="t-content">
<input type="text" class="t-input" />
</td>
<td class="t-content">
<input type="text" class="t-input" />
</td>
<td class="t-content">
<input type="text" class="t-input" />
</td>
</tr>
</table>