How to add css file to the pdf document?

How to add css file to the pdf document? - javascript

I am trying to add a border to the header of the PDF document using css. But the border which I'm using in css is not taking to the pdf. Even for image also I'm using css only, it is taking, but for border it is not taking. Can you please help me to fix this border?
This is what I want http://imgset.net/WPHuNd
This is what I'm getting http://imgset.net/VWUM5z
This is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Expires" content="0" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/ITPortal.css"/>
<link rel="stylesheet" type="text/css" href="css/oneHarmanMain.css"/>
<link rel="stylesheet" type="text/css" href="css/corev4.css"/>
<link rel="stylesheet" type="text/css" href="css/ITServiceCatalog.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jspdf.min.js"></script>
<script type="text/javascript" src="js/jspdf.js"></script>
<script type="text/javascript" src="js/ITPortal.js"></script>
<script type="text/javascript" src="js/compatibility.js"></script>
<script type="text/javascript" src="js/html5shiv.min.js"></script>
<script type="text/javascript" src="js/IE9.js"></script>
<script type="text/javascript" src="js/printContent.js"></script>
<script type="text/javascript" src="js/downloadify.min.js"></script>
<script type="text/javascript" src="js/canvas.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/typearray.js"></script>
<link rel="stylesheet" href="css/print.css" type="text/css" />
<style>
#new-logo {
visibility: hidden;
width: 124px;
height: 66px;
}
#media print {
#new-logo {
visibility: visible;
width: 124px;
height: 66px;
}
input[type=text] {
border: 1px solid #ccc !important;
text-align: center !important;
}
.title, .thead.item {
margin-right: 1000px !important;
position:fixed !important;
}
#Phead { border: 2px solid #000 !important; }
}
</style>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<script type="text/javascript">
function PrintElem(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'mainContentWide', 'height=700,width=1300');
mywindow.document.write('<html><head><title></title>');
mywindow.document.write('<link rel="stylesheet" href="css/print.css" type="text/css" media="print"/>');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
return true;
}
function update() {
var table = document.getElementById("mytab1");
for (var i = 0, row; row = table.rows[i]; i++) {
if(i==0 || i == table.rows.length-1 || row.cells.length < 2 || row.className == "item category"){}else{
var quantity=row.cells[1].childNodes[0].value;
row.cells[1].innerHTML = quantity;
var priceOne = row.cells[4].childNodes[0].value;
row.cells[4].innerHTML = priceOne;
var priceTwo = row.cells[5].childNodes[0].value;
row.cells[5].innerHTML = priceTwo;
var priceThree = row.cells[6].childNodes[0].value;
row.cells[6].innerHTML = priceThree;
}
}
var total = document.getElementById('total').value;
document.getElementById('grandTotal').innerHTML = total;
}
</script>
<body>
<div id="mainContentWide">
<h2>WorkPlace Services</h2>
<h3 class="curveBoxWide">Description</h3>
<div id="new-logo"> <img src="image/back-logo.png" alt="Harman Logo"/></div>
<table id="mytab1">
<thead>
<tr class="thead item" id="Phead">
<th><span class="colm1">Desktop Software</span></th>
<th><span class="colm1">Quantity</span></th>
<th><span class="colm1">One time Price ($)</span</th>
<th><span class="colm1">Annual Price ($)</span</th>
<th><span class="colm1">One time Extended Cost ($)</span</th>
<th><span class="colm1">Annual Extended Cost ($)</span</th>
<th><span class="colm1">Sub-Total</span</th>
</tr>
</thead>
<tbody>
<tr class="item odd" class="test">
<td class="title"><p>Symantec SEP</p></td>
<td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td>
<td class="price">136</td>
<td>6</td>
<td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td>
<td><input class="annualExtendedCost" type="text" value="0" readonly/></td>
<td><input class="subtotal1" type="text" value="0" readonly/></td>
</tr>
<tr class="item">
<td class="title"><p>Citrix</p></td>
<td><input class="quantity" onfocus="if(this.value == '0') { this.value = ''; }" onblur="checkForm()" title="Number from 000 to 999 only allowed" onkeypress="return isNumberKey(event)" maxlength="3" value="0" type="text"/></td>
<td class="price">368</td>
<td>85</td>
<td><input class="oneTimeExtendedCostTotal" type="text" value="0" readonly/></td>
<td><input class="annualExtendedCost" type="text" value="0" readonly/></td>
<td><input class="subtotal1" type="text" value="0" readonly/></td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="title"><p>Total:</p></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td id="grandTotal"><input id="total" type="text" value="0" readonly/></td>
</tr>
</tfoot>
</table>
<!-- end #mainContent --></div>
<button onclick="javascript:demoFromHTML()" type="button" id="buttonPDF">Save as PDF</button>
<input type="button" value="Print" onclick="javascript:PrintElem('#mainContentWide')" style="margin: 0 20px; padding: 1px 30px" />
<p style="text-align: center; padding-top: 15px"> ('Save as PDF' is working on IE9 and above, chrome and Firefox browsers )</p>
</body>
</html>
This is my js file:
function PrintElem(elem) {
Popup($(elem).html());
}
function Popup(data){
var mywindow = window.open('', 'mainContentWide', 'height=700,width=1300');
mywindow.document.write('<html><head><title></title>');
mywindow.document.write('<link rel="stylesheet" href="css/print.css" type="text/css" media="print"/>');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
return true;
}
function demoFromHTML() {
var table = document.getElementById("mytab1");
for (var i = 0, row; row = table.rows[i]; i++) {
if(i==0 || i == table.rows.length-1 || row.cells.length < 2 || row.className == "item category"){}else{
var quantity=row.cells[1].childNodes[0].value;
row.cells[1].innerHTML = quantity;
var priceOne = row.cells[4].childNodes[0].value;
row.cells[4].innerHTML = priceOne;
var priceTwo = row.cells[5].childNodes[0].value;
row.cells[5].innerHTML = priceTwo;
var priceThree = row.cells[6].childNodes[0].value;
row.cells[6].innerHTML = priceThree;
}
}
var total = document.getElementById('total').value;
document.getElementById('grandTotal').innerHTML = total;
var pdf = new jsPDF('1', 'mm', [380, 350])
// source can be HTML-formatted string, or a reference
// to an actual DOM element from which the text will be scraped.
, source = $('#mainContentWide')[0]
// we support special element handlers. Register them with jQuery-style
// ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
// There is no support for any other type of selectors
// (class, of compound) at this time.
, specialElementHandlers = {
// element with id of "bypass" - jQuery style selector
'#bypassme': function(element, renderer){
// true = "handled elsewhere, bypass text extraction"
return true
}
}
margins = {
top: 10,
bottom: 10,
left: 10,
width:1000,
};
// all coords and widths are in jsPDF instance's declared units
// 'inches' in this case
pdf.fromHTML(
source // HTML string or DOM elem ref.
, margins.left // x coord
, margins.top // y coord
, {
'width': margins.width // max width of content on PDF
, 'elementHandlers': specialElementHandlers
},
function (dispose){alert('dispose');
pdf.save('Software.pdf');
},
margins
)
document.getElementById("buttonPDF").disabled = 'true';
}
CSS File:
#media print {
.title, .thead.item {
margin-right: 1000px !important;
position:fixed !important;
}
#Phead { border: 2px solid #000 !important; }
#new-logo {
background-image: url("image/back-logo.png");
width: 124px;
height: 66px;
}
}

Try setting border-collapse: collapse; on the parent <table>. Per CSS 2.1 spec, rows cannot have borders unless this property is set. In most cases, the property default is border-collapse: separate; so it should just be a matter of overriding this.

Related

How to add a click event row that can go to next page by id?

Here, the coding that I got from the Stack Overflow page. The window.location should go to next page by id, but I do not know how to code it.
function addRowHandlers() {
var table = document.getElementById("employee-click");
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
var currentRow = table.rows[i];
var createClickHandler =
function(row) {
return function() {
var cell = row.getElementsByTagName("td")[0];
var id = cell.innerHTML;
window.location.href = "detail.php";
};
};
currentRow.onclick = createClickHandler(currentRow);
}
}
}
This is my html code. Would you help me with this code?
<!DOCTYPE html>
<html>
<title>Data Biodata</title>
<head>
<meta name="author" content="Arkaprava majumder" />
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
var dataTable = $('#employee-grid').DataTable({
processing: true,
serverSide: true,
ajax: "dataBiodata.php", // json datasource
});
$("#employee-grid_filter").css("display", "none"); // hiding global search box
$('.employee-search-input').on('keyup click change', function() {
var i = $(this).attr('id'); // getting column index
var v = $(this).val(); // getting search input value
dataTable.columns(i).search(v).draw();
});
});
function addRowHandlers() {
var table = document.getElementById("employee-click");
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
var currentRow = table.rows[i];
var createClickHandler =
function(row) {
return function() {
var cell = row.getElementsByTagName("td")[0];
var id = cell.innerHTML;
window.location.href = "detail.php";
};
};
currentRow.onclick = createClickHandler(currentRow);
}
}
</script>
<style>
div.container {
max-width: 980px;
margin: 0 auto;
cursor: pointer;
}
div.header {
margin: 0 auto;
max-width: 980px;
}
body {
background: #f7f7f7;
color: #333;
}
.employee-search-input {
width: 100%;
}
</style>
</head>
<body onload="addRowHandlers()">
<div class="header">
<h1>Data Biodata</h1>
</div>
<div class="container">
<!-- <center> <button style="right:150"> Create New</button></center>-->
<table id="employee-grid" class="display" cellpadding="5" cellspacing="1" width="100%" border="1" style="text-align: justify;">
<thead>
<tr>
<th>No</th>
<th>Year</th>
<th>System</th>
<th>Courses</th>
<th>SVC No</th>
<th>Pangkat</th>
<th>Name</th>
</tr>
</thead>
<thead>
<tr>
<td><input type="text" id="0" class="employee-search-input"></td>
<td><input type="text" id="1" class="employee-search-input"></td>
<td><input type="text" id="2" class="employee-search-input"></td>
<td><input type="text" id="3" class="employee-search-input"></td>
<td><input type="text" id="4" class="employee-search-input"></td>
<td><input type="text" id="5" class="employee-search-input"></td>
<td><input type="text" id="6" class="employee-search-input"></td>
</tr>
</thead>
<tbody id="employee-click">
<tr>
<th>No</th>
<th>Year</th>
<th>System</th>
<th>Courses</th>
<th>SVC No</th>
<th>Pangkat</th>
<th>Name</th>
</tr>
</tbody>
</table>
</div>
</body>
</html>

I dont know which id you mean for redirecting. But I think you should change your addRowHandlers function to this. Obtain and use your mentioned id and use it after alert.
function addRowHandlers() {
var tbody = $("#employee-click tr"); //document.getElementById("employee-click");
tbody.each(function() {
$(this).on('click', function() {
alert("hi");;
// window.location.href = "";
})
})
}
final code is
$(document).ready(function() {
var dataTable = $("#employee-grid").DataTable({
processing: true,
serverSide: true,
ajax: "dataBiodata.php" // json datasource
});
$("#employee-grid_filter").css("display", "none"); // hiding global search box
$(".employee-search-input").on("keyup click change", function() {
var i = $(this).attr("id"); // getting column index
var v = $(this).val(); // getting search input value
dataTable
.columns(i)
.search(v)
.draw();
});
});
function addRowHandlers() {
var tbody = $("#employee-click tr"); //document.getElementById("employee-click");
tbody.each(function() {
$(this).on('click', function() {
alert("hi");;
// window.location.href = "";
})
})
}
div.container {
max-width: 980px;
margin: 0 auto;
cursor: pointer;
}
div.header {
margin: 0 auto;
max-width: 980px;
}
body {
background: #f7f7f7;
color: #333;
}
.employee-search-input {
width: 100%;
}
<html>
<title>Data Biodata</title>
<head>
<meta name="author" content="Arkaprava majumder" />
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body onload="addRowHandlers()">
<div class="header">
<h1>Data Biodata</h1>
</div>
<div class="container">
<!-- <center> <button style="right:150"> Create New</button></center>-->
<table id="employee-grid" class="display" cellpadding="5" cellspacing="1" width="100%" border="1" style="text-align: justify;">
<thead>
<tr>
<th>No</th>
<th>Year</th>
<th>System</th>
<th>Courses</th>
<th>SVC No</th>
<th>Pangkat</th>
<th>Name</th>
</tr>
</thead>
<thead>
<tr>
<td><input type="text" id="0" class="employee-search-input"></td>
<td><input type="text" id="1" class="employee-search-input"></td>
<td><input type="text" id="2" class="employee-search-input"></td>
<td><input type="text" id="3" class="employee-search-input"></td>
<td><input type="text" id="4" class="employee-search-input"></td>
<td><input type="text" id="5" class="employee-search-input"></td>
<td><input type="text" id="6" class="employee-search-input"></td>
</tr>
</thead>
<tbody id="employee-click">
<tr>
<th>No</th>
<th>Year</th>
<th>System</th>
<th>Courses</th>
<th>SVC No</th>
<th>Pangkat</th>
<th>Name</th>
</tr>
</tbody>
</table>
</div>
</body>
</html>

multiple buttons on jquery html

There is a problem with the below code. The second button show it does not work. It doesn't open anything.
The problem is for sure the Show ..if I changed it to class , both do not work.
And I would like in each row the text to be left without any margin , but I couldn't fixed it
<!DOCTYPE html>
<html>
<body>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cafeteria Orders Management System</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
label,
input {
display: block;
}
input.text {
margin-bottom: 12px;
width: 95%;
padding: .4em;
}
fieldset {
padding: 0;
border: 0;
margin-top: 25px;
}
td {
max-width: 120px;
white-space: nowrap;
}
h1 {
font-size: 1.2em;
margin: .6em 0;
}
div#users-contain {
width: 300px;
margin: 20px 0;
}
div#users-contain table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
}
div#users-contain table td,
div#users-contain table th {
border: 9px solid #eee;
padding: .6em 120px;
text-align: left;
}
.ui-dialog .ui-state-error {
padding: .3em;
}
.validateTips {
border: 1px solid transparent;
padding: 0.3em;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
var dialog, form,
// From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+#[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
name = $("#name"),
email = $("#email"),
password = $("#password"),
allFields = $([]).add(name).add(email).add(password),
tips = $(".validateTips");
function updateTips(t) {
tips
.text(t)
.addClass("ui-state-highlight");
setTimeout(function() {
tips.removeClass("ui-state-highlight", 1500);
}, 500);
}
function checkLength(o, n, min, max) {
if (o.val().length > max || o.val().length < min) {
o.addClass("ui-state-error");
updateTips("Length of " + n + " must be between " +
min + " and " + max + ".");
return false;
} else {
return true;
}
}
function checkRegexp(o, regexp, n) {
if (!(regexp.test(o.val()))) {
o.addClass("ui-state-error");
updateTips(n);
return false;
} else {
return true;
}
}
function addUser() {
var valid = true;
allFields.removeClass("ui-state-error");
valid = valid && checkLength(name, "username", 3, 16);
valid = valid && checkLength(email, "email", 6, 80);
valid = valid && checkLength(password, "password", 5, 16);
valid = valid && checkRegexp(name, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter.");
valid = valid && checkRegexp(email, emailRegex, "eg. ui#jquery.com");
valid = valid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9");
if (valid) {
$("#users tbody").append("<tr>" +
"<td>" + name.val() + "</td>" +
"<td>" + email.val() + "</td>" +
"<td>" + password.val() + "</td>" +
"</tr>");
dialog.dialog("close");
}
return valid;
}
dialog = $("#dialog-form").dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
buttons: {
Ok: function() {
dialog.dialog("close");
}
},
close: function() {
form[0].reset();
allFields.removeClass("ui-state-error");
}
});
form = dialog.find("form").on("submit", function(event) {
event.preventDefault();
addUser();
});
$("#create-user").button().on("click", function() {
dialog.dialog("open");
});
});
</script>
</head>
<body>
<div id="dialog-form" title="Order Details">
<p class="validateTips">Spicy Sandwitch</p>
<p class="validateTips">More</p>
<form>
<fieldset>
<label for="name">More Comments</label>
<p class="validateTips">Sandwitch only lettuce</p>
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
<div id="users-contain" class="ui-widget">
<h1>Order List:</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name/Surname</th>
<th>Address</th>
<th>Telephone</th>
<th>Time/Date</th>
<th>Order Details</th>
<th>Done</th>
</tr>
</thead>
<tbody>
<tr>
</td>
<td>John Doe</td>
<td>Lykavitou 12, 2109 Aglantzia</td>
<td>99123456</td>
<td>21:00 21/11/16</td>
<td>
<button id="create-user">Show</button>
</td>
<td align="center">
<input type="checkbox" class="case" name="case" value="1" />
</tr>
<tr>
</td>
<td>Andreas Georgiou</td>
<td>Grigori Auxentiou 12, 2109 Aglantzia</td>
<td>99654789</td>
<td>20:00 21/11/16</td>
<td>
<button id="create-user">Show</button>
</td>
<td align="center">
<input type="checkbox" class="case" name="case" value="1" />
</tr>
</tbody>
</table>
</div>
</body>
</html>

change in the button attribute id, u cant use more than one id with the same name on your website, you can use class instead of. For example
<button class="create-user">Show</button>
and in the js u must call to the class
$(".create-user")

As was suggested, you will want to use the class attribute and selector.
Working example: https://jsfiddle.net/Twisty/5n2h03nL/
HTML
<div id="users-contain" class="ui-widget">
<h1>Order List:</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name/Surname</th>
<th>Address</th>
<th>Telephone</th>
<th>Time/Date</th>
<th>Order Details</th>
<th>Done</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Lykavitou 12, 2109 Aglantzia</td>
<td>99123456</td>
<td>21:00 21/11/16</td>
<td>
<button id="create-user-1" class="showDialog">Show</button>
</td>
<td align="center">
<input type="checkbox" class="case" name="case" value="1" />
</tr>
<tr>
<td>Andreas Georgiou</td>
<td>Grigori Auxentiou 12, 2109 Aglantzia</td>
<td>99654789</td>
<td>20:00 21/11/16</td>
<td>
<button id="create-user-2" class="showDialog">Show</button>
</td>
<td align="center">
<input type="checkbox" class="case" name="case" value="1" />
</tr>
</tbody>
</table>
</div>
jQuery
$(".showDialog").button().on("click", function() {
dialog.dialog("open");
});
In regards to your other comment, you will need to provide more info. If you want the "Show" button to launch the dialog with custom details each time, those details need to be provided from some place. You can make use of data attributes on the row, like <tr data-comments=""> or make an AJAX call to a database. We can't just write that for you, you need to figure out where you want to store those details and how you want to collect them when the button is clicked.
In regards to this question, I suspect you've got the answer. So I would mark one as a answer, take a stab at your next issue, and if needed create a new question.

Creating table with counter

I have the following code and am trying to get the number entered by the user to create that amount of rows with a counter in the cells up to the number entered(ie. if user enters 6, 6 rows will appear with 1-6 in them, 1 at the top) I figure a for-loop would work well, but I can't figure out what variables work. Any help would be greatly appreciated!
$(document).ready(function() {
$('#nbrTxt').focus();
var index = 1;
$('input[name=nbrTxt]').on('keyup', function(e) {
if (e.which === 13) {
$('table').append('<tr><td></td><td></td></tr>');
$('table tr:last td:first').html($(this).val());
$('table tr:last td:last').html(index);
$(this).focus().select();
index++;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<title> JQuery Selector</title>
<style type="text/css">
body {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
</style>
<script src="jquery-1.11.3.min.js"></script>
<script src="jqueryselector.js"></script>
</head>
<body>
<h1>JQuery Selector</h1>
Enter Number:
<input type="number" name= "nbrTxt" id="nbrTxt" />
<input type="button" value="GO" id="btnGo"/>
<table id="table" width="500" border="1">
<tr>
<td>No. Count</td>
<td>Name</td>
</tr>
</table>
</body>

Try this. I just changed keyup event to click though, but it should work.
$(document).ready(function() {
$('#nbrTxt').focus();
$('#btnGo').on('click', function(e) {
var value = $('#nbrTxt').val();
for (var i = 1; i <= value; i++) {
$('table').append('<tr><td></td><td></td></tr>');
$('table tr:last td:first').html(value);
$('table tr:last td:last').html(i);
}
});
});

Yes, you can use a for loop.
$(document).ready(function() {
$('#nbrTxt').focus();
$('input[name=nbrTxt]').on('keyup', function(e) {
var index = parseInt($(this).val());
if (e.which === 13) {
for(var i = 1; i <= index; i++) {
$('table').append('<tr><td>' + i + '</td><td></td></tr>');
$(this).focus().select();
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<title> JQuery Selector</title>
<style type="text/css">
body {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
</style>
<script src="jquery-1.11.3.min.js"></script>
<script src="jqueryselector.js"></script>
</head>
<body>
<h1>JQuery Selector</h1>
Enter Number:
<input type="number" name= "nbrTxt" id="nbrTxt" />
<input type="button" value="GO" id="btnGo"/>
<table id="table" width="500" border="1">
<tr>
<td>No. Count</td>
<td>Name</td>
</tr>
</table>
</body>

Multiple dynamic textfields into mysql db

Can someone fix my problem here pls. im trying to insert into database from these form below but I cant get it to work
heres the complete form sir:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<script type='text/javascript' src="jquery/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"> </script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
.dynatable {
border: solid 1px #000;
border-collapse: collapse;
}
.dynatable th,
.dynatable td {
border: solid 1px #000;
padding: 2px 10px;
width: 170px;
text-align: center;
}
.dynatable .prototype {
display: none;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(function(){
$(document).ready(function () {
var id = 0;
// Add button functionality
$("table.dynatable button.add").click(function () {
id++;
var master = $(this).closest("table.dynatable");
// Get a new row based on the prototype row
var prot = master.find("tr.prototype").clone();
prot.attr("class", "")
prot.find(".id").attr("value", id);
master.find("tbody").append(prot);
});
// Remove button functionality
$("table.dynatable button.remove").live("click", function () {
$(this).parents("tr").remove();
});
$("table.dynatable button.addColumn").click(function () {
var $this = $(this), $table = $this.closest('table')
var columnName = window.prompt("Enter Column name", "");
$('<th>' + columnName +'</th>').insertBefore($table.find('tr').first().find('th:last'))
var idx = $(this).closest('td').index() + 1;
$('<td><input type="text" name="col' + idx + '[]" value="" /</td>').insertBefore($table.find('tr:gt(0)').find('td:last'))
});
});
});//]]>
</script>
</head>
<body>
<table class="dynatable">
<thead>
<tr>
<th><button class="add">Add</button></th>
<form method="post" action="blah.php">
<th>Career Service/RA 1080(BOARD/BAR)</br>
Under Special Laws/CES/CSEE</th>
<th>Rating</th>
<th>Date of Examination/</br>
Conferment</th>
<th>Place of Examination/ Conferment</th>
</tr>
</thead>
<tbody>
<tr class="prototype">
<td><button class="remove">Remove</button></td>
<td><input type="text" name="name[]" value="" /></td>
<td><input type="text" name="rating[]" value="" /></td>
<td><input type="date" name="date[]" value="" /></td>
<td><input type="text" name="place[]" value="" /></td>
</tr>
</tbody>
</table>
<table width="972">
<tr align="center" >
<td width="71" colspan="5"><input type="submit" name="submit"/></td>
</tr>
</form>
</table>
</body>
</html>
Here's my php code it doesn't seem to work correctly. It inserts a blank data except for the id which has the value but the rest is blank data.
PHP CODE:
<?php
$host = 'Localhost';
$username= 'root';
$password= '';
$db_name = 'bfp';
$con = mysql_connect($host,$username,$password) or die ("Cant Connect");
mysql_select_db($db_name) or die ("Cant Select DataBase");
$k=2;//this is for the id value
$name = $_POST['name'];
foreach($name as $names) :
$values=mysql_real_escape_string($names);
$sql="INSERT INTO bfp_personnel_eligibility (id, eligibility_name, rating, doe, poe) VALUES ('{$k}','{$values}', '{$_POST['rating']}', '{$_POST['date']}', '{$_POST['place']}')";
if (!mysql_query($sql,$con)){
die('Error: ' . mysql_error());
}
endforeach;
?>

try this code:
$i = 0;
foreach($name as $names) :
$values=mysql_real_escape_string($names);
$sql="INSERT INTO bfp_personnel_eligibility (id, eligibility_name, rating, doe, poe) VALUES ('{$k}','{$values}', '{$_POST['rating'][$i]}', '{$_POST['date'][$i]}', '{$_POST['place'][$i]}')";
$i++;
if (!mysql_query($sql,$con)){
die('Error: ' . mysql_error());
}
endforeach;
Note: you have to apply mysql_real_escape_string for all values you are passing to query.
Edit:
place your form like this
<body>
<form method="post" action="blah.php">
<table class="dynatable">
.
.
.
.
</table>
</form>
</body>

Recreate part of a forms functionality across domains or autofill a single field on another site

I've set up a Tictail store as a fundraising method for a high school booster club. I'd like to be able to collect cash donations as well, but (long story short) in order for the club to avoid potential tax liability we'd prefer to funnel these through the district's foundation. The foundation has a web form option that we'd love to make use of. (if possible)
We do not have server access to any of the pages being discussed.
Here are the options I've come up with (in order of preference):
Option 1:
Recreate (scrape?) the pertinent parts of the form from the foundation website on our Tictail site and give it the same functionality as it has on the foundation site.
I've been experimenting with jQuery, but I'm kind of lost.
Option 2:
load the foundation site into an iframe on our Tictail site
In the field next to "Donate to Support Springfield Public Schools," autofill it with our groups name.
when you click submit open the result, but not in the iframe
Option 3:
When a link from out Tictail site to the foundation site is clicked the foundation site loads
In the field next to "Donate to Support Springfield Public Schools," autofill it with our groups name.
I've got a bit of experience with CSS and Javascript, but just enough to be dangerous. I'm REALLY hoping someone here can understand my problem and offer a solution.
Update:
I got everything except the submit button working in a test environment on a different page using this code:
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<div id="container" align="center">
<p>Call the FSPS office at 417-523-0144 to donate or simply enter information below.</p>
<p><script type="text/javascript">// <![CDATA[
jQuery(document).ready(function () {
var updateTotals = function() {
var total = 0;
var description = "";
if (!(isNaN(parseFloat(jQuery("#donateQty").val())) || parseFloat(jQuery("#donateQty").val()) <= 0)) {
total += jQuery("#donateQty").val() * 1;
description += "$" + jQuery("#donateQty").val() + " donation. ";
}
var processingFeeAmount = 0.0;
if (jQuery("#donateProcessingFee").is(":checked")) {
processingFeeAmount = total * 0.03;
total += processingFeeAmount;
jQuery("#processingFeeAmount").text("$" + processingFeeAmount.toFixed(2));
}
if (jQuery("#donateProject").val()) {
description += " Donation designated for: " + jQuery("#donateProject").val() + ".";
}
if(jQuery("#donateAnonymously").is(":checked")) {
description += " This is an anonymous donation.";
}
if (jQuery("#donateProcessingFee").is(":checked")) {
description += " This includes a processing fee donation.";
}
jQuery("#totalPrice").text("$"+total.toFixed(2));
jQuery("#x_amount").val(total.toFixed(2));
jQuery("#x_description").val(description);
};
jQuery("#donateQty").change(function() {
if (!isNaN(jQuery(this).val())) {
jQuery("#donatePrice").text("$"+(jQuery(this).val()* 1).toFixed(2));
updateTotals();
}
});
jQuery("#donateProject").change(function() {
updateTotals();
});
jQuery("#donateAnonymously").change(function() {
updateTotals();
});
jQuery("#donateProcessingFee").change(function() {
if (jQuery(this).is(":checked")) {
jQuery("#trProcessingFeeAmount").show();
} else {
jQuery("#trProcessingFeeAmount").hide();
}
updateTotals();
});
});
</script></p>
<form method='POST'>
<input id='x_amount' name='x_amount' type='hidden' value='0' />
<input id='x_description' name='x_description' type='hidden' />
</p>
<table>
<tbody>
<tr>
<td style="text-align: left;">Donation amount:</td>
<td><input id="donateQty" style="width: 50px;" size="5" type="text" /></td>
<td></td>
<td><span id="donatePrice">$0.00</span></td>
</tr>
<tr id="trProcessingFeeAmount" style="display: none;">
<td style="text-align: right !important;" colspan="3">PROCESSING FEE DONATION:</td>
<td><span id="processingFeeAmount">$0.00</span></td>
</tr>
<tr>
<td style="text-align: right !important;" colspan="3">TOTAL AMOUNT DUE:</td>
<td><span id="totalPrice">$0.00</span></td>
</tr>
<tr>
<td style="text-align: left !important;" colspan="2">Donation should be directed to:</td>
<td style="text-align: right !important;" colspan="2"><input id="donateProject" style="width: 150px;" size="150" type="text" value="CHS Kilties" /></td>
</tr>
<tr>
<td colspan="4">
<div style="float: right; text-align: left;"><span><label for="donateAnonymously"><br />
<input id="donateAnonymously" type="checkbox" /> I wish to remain Anonymous.</label></span><span> <label for="donateProcessingFee"><br />
<input id="donateProcessingFee" type="checkbox" /> Add 3% to my gift to cover processing fees, so 100% of my gift goes to FSPS.</label></span></div>
</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2"><input type="submit" value="Checkout" /></td>
</tr>
</tbody>
</table>
<p>
</form>
</div><!-- #content -->
<!--div id="footer" role="contentinfo">
</div--><!-- #footer -->
</div><!-- #wrapper -->
<div style="clear: both;"></div>
</div><!-- #container -->
<script type='text/javascript' src='http://supportsps.org/wp-content/plugins/contact-form- 7/jquery.form.js?ver=2.52'></script>
<script type='text/javascript' src='http://supportsps.org/wp-content/plugins/contact-form-7/scripts.js?ver=2.4.3'></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-15690751-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
but when I paste it into the Tictail page, none of the calculations or functionality work.

I got everything but the submit button working with this:
<div class="html_content" align="center">
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="http://supportsps.org/xmlrpc.php" />
<link rel="alternate" type="application/rss+xml" title="supportsps.org » Feed" href="http://supportsps.org/feed/" />
<link rel="alternate" type="application/rss+xml" title="supportsps.org » Comments Feed" href="http://supportsps.org/comments/feed/" />
<link rel='stylesheet' id='contact-form-7-css' href='http://supportsps.org/wp- content/plugins/contact-form-7/styles.css?ver=2.4.3' type='text/css' media='all' />
<script type='text/javascript' src='http://supportsps.org/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
<script type='text/javascript' src='http://supportsps.org/wp-includes/js/comment-reply.min.js?ver=3.5.1'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://supportsps.org/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://supportsps.org/wp-includes/wlwmanifest.xml" />
<link rel='canonical' href='http://supportsps.org/donate/' />
</head>
<script type="text/javascript">
jQuery(document).ready(function () {
var sOffset = jQuery("#sidebar").offset();
var cOffset = jQuery("#content").offset();
var sdiffHeight = jQuery("#sidebar").outerHeight() - jQuery("#sidebar").height();
var cdiffHeight = jQuery("#content").outerHeight() - jQuery("#content").height();
var height = Math.max(cOffset.top + jQuery("#content").outerHeight(), sOffset.top + jQuery("#sidebar").outerHeight());
jQuery("#sidebar").height(height - sOffset.top - sdiffHeight);
jQuery("#content").height(height - cOffset.top - cdiffHeight);
});
</script>
<div id="sidebar">
</div>
<div id="content" role="main">
<center><p><h2>Call the Foundation for Springfield Public Schools office at</p>
<p>417-523-0144 or simply use the form below.</h2></p></center>
<p><script type="text/javascript">// <![CDATA[
jQuery(document).ready(function () {
var updateTotals = function() {
var total = 0;
var description = "";
if (!(isNaN(parseFloat(jQuery("#donateQty").val())) || parseFloat(jQuery("#donateQty").val()) <= 0)) {
total += jQuery("#donateQty").val() * 1;
description += "$" + jQuery("#donateQty").val() + " donation. ";
}
var processingFeeAmount = 0.0;
if (jQuery("#donateProcessingFee").is(":checked")) {
processingFeeAmount = total * 0.03;
total += processingFeeAmount;
jQuery("#processingFeeAmount").text("$" + processingFeeAmount.toFixed(2));
}
if (jQuery("#donateProject").val()) {
description += " Donation designated for: " + jQuery("#donateProject").val() + ".";
}
if(jQuery("#donateAnonymously").is(":checked")) {
description += " This is an anonymous donation.";
}
if (jQuery("#donateProcessingFee").is(":checked")) {
description += " This includes a processing fee donation.";
}
jQuery("#totalPrice").text("$"+total.toFixed(2));
jQuery("#x_amount").val(total.toFixed(2));
jQuery("#x_description").val(description);
};
jQuery("#tabQty").change(function() {
if (!isNaN(jQuery(this).val())) {
jQuery("#tabPrice").text("$"+(jQuery(this).val()* 35).toFixed(2));
updateTotals();
}
});
jQuery("#tableQty").change(function() {
if (!isNaN(jQuery(this).val())) {
jQuery("#tablePrice").text("$"+(jQuery(this).val()* 350).toFixed(2));
updateTotals();
}
});
jQuery("#wilQty").change(function() {
if (!isNaN(jQuery(this).val())) {
jQuery("#wilPrice").text("$"+(jQuery(this).val()* 15.95).toFixed(2));
updateTotals();
}
});
jQuery("#donateQty").change(function() {
if (!isNaN(jQuery(this).val())) {
jQuery("#donatePrice").text("$"+(jQuery(this).val()* 1).toFixed(2));
updateTotals();
}
});
jQuery("#donateProject").change(function() {
updateTotals();
});
jQuery("#donateAnonymously").change(function() {
updateTotals();
});
jQuery("#donateProcessingFee").change(function() {
if (jQuery(this).is(":checked")) {
jQuery("#trProcessingFeeAmount").show();
} else {
jQuery("#trProcessingFeeAmount").hide();
}
updateTotals();
});
});
// ]]></script></p>
<form method='POST'>
<input id='x_amount' name='x_amount' type='hidden' value='0' />
<input id='x_description' name='x_description' type='hidden' />
</p>
<table>
<tbody>
<tr>
<td style="text-align: left;">Donation amount:</td>
<td><input id="donateQty" style="width: 50px;" size="5" type="text" /></td>
<td></td>
<td><span id="donatePrice">$0.00</span></td>
</tr>
<tr id="trProcessingFeeAmount" style="display: none;">
<td style="text-align: right !important;" colspan="3">3% PROCESSING FEE:</td>
<td><span id="processingFeeAmount">$0.00</span></td>
</tr>
<tr>
<td style="text-align: right !important;" colspan="3">TOTAL AMOUNT DUE:</td>
<td><span id="totalPrice">$0.00</span></td>
</tr>
<tr>
<td style="text-align: left !important;" colspan="2">Direct donation to:</td>
<td style="text-align: right !important;" colspan="2"><input id="donateProject" style="width: 150px;" size="150" type="text" value="CHS Kilties" /></td>
</tr>
<tr>
<td colspan="4">
<div style="float: right; text-align: left;"><span><label for="donateAnonymously"><br />
<input id="donateAnonymously" type="checkbox" /> I wish to remain Anonymous.</label> </span><span><label for="donateProcessingFee"><br />
<input id="donateProcessingFee" type="checkbox" /> Add 3% to my donation for processing fees, so 100% goes to the Kilties.</label></span></div>
</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2"><input type="submit" value="Checkout" /></td>
</tr>
</tbody>
</table>
</form>
</div><!-- #content -->
<!--div id="footer" role="contentinfo">
</div--><!-- #footer -->
</div><!-- #wrapper -->
<div style="clear: both;"></div>
</div><!-- #container -->
<script type='text/javascript' src='http://supportsps.org/wp-content/plugins/contact-form- 7/jquery.form.js?ver=2.52'></script>
<script type='text/javascript' src='http://supportsps.org/wp-content/plugins/contact-form- 7/scripts.js?ver=2.4.3'></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-15690751-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
but there's about 2-3 inches of space above the form. You can see the page here. Everything seems to be happening in <div id="sidebar"> because if I delete that line that space disappears, but so does all the functionality. Any ideas?

We Keep Coding

JavaScript is the programming language of the Web.

How to add css file to the pdf document? - javascript

Try setting border-collapse: collapse; on the parent <table>. Per CSS 2.1 spec, rows cannot have borders unless this property is set. In most cases, the property default is border-collapse: separate; so it should just be a matter of overriding this.

Related

How to add a click event row that can go to next page by id?

multiple buttons on jquery html

Creating table with counter

Multiple dynamic textfields into mysql db

Recreate part of a forms functionality across domains or autofill a single field on another site

Categories

Resources