I have a form, that is being filled, and fields are added to DB. After that DB is displayed in the browser in a table. User has to check the rows that he needs to add to txt file to later send.
So far I got stuck on transfering table data into an array, to later check the checkbox and to either add to text file or not.
<!DOCTYPE html>
<html>
<head>
<title>Vaucher Entry</title>
<link type="text/css" rel="stylesheet" href="css/normalize.css" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/date.js"></script>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script src="http://ift.tt/1FzPymq"></script>
<script src="http://ift.tt/1FzPyms"></script>
<script type="text/javascript" src="js/handlebars-v3.0.3.js"></script>
<script src="http://ift.tt/1akd9df"></script>
<script src="http://ift.tt/1e1uqGJ"></script>
<script type="text/javascript" src="js/pouchdb-3.5.0.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/db.js"></script>
</head>
<body>
<script type='text/x-handlebars' data-template-name='application'>
<h2>Model Irrigation Voucher Entry</h2>
<div id="leftColumn">
<ul>
<li><a href="#" onclick="vaucherEntry(); return false; showVauchers()">Vaucher Entry</a></li>
<li><a href="#" onclick="settings(); return false;">Settings</a></li>
<li><a href="#" onclick="about(); return false;">About</a></li>
</ul>
</div>
<div id='container'>
<div id="form" action="#" method="post">
<form name='VaucherForm' >
<legend>Vaucher Entry</legend>
<div id="both">
<div id="left">
<label for='vaucherID'>Vaucher ID:</label><input type="text" maxlength="8" name="vaucherID" id="vaucherID"><br>
<label for="vendorID">Vendor ID:</label><input type="text" maxlength="10" name="vendorID" id= "vendorID"><br>
<label for="amount">Amount:</label><input type="number" maxlength="17" name="amount" id="amount"><br>
</div>
<div id="right">
<label for="date">Date:</label><input type="date" maxlength="10" name="date" id="date"><br>
<label for="invoiceNumber">Invoice #:</label><input type="number" maxlength="28" name="invoiceNumber" id="invoiceNumber"><br>
<div>
<div id="fundDiv"><label for="fund">Fund:</label><input type="text" maxlength="5" name="fund" id="fund" value="I30"><br></div>
<div id= "deptDiv"><label for="deptID">Dept. ID:</label><input type="text" maxlength="7" name="deptID" id="deptID" value="18I"><br></div>
</div>
</div>
</div>
<div>
<label for="descript">Description:</label><input type="text" maxlength="30" name="descript" id="descript" onkeydown="if (event.keyCode == 13) {addVaucher()}">
<!--//<label for="mysteryNumber">Mystery #:</label><input type="text" maxlength="30" name="mysteryNumber" id="mysteryNumber" value='3700'>-->
</div>
<button type="button" onClick="addVaucher()">Add Vaucher</button>
<button type="reset">Clear Form</button>
</form>
</div>
<div id='table'></div>
</div>
<footer class='container'>
<hr />
<p class='pull-left'>© 2015
</footer>
</script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/htmlToText.js"></script>
</body>
</html>
This is the htmlToText.js
var details = $('#tableData tbody tr').map(function (i, row) {
return {
'number': row.cells[0].textContent,
'vendorID': row.cells[1].textContent,
'amount': row.cells[2].textContent,
'date': row.cells[3].textContent,
'invoiceNum': row.cells[4].textContent,
'fund': row.cells[5].textContent,
'deptID': row.cells[6].textContent,
'description': row.cells[7].textContent,
'checkBox': row.cells[8].textContent
}
}).get();
console.log(details);
So far it returns an empty array. Thou if I try the simplified version of just having a simple html file with the table, htmlToText.js works like a charm.
Can it be because of me using ember.js in my html file?
Aucun commentaire:
Enregistrer un commentaire