Getting Javascript Generated Values to Flask

Getting Javascript Generated Values to Flask - javascript

I need some help, I'm really stuck with this problem, I have this javascript code, which adds new rows to my DataTable onClick:
<script type="text/javascript">
function deleteRow(o){
var p=o.parentNode.parentNode;
p.parentNode.removeChild(p);
}
function addRow()
{
var table = document.getElementById("datatable"),
newRow = table.insertRow(table.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
name = document.getElementById("form").value,
amount = document.getElementById("amount").value;
delete1 = delete1 = '<input type="button" class="btn btn-danger" class="glyphicon glyphicon-trash"id="delete" value="Delete" onclick="deleteRow(this)">';
cell1.innerHTML = name;
cell2.innerHTML = amount;
cell3.innerHTML = delete1;
findTotal();
}
function findTotal(){
var arr = document.querySelectorAll("#datatable td:nth-child(2)");
var tot=0;
for(var i=0;i<arr.length;i++){
var enter_value = Number(arr[i].textContent)
if(enter_value)
tot += Number(arr[i].textContent);
}
document.getElementById('total').value = tot;
}
</script>
<td>s are gerated as expected. As you can see in the this picture on the browsers developer tool.
How would I save these tds to python?
Here's a bit of my HTML:
<div class="jumbotron jumbotron-sm">
<div class="container" id = "contact">
<div class="row">
<div class="col-sm-12 col-lg-12">
<h1 class="h1">
Accountable Form 51 <small>Made easier</small></h1>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12" style="display: inline-block;">
<div class="well well-sm">
<form action="{{ url_for('addrec') }}" method=post>
<div class="row">
<div class="col-md-6" style="display: inline-block; ">
<div class="form-group">
<label for="name">
O.R Number</label>
<br>
<span class="glyphicon glyphicon-user-list-alt"><input type="hidden" name="OR" value="{{receiptno}}">
<br>
<h1>#{{receiptno}}</h1></span><br>
</div>
<br>
<br>
<div class="form-group">
<label for="email">
Payor</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span>
</span>
<input type="text" class="form-control" name = "payor" id="payor" placeholder="Enter Full Name" required="required" /></div>
</div>
<div class="form-group">
<label for="subject">
Nature of Payment</label>
<div id="RadioGroup">
<br>
<input type="radio" name="paymentmethod" checked="checked" value="CASH"> Cash<br>
<input type="radio" name="paymentmethod" value="CHECK"> Check<br>
<div id="PaymentsCHECK" class="desc" style="display: none;">
<br>
Drawee Bank<br><input type="text" name="dbank"><br>
Account No.<br><input type="text" name="dNum"><br>
Date Issued<br><input type="text" name="dDate"><br>
Account Name<br><input type="text" name="dName"><br>
</div>
<input type="radio" name="paymentmethod" value="MONEY"> Money Order<br>
<div id="PaymentsMONEY" class="desc" style="display: none;">
<br>
Money Order No.<br><input type="text" name="dbank">
</div>
</div>
</div> <!-- FORM GROUP END -->
<div class="form-group">
<label for="name">
Memo</label>
<textarea name="message" id="message" class="form-control" rows="5" cols="25" required="required"
placeholder="Message"></textarea>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-primary pull-right" id="btnContactUs">
Submit Form</button>
<br>
</div>
</div>
</div><!-- FIRST COL6 END -->
</div><br><br><br><br><!-- ROW END -->
</form>
<form>
<div class="col-md-5" style="display: inline-block; ">
<div class="jumbotron">
<h2>Type in Nature of Collection...</h2>
<form name="noc">
<input class="form-control input-lg" id="form" list="languages" placeholder="Search" type="text" required>
<br>
<input class="form-control input-lg" id="amount" list="languages" placeholder="Amount" type="number" required>
<br>
<button onclick="addRow(); return false;">Add Item</button>
</form>
<datalist id="languages">
{% for row in rows %}
<option value = "{{row[0]}}">
{% endfor %}
</datalist>
</div> <!-- JUMBO END -->
<h6> <label>Date:<span></span>
</label> {{date}}</h6>
<h3><fieldset disabled>
<label>Total </label>
<h2>₱<input type = "text" name = "total" id="total"></h2>
</fieldset></h3>
</div><!-- COL5 END -->
<!-- </div> --><!-- REMAIN OR NOT? DEPENDS ON DEBUG PROCESS LATER -->
<div class="col-md-6" style="display: inline-block;">
<div class="jumbotron">
<h2>Nature of Collection</h2>
</div>
<div>
<!-- ACCUMULATION TABLE STARTS -->
<table id="datatable" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Nature of Collection</th>
<th>Amount</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
<!-- </form> --> <!-- CHECK LATER -->
<datalist id="languages">
{% for row in rows %}
<option value={{row[0]}}></option>
{% endfor %}
</datalist>
</div>
</form>
</div>
</div>
</div>
</div>
and my full Python code which is suppsoed to receive the input in this problem:
#app.route('/addrec',methods = ['POST', 'GET'])
def addrec():
if g.user:
if request.method == 'POST':
#UPPER PANE
payor = request.form['payor']
receiptno = request.form['OR']
paymentmethod = request.form['paymentmethod']
naive_dt = time.strftime("%m/%d/%Y")
collectiondate = naive_dt = datetime.now()
message = request.form['message']
#LOWER PANE
url_to_scrape = 'http://localhost:5000/form'
r = requests.get(url_to_scrape)
soup = BeautifulSoup(r.text)
nature = []
for table_row in soup.select("table.inmatesList tr"):
cells = table_row.findAll('td')
if len(cells) > 0:
nature = cells[0].text.strip()
natureamt = cells[1].text.strip()
nature = {'nature': nature, 'nature': natureamt}
nature_list.append(nature)
ent = Entry(receiptno, payor,officer, paymentmethod, collectiondate,message, nature_list)
add_entry(ent)
actions="Applied"
return redirect(url_for('form'))
return redirect(url_for('home'))
As you can see I already tried scraping but it just loads forever. Is there any way I can get this? I separated my HTML into 2 parts. UPPER PANE and LOWER PANE. UPPER pane gets input for the basic input does and the LOWER PANE has a table and its cells are generated by an oNClick function.
So why did I separate it into two forms? This is because it gets complicated for the Lower Pane. For example, I click ADD ENTRY, instead of adding an entry its just reloads the whole website and nothing happens.
If you have an easier/cleaner/better way to do this other than scraping please do help.

Related

How to create a unique ID on each function call to a drop down list Asp.net

I am trying to dynamically add a new product each time an option from a drop down menu is chosen. However I believe my id field is preventing me from creating new data on my added rows. I can only change the first row. How to adjust my script to create ne id values on each function call. I tried using the Date.Now field.....but no luck.
This is how the form looks
Drop down menu
Added two more products but cant get the values of the Description, Price, etc
#page
#using Newtonsoft.Json
#model DotComFinal.Pages.Quotations.CreateModel
#{
ViewData["Title"] = "Create";
}
<h1>Create Quotation</h1>
<hr />
<div>
Customer Info
<form method="post d-flex">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Quotation.Customer.FirstName" class="control-label"></label>
<input asp-for="Quotation.Customer.FirstName" class="form-control w-50" asp-items="ViewBag.CustomerID"></input>
</div>
<div class="form-group">
<label asp-for="Quotation.Customer.LastName" class="control-label"></label>
<input asp-for="Quotation.Customer.LastName" class="form-control w-50" asp-items="ViewBag.CustomerID"></input>
</div>
<div class="form-group ">
<label asp-for="Quotation.Customer.Email" class="control-label"></label>
<input asp-for="Quotation.Customer.Email" class="form-control w-50" asp-items="ViewBag.CustomerID"></input>
</div>
<div class="form-group w-100">
<label asp-for="Quotation.QuotDate" class="control-label"></label>
<input asp-for="Quotation.QuotDate" class="form-control w-50" />
<span asp-validation-for="Quotation.QuotDate" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Quotation.ValidUntil" class="control-label"></label>
<input asp-for="Quotation.ValidUntil" class="form-control w-50" />
<span asp-validation-for="Quotation.ValidUntil" class="text-danger"></span>
</div>
<div class=" w-50">
<label class="control-label">Select a Product</label>
<table id="product-select" class=" table table-striped table-sm w-100">
<thead>
<tr>
<th>
<label asp-for="Product[0].Name"></label>
</th>
<th>
<label asp-for="Product[0].Description"></label>
</th>
<th>
<label asp-for="Product[0].Quantity"></label>
</th>
<th>
<label asp-for="Product[0].UnitPrice"></label>
</th>
<th>
<label asp-for="Product[0].Discount"></label>
</th>
<th>
<label asp-for="Product[0].Vat"> </label>
</th>
<th>
<label asp-for="Product[0].NetTotal"></label>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select class="btn btn-success " id="productOptions" onchange="changeDropDownValue()">
#* <option value="">Product</option>*#
#foreach (var product in Model.Product)
{
<option value="#product.ID">#product.Name</option>
}
</select>
</td>
<td>
<input asp-for="Product[0].Description" id="test" disabled />
<span asp-validation-for="Product[0].Description" class="text-danger"></span>
</td>
<td>
<input asp-for="Product[0].Quantity" />
<span asp-validation-for="Product[0].Quantity" class="text-danger"></span>
</td>
<td>
<input asp-for="Product[0].UnitPrice" disabled />
<span asp-validation-for="Product[0].UnitPrice" class="text-danger"></span>
</td>
<td>
<input asp-for="Product[0].Discount" />
<span asp-validation-for="Product[0].Discount" class="text-danger"></span>
</td>
<td>
<input asp-for="Product[0].Vat" disabled />
<span asp-validation-for="Product[0].Vat" class="text-danger"></span>
</td>
<td>
<input asp-for="Product[0].NetTotal" disabled />
<span asp-validation-for="Product[0].NetTotal" class="text-danger"></span>
</td>
<ttd>
</ttd>
</tr>
</tbody>
</table>
#* <button onclick="AddItem(this)" id="btnadd" type="button" class=" btn btn-sm btn-outline-success m-auto visible">Add Product</button>
<button id="btnremove" type="button" class="m-2 btn btn-sm btn-danger invisible">Delete</button>*#
</div>
<button onclick="AddItem(this)" id="btnadd" type="button" class=" btn btn-sm btn-outline-success w-100 visible">Add Product</button>
<button onclick="DeleteItem(this)" id="btnremove" type="button" class="m-2 btn btn-sm btn-danger visible">Delete</button>
<div>
<input type="submit" value="Create Quotation" class="btn btn-primary mt-3" />
<a asp-page="Index">Back to List</a>
</div>
<div>
</div>
<div class="d-flex gap-lg-5 ">
<div class="form-group">
<label asp-for="Quotation.StaffID" class="control-label"></label>
#* <select asp-for="Quotation.StaffID" class="form-control" asp-items="#Model.CompanyStaffNameSL"><option value="">-- Select Major --</option></select>
*# </div>
<div class="form-group">
<label asp-for="Quotation.FinalTotal" class="control-label"></label>
<input asp-for="Quotation.FinalTotal" class="form-control" />
<span asp-validation-for="Quotation.FinalTotal" class="text-danger"></span>
</div>
</div>
</form>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");};
}
<script type="text/javascript">
function AddItem(btn){
var product = document.getElementById("product-select");
var rows = product.getElementsByTagName("tr");
var rowOuterHtml = rows[rows.length-1].outerHTML;
var newRow = product.insertRow();
newRow.innerHTML=rowOuterHtml;
function DeleteItem(btn){
var product = document.getElementById("product-select");
var rows = product.getElementsByTagName("tr");
$(btn).closet("tr").remove;
}
}
</script>
<script>
alert("test")
function changeDropDownValue() {
var selectedProductId = document.getElementById("productOptions").value;
var Products = #Html.Raw(JsonConvert.DeserializeObject(JsonConvert.SerializeObject(#Model.Product)));
// Find the product with the matching ID in the Model.Product array
var selectedProduct = Products.find(product => product.ID == selectedProductId);
var newId = "product-" + Date.now();
// Update the input fields with the values of the selected product
document.getElementById("test").value = selectedProduct.Description;
document.getElementsByName("Product[0].Quantity")[0].value = selectedProduct.Quantity;
document.getElementsByName("Product[0].UnitPrice")[0].value = selectedProduct.UnitPrice;
document.getElementsByName("Product[0].Discount")[0].value = selectedProduct.Discount;
document.getElementsByName("Product[0].Vat")[0].value = selectedProduct.Vat;
document.getElementsByName("Product[0].NetTotal")[0].value = selectedProduct.NetTotal;
}
</script>

Firstly,id should be unique,so you need to change the ids when inserting a new row.Then when selcted option is changed,you need to tell the js which row you are changing,so you need to tell the index,here is a demo:
html of select(pass the select element to js,and add the current index into id):
<select class="btn btn-success " id="productOptions_0" onchange="changeDropDownValue(this)">
#* <option value="">Product</option>*#
#foreach (var product in Model.Product)
{
<option value="#product.ID">#product.Name</option>
}
</select>
description input(remove the id so that it will be unique when adding new rows):
js:
function AddItem(btn){
var product = document.getElementById("product-select");
var rows = product.getElementsByTagName("tr");
var rowOuterHtml = rows[1].outerHTML;
var index=rows.length-1;//index of the new row
var newRow = product.insertRow();
newRow.innerHTML=rowOuterHtml.replaceAll("[0","["+index).replaceAll("_0","_"+index);//set ids and names of the new row with index
}
function DeleteItem(btn){
var product = document.getElementById("product-select");
var rows = product.getElementsByTagName("tr");
$(btn).closet("tr").remove;
}
function changeDropDownValue() {
var selectedProductId = document.getElementById("productOptions").value;
var Products = #Html.Raw(JsonConvert.DeserializeObject(JsonConvert.SerializeObject(#Model.Product)));
// Find the product with the matching ID in the Model.Product array
var selectedProduct = Products.find(product => product.ID == selectedProductId);
var index=$(test).attr("id").split("_")[1];//find the index with id
// Update the input fields with the values of the selected product
document.getElementsByName("Product[" + index + "].Description")[0].value = selectedProduct.Description;
document.getElementsByName("Product[" + index + "].Quantity")[0].value = selectedProduct.Quantity;
document.getElementsByName("Product[" + index + "].UnitPrice")[0].value = selectedProduct.UnitPrice;
document.getElementsByName("Product[" + index + "].Discount")[0].value = selectedProduct.Discount;
document.getElementsByName("Product[" + index + "].Vat")[0].value = selectedProduct.Vat;
document.getElementsByName("Product[" + index + "].NetTotal")[0].value = selectedProduct.NetTotal;
}

Search filter in angular js

I am trying to implement the search filter for the following application using angularjs. But it's not working as intended. I am new to this so I am not sure what I've done wrong here. Can someone help?
Here is my code so far:-
index.html file :
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="Controller/app.js"></script>
<script src="Controller/storage.js"></script>
</head>
<body ng-app="kfgPm">
<div ng-controller="MainCtrl" class="container">
<form name="kfgPmForm" ng-submit="submitForm(kfgPmForm.$valid)" novalidate>
<div class="col-sm-12" class="form-horizontal" role="form">
<div class="form-group col-sm-6">
<label for="projectID" class="col-sm-3 col-form-label">Project ID: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="projectID" required ng-model="itm.projectID">
</div>
</div>
<div class="form-group col-sm-6">
<label for="projectName" class="col-sm-3 col-form-label">Project Name: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="projectName" required ng-model="itm.projectName">
</div>
</div>
</div>
<div class="col-sm-12" class="form-horizontal" role="form">
<div class="form-group col-sm-6">
<label for="projectOwner" class="col-sm-3 col-form-label">Project Owner: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="projectOwner" required ng-model="itm.projectOwner">
</div>
</div>
<div class="form-group col-sm-6">
<label for="keyStake" class="col-sm-3 col-form-label">Key Stakeholders: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="keyStake" required ng-model="itm.keyStake">
</div>
</div>
</div>
<div class="col-sm-12" class="form-horizontal" role="form">
<div class="form-group col-sm-6">
<label for="prepBy" class="col-sm-3 col-form-label">Prepared By: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="prepBy" required ng-model="itm.prepBy">
</div>
</div>
<div class="form-group col-sm-6">
<label for="reqDate" class="col-sm-3 col-form-label">Requested Date: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="reqDate" required ng-model="itm.reqDate">
</div>
</div>
</div>
<div class="col-sm-12" class="form-group" ng-submit="submitDetails()" role="form">
<div class="form-group col-sm-6" class="input-group mb-3">
<label for="inputGroupSelect01" class="col-sm-3 col-form-label">Status: </label>
<div class="col-sm-9">
<select name="status" class="form-control custom-select" ng-options="user.option for user in arrlist" required ng-model="user.itm.status">
<option value="">Select..</option>
</select>
</select>
</div>
</div>
<div class="form-group col-sm-6">
<label for="dept" class="col-sm-3 col-form-label">Department: </label>
<div class="col-sm-9">
<input type="text" class="form-control" id="dept" required ng-model="itm.dept">
</div>
</div>
</div>
<div class="col-sm-12" class="form-group purple-border">
<div class="col-sm-2">
<label for="projSummary">Project Summary: </label>
</div>
<div class="col-sm-10">
<textarea class="form-control" id="projSummary" required ng-model="itm.projSummary" rows="3"></textarea>
</div>
</div>
</form>
<div class="form-row text-center">
<div class="col-12">
<button ng-disabled="kfgPmForm.$invalid" ng-click="update(itm)" class="btn btn-info">SUBMIT</button>
<div><br></div>
</form>
<div><br></div>
<div class="col-sm-12" class="form-horizontal">
<label for="search" class="col-sm-3 col-form-label">Search: </label>
<div class="col-sm-6">
<input ng-model="searchText" class="form-control" ng-keyup="filterFunc()">
<div><br></div>
</div>
</div>
<div class="results">
<table class="table table-bordered table-responsive-md table-striped text-center">
<thead class="thead-light">
<tr>
<th>Project ID</th>
<th>Project Name</th>
<th>Project Owner</th>
<th>Key Stakeholders</th>
<th>Prepared By</th>
<th>Requested Date</th>
<th>Status</th>
<th>Department</th>
<th>Project Summary</th>
<th>ACTIONS</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="itm in master | filter: itm.search">
<td><span ng-hide="editMode">{{itm.projectID}}</span>
<input type="text" ng-show="editMode" ng-model="itm.projectID" />
</td>
<td><span ng-hide="editMode">{{itm.projectName}}</span>
<input type="text" ng-show="editMode" ng-model="itm.projectName" />
</td>
<td><span ng-hide="editMode">{{itm.projectOwner}}</span>
<input type="text" ng-show="editMode" ng-model="itm.projectOwner" />
</td>
<td><span ng-hide="editMode">{{itm.keyStake}}</span>
<input type="text" ng-show="editMode" ng-model="itm.keyStake" />
</td>
<td><span ng-hide="editMode">{{itm.prepBy}}</span>
<input type="text" ng-show="editMode" ng-model="itm.prepBy" />
</td>
<td><span ng-hide="editMode">{{itm.reqDate}}</span>
<input type="text" ng-show="editMode" ng-model="itm.reqDate" />
</td>
<td><span ng-hide="editMode">{{itm.status.option}}</span>
<input type="text" ng-show="editMode" ng-model="itm.status" />
</td>
<td><span ng-hide="editMode">{{itm.dept}}</span>
<input type="text" ng-show="editMode" ng-model="itm.dept" />
</td>
<td><span ng-hide="editMode">{{itm.projSummary}}</span>
<input type="text" ng-show="editMode" ng-model="itm.projSummary" />
</td>
<td>
<button ng-click="EditProject(itm)" class="btn btn-primary">Edit</button>
<button ng-hide="editMode" ng-click="removeItem($index)" class="btn btn-danger">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
</div>
</body>
</html>
This is my app.js file:
var isHtml5Compatible = document.createElement('canvas').getContext != undefined;
if (isHtml5Compatible) {
initiateLocalStorage();
}
function initiateLocalStorage() {
var app = angular.module('kfgPm', ['storageService']);
app.controller('MainCtrl', ['$scope', 'getLocalStorage', function($scope, getLocalStorage) {
$scope.EditProject = EditProject;
$scope.master = getLocalStorage.getData();
$scope.master = [];
$scope.update = function() {
var IsNew = true; //if the data entered in the field is new
angular.forEach($scope.master, function(LItem, key) {
if (LItem.projectID == $scope.itm.projectID) { //if the new project ID equals old project ID
IsNew = false; //data entered is to be edited
LItem.projectID = $scope.itm.projectID;
LItem.projectName = $scope.itm.projectName;
LItem.projectOwner = $scope.itm.projectOwner;
LItem.keyStake = $scope.itm.keyStake;
LItem.prepBy = $scope.itm.prepBy;
LItem.reqDate = $scope.itm.reqDate;
LItem.status = $scope.itm.status;
LItem.dept = $scope.itm.dept;
LItem.projSummary = $scope.itm.projSummary;
}
});
if (IsNew) { //if new data
$scope.master.push({ //add to the fields
'projectID': $scope.itm.projectID,
'projectName': $scope.itm.projectName,
'projectOwner': $scope.itm.projectOwner,
'keyStake': $scope.itm.keyStake,
'prepBy': $scope.itm.prepBy,
'reqDate': $scope.itm.reqDate,
'status': $scope.itm.status,
'dept': $scope.itm.dept,
'projSummary': $scope.itm.projSummary,
});
}
getLocalStorage.update($scope.master);
$scope.itm.projectID = '';
$scope.itm.projectName = '';
$scope.itm.projectOwner = '';
$scope.itm.keyStake = '';
$scope.itm.prepBy = '';
$scope.itm.reqDate = '';
$scope.itm.status = '';
$scope.itm.dept = '';
$scope.itm.projSummary = '';
},
$scope.removeItem = function(index) {
console.log(index);
$scope.master.splice(index, 1)
getLocalStorage.update($scope.master);
},
$scope.editItem = function(index) {
getLocalStorage.update($scope.master);
$scope.editing = $scope.master.indexOf(index);
}
function EditProject(pItem) { //if edit is clicked the data is replaced in respective fields
$scope.itm.projectID = pItem.projectID;
$scope.itm.projectName = pItem.projectName;
$scope.itm.projectOwner = pItem.projectOwner;
$scope.itm.keyStake = pItem.keyStake;
$scope.itm.prepBy = pItem.prepBy;
$scope.itm.reqDate = pItem.reqDate;
$scope.itm.status = pItem.status;
$scope.itm.dept = pItem.dept;
$scope.itm.projSummary = pItem.projSummary;
console.log(pItem);
}
$scope.arrlist = [{
"id": 1,
"option": "One"
}, {
"id": 2,
"option": "Two"
}];
$scope.userselected = $scope.arrlist[1];
$scope.LItem = angular.copy($scope.update);
$scope.filterFunc = function() {
$scope.LItem = $filter('filter')($scope.update, { $: $scope.searchText });
}
$scope.submitForm = function(isValid) {
if (isValid) {
alert('Submitted Successfully');
}
};
}]);
}
I am trying to implement the search for all columns such that when I type something in the search text field, it should return only the row with those searched terms and the rest of the rows would be hidden in the table.

To start, I see the following problems:
<body ng-app="kfgPm">
<div ng-controller="MainCtrl" class="container">
<form name="kfgPmForm" ng-submit="submitForm(kfgPmForm.$valid)" novalidate>
<!-- duplicate class attribute -->
<div class="col-sm-12" class="form-horizontal" role="form">
<!-- end tag seen too early -->
</div>
</div>
Duplicate class attribute -- the second one will be ignored
End tag seen too early - the scope of the controller will be limited
These two errors alone will cause the app to fail.
Also angular.js and bootstrap.js do not play well together. They do not co-ordinate their manipulation of the DOM.

How to get Data from another page Local Storage?

``I'm trying to get the json data stored in local storage. How to get the local storage data from one page to another page in the same domain?
In MainPage.html "user" is stored in localstorage and i'm printing the values
In AddEmploye.html the data is appended to user data stored in local storage, but when i go to MainPage.html the previous is displayed without data inserted in AddEmploye.html
How to overcome this issue.
Thank you.
MainPage.html
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
.header{
background-color:black;
position:relative;
top:0;
left:0;
width:100%;
}
.header h1{
color:white;
}
</style>
<body>
<div class="container-fluid">
<div class="header">
<h1>Employees</h1>
</div>
<!-- Add Employee area!-->
<div class="addButton">
<div class="row">
<div class="col-sm-10">
<h3>Employee Details</h3>
</div>
<div class="col-sm-2">
<form action="AddEmploye.html">
<button class="btn btn-success"><i class="fa fa-plus"></i> Add Employee</button>
</form>
</div>
</div>
<div class="row">
<div class="col-sm-9">
<div class="row">
<div class="col-xs-">
<label class="col-sm-2" for="ex1"><strong>Show entries</strong></label>
</div>
<div class="col-sm-2">
<input class="form-control" id="number" type="number" value="10" placeholder="no of entries">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="row">
<div class="col-xs-1">
<label class="col-sm-2" for="ex1"><strong>Search</strong></label>
</div>
<div class="col-sm-8">
<input type="text" onkeyup="searchTable()" id="myInput" name="employe" width="20rem"placeholder="search for Employee" class="form-control">
</div>
</div>
</div>
</div>
</div>
<!-- Employee Details area-->
<div class="table-responsive" >
<table class="table table-bordered table-striped" id="myTable" data-pagination="true">
<thead>
<tr>
<th data-field="email">Email</th>
<th data-field="image">Image</th>
<th data-field="status">Is Active</th>
<th data-field="mobile">Mobile</th>
<th data-field="college">College</th>
<th data-field="name">Actions</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!--modal content-->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header bg-success">
<h4>Toggle Employe Status</h4>
<button type="button" class="close" data-dismiss="modal">×</button><br>
</div>
<div class="modal-body">
<p style="color:red">Are you sure you want to disable this user?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<!--Script for local storage -->
<script>
var user = {
"employee": [
{
"fName":"xxx",
"lName":"yyy",
"mobile":"12345678987",
"email":"xxx.xxx888#gmail.com",
"image":'<img src="/home/chintu/Pictures/max volume.png" height="90" width="90"><br>',
"college":"IIT",
"status":'<i class="fa fa-times-circle" style="color:red; font-size:3em" data-toggle="modal" data-target="#myModal"></i>'
},
{
"fName":"YYY",
"lName":"YYY",
"mobile":"98765434567",
"email":"yyy.yyy111#gmail.com",
"image":'<img src="/home/chintu/Pictures/max volume.png" height="90" width="90"><br>',
"college":"NIT",
"status":'<i class="fa fa-check-circle" style="color:green; font-size:3em" data-toggle="modal" data-target="#myModal"></i>'
},
]
};
var Data=JSON.stringify(user);
localStorage.setItem("userData", Data);
//get the stored data
var Name=localStorage.getItem("userData");
//parse the data to JSON
var Obj=JSON.parse(Name);
//for debugging
console.log(Obj);
var i;
var k=Obj.employee.length;
console.log(k);
for(i=0;i<k;i++){
var table = document.getElementById("myTable");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
cell1.innerHTML=Obj.employee[i].email;
cell2.innerHTML=Obj.employee[i].image;
cell3.innerHTML=Obj.employee[i].status;
cell4.innerHTML=Obj.employee[i].mobile;
cell5.innerHTML=Obj.employee[i].college;
cell6.innerHTML='<button class="btn btn-warning" onclick="deleteRow(this)"><span style="color:white"><i class="fa fa-edit"></i> Delete</span></button>';
}
function deleteRow(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("myTable").deleteRow(i);
delete Obj.employee[0];
console.log(Obj);
}
</script>
<!--Javascipt -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
AddEmploye.html
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
.header{
background-color:black;
position:relative;
top:0;
left:0;
width:100%;
}
.header h1{
color:white;
}
</style>
<body>
<div class="container-fluid">
<div class="header">
<h1>Add Employees</h1>
</div>
<h2>Add Employee</h2>
<form name="details" onsubmit="addDetails()" method="post">
<div class="row">
<div class="col-sm-6">
<strong><label for="FirstName">FirstName *</label></strong>
<input type="text" class="form-control" name="fname">
</div>
<div class="col-sm-6">
<strong><label for="FirstName">Branch *</label></strong>
<select class="form-control" placeholder="--Select Branch--" name="branch">
<option class="form-control" value="CSE">CSE</option>
<option class="form-control" value="ECE">ECE</option>
<option class="form-control" value="IT">IT</option>
<option class="form-control" value="MANAGEMENT">MANAGEMENT</option>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<strong><label for="FirstName">LastName *</label></strong>
<input type="text" class="form-control" name="lname">
</div>
<div class="col-sm-6">
<strong><label for="FirstName">Date of Joining *</label></strong>
<input type="date" name="date" class="form-control">
</div>
</div>
<div class="row">
<div class="col-sm-6">
<strong><label for="FirstName">Mobile Number *</label></strong>
<input type="text" class="form-control" name="mobile">
</div>
<div class="col-sm-6">
<strong><label for="FirstName">Stream *</label></strong>
<select class="form-control" placeholder="--Select Branch--" name="stream">
<option class="form-control" value="CSE">CSE</option>
<option class="form-control" value="ECE">ECE</option>
<option class="form-control" value="IT">IT</option>
<option class="form-control" value="MANAGEMENT">MANAGEMENT</option>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<strong><label for="DOB">Date of Birth *</label></strong>
<input type="date" name="dob" class="form-control">
</div>
<div class="col-sm-6">
<strong><label for="FirstName">Language *</label></strong>
<select class="form-control" placeholder="--Select Language--" name="language">
<option class="form-control" value="Telugu">Telugu</option>
<option class="form-control" value="English">English</option>
<option class="form-control" value="Hindi">Hindi</option>
<option class="form-control" value="Oriya">Oriya</option>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<strong><label for="DOB">Email *</label></strong>
<input type="email" name="email" class="form-control">
</div>
<div class="col-sm-6">
<strong><label for="FirstName">Photograph *</label></strong>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<strong><label for="DOB">Gender *</label></strong><br>
<input name="gender" value="male" type="radio"/>
<label for="male">Male </label>
<input name="gender" value="female" type="radio"/>
<label for="female">Female </label>
</div>
<div class="col-sm-6">
</div>
</div>
<div class="row">
<div class="col-sm-6">
<strong><label for="DOB">College *</label></strong>
<select class="form-control" placeholder="--Select College--" name="college">
<option class="form-control" value="RGUKT">RGUT</option>
<option class="form-control" value="VIT">VIT</option>
<option class="form-control" value="IIIT">IIIT</option>
<option class="form-control" value="IIT">IIT</option>
</select>
</div>
<div class="col-sm-6">
</div>
</div>
<div class="row">
<div class="col-sm-6">
<strong><label for="DOB">Qualification *</label></strong>
<select class="form-control" placeholder="--Select College--" name="qualification">
<option class="form-control" value="BTECH">BTech</option>
<option class="form-control" value="MTECH">MTech</option>
<option class="form-control" value="MBA">MBA</option>
</select>
</div>
<div class="col-sm-6">
</div>
</div>
<div class="row">
<div class="col-sm-6">
<strong><label for="DOB">Year of Graduation *</label></strong>
<select class="form-control" placeholder="--Select Year--" name="yog">
<option class="form-control" value="2017">2017</option>
<option class="form-control" value="2018">2018</option>
<option class="form-control" value="2019">2019</option>
</select>
</div>
<div class="col-sm-6">
<strong><label for="DOB"> </label></strong><br>
<button class="btn btn-success"type="submit">Add</button>
</div>
</div>
</form>
</div>
<script>
var Name=localStorage.getItem("userData");
var Obj=JSON.parse(Name);
console.log(Obj);
function addDetails(){
var fName=document.details.fname.value;
var lName=document.details.lname.value;
var branch=document.details.branch.value;
var mobile=document.details.mobile.value;
var doj=document.details.date.value;
var stream=document.details.stream.value;
var dob=document.details.dob.value;
var language=document.details.language.value;
var email=document.details.email.value;
var gender=document.details.gender.value;
var college=document.details.college.value;
var qualification=document.details.qualification.value;
var yog=document.details.yog.value;
Obj.employee.push(
{
"fName":fName,
"lName":lName,
"mobile":mobile,
"email":email,
"image":'<img src="/home/chintu/Pictures/max volume.png" height="90" width="90"><br>',
"college":college,
"status":'<i class="fa fa-check-circle" style="color:green; font-size:3em" data-toggle="modal" data-target="#myModal"></i>'
}
);
console.log(Obj);
var Data=JSON.stringify(Obj);
//store the string format data in local storage
localStorage.setItem("userData", Data);
window.location='MainPage.html';
}
</script>
</body>
</html>

Solution
In MainPage.html I noticed you were running localStorage.setItem("userData", Data);, well this would override any data that's being added from AddEmploye.html, so what I did was check to see if userData existed in the localStorage, if not, then set it, otherwise continue.
You need to be aware, using setItem will just flat out override the data, not append to it. It's like doing the following:
var arr = [1];
arr = [2];
Whereas you want to be doing something more like:
var arr = [];
arr.push(1);
arr.push(2);
Edit
Turns out your solution was already kinda there, it was just one of those silly mistakes! Don't worry, even the best of us do silly things like this from time to time.
Hope this fixes your problem! :)
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
.header{
background-color:black;
position:relative;
top:0;
left:0;
width:100%;
}
.header h1{
color:white;
}
</style>
<body>
<div class="container-fluid">
<div class="header">
<h1>Employees</h1>
</div>
<!-- Add Employee area!-->
<div class="addButton">
<div class="row">
<div class="col-sm-10">
<h3>Employee Details</h3>
</div>
<div class="col-sm-2">
<form action="AddEmploye.html">
<button class="btn btn-success"><i class="fa fa-plus"></i> Add Employee</button>
</form>
</div>
</div>
<div class="row">
<div class="col-sm-9">
<div class="row">
<div class="col-xs-">
<label class="col-sm-2" for="ex1"><strong>Show entries</strong></label>
</div>
<div class="col-sm-2">
<input class="form-control" id="number" type="number" value="10" placeholder="no of entries">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="row">
<div class="col-xs-1">
<label class="col-sm-2" for="ex1"><strong>Search</strong></label>
</div>
<div class="col-sm-8">
<input type="text" onkeyup="searchTable()" id="myInput" name="employe" width="20rem"placeholder="search for Employee" class="form-control">
</div>
</div>
</div>
</div>
</div>
<!-- Employee Details area-->
<div class="table-responsive" >
<table class="table table-bordered table-striped" id="myTable" data-pagination="true">
<thead>
<tr>
<th data-field="email">Email</th>
<th data-field="image">Image</th>
<th data-field="status">Is Active</th>
<th data-field="mobile">Mobile</th>
<th data-field="college">College</th>
<th data-field="name">Actions</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!--modal content-->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header bg-success">
<h4>Toggle Employe Status</h4>
<button type="button" class="close" data-dismiss="modal">×</button><br>
</div>
<div class="modal-body">
<p style="color:red">Are you sure you want to disable this user?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<!--Script for local storage -->
<script>
var user = {
"employee": [
{
"fName":"xxx",
"lName":"yyy",
"mobile":"12345678987",
"email":"xxx.xxx888#gmail.com",
"image":'<img src="/home/chintu/Pictures/max volume.png" height="90" width="90"><br>',
"college":"IIT",
"status":'<i class="fa fa-times-circle" style="color:red; font-size:3em" data-toggle="modal" data-target="#myModal"></i>'
},
{
"fName":"YYY",
"lName":"YYY",
"mobile":"98765434567",
"email":"yyy.yyy111#gmail.com",
"image":'<img src="/home/chintu/Pictures/max volume.png" height="90" width="90"><br>',
"college":"NIT",
"status":'<i class="fa fa-check-circle" style="color:green; font-size:3em" data-toggle="modal" data-target="#myModal"></i>'
},
]
};
var Data=JSON.stringify(user);
if (localStorage.getItem("userData") === null || typeof localStorage.getItem("userData") === "undefined") {
localStorage.setItem("userData", Data);
}
//get the stored data
var Name=localStorage.getItem("userData");
//parse the data to JSON
var Obj=JSON.parse(Name);
//for debugging
console.log(Obj);
var i;
var k=Obj.employee.length;
console.log(k);
for(i=0;i<k;i++){
var table = document.getElementById("myTable");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
cell1.innerHTML=Obj.employee[i].email;
cell2.innerHTML=Obj.employee[i].image;
cell3.innerHTML=Obj.employee[i].status;
cell4.innerHTML=Obj.employee[i].mobile;
cell5.innerHTML=Obj.employee[i].college;
cell6.innerHTML='<button class="btn btn-warning" onclick="deleteRow(this)"><span style="color:white"><i class="fa fa-edit"></i> Delete</span></button>';
}
function deleteRow(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("myTable").deleteRow(i);
delete Obj.employee[0];
console.log(Obj);
}
</script>
<!--Javascipt -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Edit 2
I have the solution to redirect the user to MainPage.html included below.
AddEmployee.html
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
.header{
background-color:black;
position:relative;
top:0;
left:0;
width:100%;
}
.header h1{
color:white;
}
</style>
<body>
<div class="container-fluid">
<div class="header">
<h1>Add Employees</h1>
</div>
<h2>Add Employee</h2>
<form name="details" onsubmit="return addDetails();" method="post">
<div class="row">
<div class="col-sm-6">
<strong><label for="FirstName">FirstName *</label></strong>
<input type="text" class="form-control" name="fname">
</div>
<div class="col-sm-6">
<strong><label for="FirstName">Branch *</label></strong>
<select class="form-control" placeholder="--Select Branch--" name="branch">
<option class="form-control" value="CSE">CSE</option>
<option class="form-control" value="ECE">ECE</option>
<option class="form-control" value="IT">IT</option>
<option class="form-control" value="MANAGEMENT">MANAGEMENT</option>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<strong><label for="FirstName">LastName *</label></strong>
<input type="text" class="form-control" name="lname">
</div>
<div class="col-sm-6">
<strong><label for="FirstName">Date of Joining *</label></strong>
<input type="date" name="date" class="form-control">
</div>
</div>
<div class="row">
<div class="col-sm-6">
<strong><label for="FirstName">Mobile Number *</label></strong>
<input type="text" class="form-control" name="mobile">
</div>
<div class="col-sm-6">
<strong><label for="FirstName">Stream *</label></strong>
<select class="form-control" placeholder="--Select Branch--" name="stream">
<option class="form-control" value="CSE">CSE</option>
<option class="form-control" value="ECE">ECE</option>
<option class="form-control" value="IT">IT</option>
<option class="form-control" value="MANAGEMENT">MANAGEMENT</option>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<strong><label for="DOB">Date of Birth *</label></strong>
<input type="date" name="dob" class="form-control">
</div>
<div class="col-sm-6">
<strong><label for="FirstName">Language *</label></strong>
<select class="form-control" placeholder="--Select Language--" name="language">
<option class="form-control" value="Telugu">Telugu</option>
<option class="form-control" value="English">English</option>
<option class="form-control" value="Hindi">Hindi</option>
<option class="form-control" value="Oriya">Oriya</option>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<strong><label for="DOB">Email *</label></strong>
<input type="email" name="email" class="form-control">
</div>
<div class="col-sm-6">
<strong><label for="FirstName">Photograph *</label></strong>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<strong><label for="DOB">Gender *</label></strong><br>
<input name="gender" value="male" type="radio"/>
<label for="male">Male </label>
<input name="gender" value="female" type="radio"/>
<label for="female">Female </label>
</div>
<div class="col-sm-6">
</div>
</div>
<div class="row">
<div class="col-sm-6">
<strong><label for="DOB">College *</label></strong>
<select class="form-control" placeholder="--Select College--" name="college">
<option class="form-control" value="RGUKT">RGUT</option>
<option class="form-control" value="VIT">VIT</option>
<option class="form-control" value="IIIT">IIIT</option>
<option class="form-control" value="IIT">IIT</option>
</select>
</div>
<div class="col-sm-6">
</div>
</div>
<div class="row">
<div class="col-sm-6">
<strong><label for="DOB">Qualification *</label></strong>
<select class="form-control" placeholder="--Select College--" name="qualification">
<option class="form-control" value="BTECH">BTech</option>
<option class="form-control" value="MTECH">MTech</option>
<option class="form-control" value="MBA">MBA</option>
</select>
</div>
<div class="col-sm-6">
</div>
</div>
<div class="row">
<div class="col-sm-6">
<strong><label for="DOB">Year of Graduation *</label></strong>
<select class="form-control" placeholder="--Select Year--" name="yog">
<option class="form-control" value="2017">2017</option>
<option class="form-control" value="2018">2018</option>
<option class="form-control" value="2019">2019</option>
</select>
</div>
<div class="col-sm-6">
<strong><label for="DOB"> </label></strong><br>
<button class="btn btn-success"type="submit">Add</button>
</div>
</div>
</form>
</div>
<script>
var Name=localStorage.getItem("userData");
var Obj=JSON.parse(Name);
console.log(Obj);
function addDetails(){
var fName=document.details.fname.value;
var lName=document.details.lname.value;
var branch=document.details.branch.value;
var mobile=document.details.mobile.value;
var doj=document.details.date.value;
var stream=document.details.stream.value;
var dob=document.details.dob.value;
var language=document.details.language.value;
var email=document.details.email.value;
var gender=document.details.gender.value;
var college=document.details.college.value;
var qualification=document.details.qualification.value;
var yog=document.details.yog.value;
Obj.employee.push(
{
"fName":fName,
"lName":lName,
"mobile":mobile,
"email":email,
"image":'<img src="/home/chintu/Pictures/max volume.png" height="90" width="90"><br>',
"college":college,
"status":'<i class="fa fa-check-circle" style="color:green; font-size:3em" data-toggle="modal" data-target="#myModal"></i>'
}
);
console.log(Obj);
var Data=JSON.stringify(Obj);
//store the string format data in local storage
localStorage.setItem("userData", Data);
window.location='MainPage.html';
return false;
}
</script>
</body>
</html>
Edit 3
This seems to work just fine for myself. I highly suggest you look at re-writing this function, just because I banged this together in like 30 seconds, it's messy, I appreciate that, but nevertheless it works.
function deleteRow(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("myTable").deleteRow(i);
delete Obj.employee[0];
var employees = JSON.parse(localStorage.getItem("userData")).employee.reverse();
var tempArray = [];
for (var j = - 1, s = employees.length - 1; j < s; s--) {
if (s !== (i - 1)) { tempArray.push(employees[s]); }
}
employees = tempArray;
var update = JSON.stringify({employee:employees});
localStorage.setItem("userData", update);
}
Edit 4
Okay, I'm not sure if this is 100% bullet proof, I've only vaguely tested it.
But I was just playing around with the JS inside of MainPage.html and I came up with this, it worked for my tests that I threw at it, but again, I've not done detailed testing, I'm sure that if you notice any bugs, you'll be able to sort them out? ;)
FYI I've rushed the hell outta this just to help you, I know it works to SOME degree or another, but if you notice any bugs, again, I'm sure you can work it out? ... If not, drop me an email and I'll re-do the whole thing for you, I'll even encapsulate it all into one nice object! ;)
... Also seeing as I've given you a link to my website, I suggest that you go on there and check out the git link that's provided on my web page... Take a look at the wishlist implementation, I appreciate I rammed everything into one large file, so if you struggle to find it, just press ctrl + f 'WishList', I've implemented a generic wishList using local storage! :P
var i;
var MAX_ROWS = 5;
var indentations = [0, MAX_ROWS];
var k=Obj.employee.length;
console.log(k);
for(i = k-1; i > 0; i--){
var table = document.getElementById("myTable");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
cell1.innerHTML=Obj.employee[i].email;
cell2.innerHTML=Obj.employee[i].image;
cell3.innerHTML=Obj.employee[i].status;
cell4.innerHTML=Obj.employee[i].mobile;
cell5.innerHTML=Obj.employee[i].college;
cell6.innerHTML='<button class="btn btn-warning" onclick="deleteRow(this)"><span style="color:white"><i class="fa fa-edit"></i> Delete</span></button>';
if (i <= MAX_ROWS) {
var endVal = indentations[indentations.length - 1];
if (i % 5 === 0) { indentations.push(i + MAX_ROWS); }
else if (endVal < k && i == 1) {
endVal = endVal + MAX_ROWS;
indentations.push(endVal);
}
}
}
renderTbl(0, 5);
console.log(indentations);
var before = document.getElementById("myModal");
for (var j = 0, s = indentations.length; j < s; j++) {
var start = indentations[j];
var end = start + MAX_ROWS;
var btn = document.createElement("div");
btn.className = "btn";
btn.innerHTML = start + " ... " + end;
before.insertAdjacentElement("beforeBegin", btn);
}
var btns = document.querySelectorAll(".btn");
for (var j = 0, s = btns.length; j < s; j++) {
var btn = btns[j];
btn.addEventListener("click", function(){
var arr = this.textContent.split("...");
var start = arr[0];
var end = arr[1];
renderTbl(start, end);
});
}
function renderTbl (start, end, arr) {
var table = document.getElementById("myTable");
var rows = table.querySelectorAll("tr");
console.log(rows);
end = parseInt(end);
start = parseInt(start) + 1;
console.log(start) + 1;
console.log(end);
for (var i = 0; i < k; i++) {
console.log(rows[i].innerHTML);
if (i < start || i > end) {
rows[i].style.display = "none";
} else {
rows[i].style.display = "table-row";
}
}
rows[0].style.display = "table-row";
}

Javascript in HTML forms, Accumulating Total Realtime

I have a bit of a problem with my HTML and JAVASCRIPT Combination.
I'm trying to create a page where I am able to add values by a certain parameter. It's it in this picture of how it would work.
The whole page:
Here's my code to this overall HTML Page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Naawan Receipt System</title>
<link rel="stylesheet" href="static/header-second-bar.css">
<link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>
</head>
<body>
<header class="header-two-bars">
<div class="header-first-bar">
<div class="header-limiter">
<h1>Municipality<span>Receipt</span></h1>
<nav>
FORM
LOGS
QUERY
USER
</nav>
Logout
</div>
</div>
<div class="header-second-bar">
<div class="header-limiter">
<h2>User: {{ user }}</h2>
<nav>
<i class="fa fa-comments-o"></i> Nature of Collection
<i class="fa fa-file-text"></i> Results
<i class="fa fa-group"></i> Participants
<i class="fa fa-cogs"></i> Settings
</nav>
</div>
</div>
</header>
<!-- CONTENT HERE. -->
<link rel="stylesheet" href="static/indextest.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="static/indextest.css">
<link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>
<div class="jumbotron jumbotron-sm">
<div class="container" id = "contact">
<div class="row">
<div class="col-sm-12 col-lg-12">
<h1 class="h1">
Accountable Form 51 <small>Made easier</small></h1>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12" style="display: inline-block;">
<div class="well well-sm">
<form>
<div class="row">
<div class="col-md-6" style="display: inline-block; ">
<div class="form-group">
<label for="name">
O.R Number</label>
<input type="text" class="form-control" id="name" placeholder="Enter O.R Number" required="required" />
</div>
<div class="form-group">
<label for="email">
Payor</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span>
</span>
<input type="text" class="form-control" name = "payor" id="payor" placeholder="Enter Full Name" required="required" /></div>
</div>
<div class="form-group">
<label for="subject">
Nature of Payment</label>
<div id="RadioGroup">
<br>
<input type="radio" name="paymentmethod" checked="checked" value="CASH"> Cash<br>
<input type="radio" name="paymentmethod" value="CHECK"> Check<br>
<div id="PaymentsCHECK" class="desc" style="display: none;">
<br>
Drawee Bank<input type="text" name="dbank">
Number<input type="text" name="dNum">
Date<input type="text" name="dDate">
</div>
<input type="radio" name="paymentmethod" value="MONEY"> Money Order<br>
<div id="PaymentsMONEY" class="desc" style="display: none;">
<br>
<input type="text" name="dbank">Money Order No.
</div>
</div>
</div> <!-- FORM GROUP END -->
<div class="form-group">
<label for="name">
Memo</label>
<textarea name="message" id="message" class="form-control" rows="5" cols="25" required="required"
placeholder="Message"></textarea>
</div>
</div><!-- FIRST COL6 END -->
</div><br><br><br><br><!-- ROW END -->
<div class="col-md-5" style="display: inline-block; ">
<div class="jumbotron">
<h2>Type in Nature of Collection...</h2>
<form>
<input class="form-control input-lg" id="form" list="languages" placeholder="Search" type="text" required>
<br>
<input class="form-control input-lg" id="amount" list="languages" placeholder="Amount" type="number" required>
<br>
<button onclick="addRow(); return false;">Add Item</button>
</form>
<datalist id="languages">
{% for row in rows %}
<option value = "{{row[0]}}">
{% endfor %}
</datalist>
</div> <!-- JUMBO END -->
<h6> <label>Date:<span></span>
</label> {{date}}</h6>
<h3><fieldset disabled>
<label>Total </label>
<input type = "text" name = "total" id="total"><br></p>
</fieldset></h3>
</div><!-- COL5 END -->
<!-- </div> --><!-- REMAIN OR NOT? DEPENDS ON DEBUG PROCESS LATER -->
<div class="col-md-6" style="display: inline-block;">
<div class="jumbotron">
<h2>Nature of Collection</h2>
</div>
<div>
<!-- ACCUMULATION TABLE STARTS -->
<table id="datatable" class="table table-striped table-bordered" cellspacing="0" width="100%">
<tr>
</tr>
<tbody>
</tbody>
</table>
<!-- </form> --> <!-- CHECK LATER -->
<datalist id="languages">
{% for row in rows %}
<option value={{row[0]}}></option>
{% endfor %}
</datalist>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-primary pull-right" id="btnContactUs">
Submit Form</button>
<br>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript">
/*EDIT HERE LATER*/
$(document).ready(function() {
$("input[name$='paymentmethod']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#Payments" + test).show();
});
});
</script>
<script type="text/javascript">
function deleteRow(o){
var p=o.parentNode.parentNode;
p.parentNode.removeChild(p);
}
function addRow()
{
var table = document.getElementById("datatable"),
newRow = table.insertRow(table.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
name = document.getElementById("form").value,
amount = document.getElementById("amount").value;
delete1 = delete1 = '<input type="button" class="btn btn-danger" class="glyphicon glyphicon-trash"id="delete" value="Delete" onclick="deleteRow(this)">';
cell1.innerHTML = name;
cell2.innerHTML = amount;
cell3.innerHTML = delete1;
}
</script>
<script type="text/javascript">
function findTotal(){
var arr = document.getElementsByName('qty');
var tot=0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('total').value = tot;
}
</script>
</body>
</html>
So I am done in that part, this time I wanted to add the values of each amount added and display it real-time on the Total inputbox. So I put an id to the cell which the amounts will be generate in the javascript:
Before:
function addRow()
{
var table = document.getElementById("datatable"),
newRow = table.insertRow(table.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
name = document.getElementById("form").value,
amount = document.getElementById("amount").value;
delete1 = delete1 = '<input type="button" class="btn btn-danger" class="glyphicon glyphicon-trash"id="delete" value="Delete" onclick="deleteRow(this)">';
cell1.innerHTML = name;
cell2.innerHTML = amount;
cell3.innerHTML = delete1;
}
After:
function addRow()
{
var table = document.getElementById("datatable"),
newRow = table.insertRow(table.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
name = document.getElementById("form").value,
amount = document.getElementById("amount").value;
delete1 = delete1 = '<input type="button" class="btn btn-danger" class="glyphicon glyphicon-trash"id="delete" value="Delete" onclick="deleteRow(this)">';
cell1.innerHTML = name;
cell2.innerHTML = amount;
cell2.id = "qty
cell3.innerHTML = delete1;
}
"qty" here will match the ID's of all entry on cell 2 and will add it and will display it on the id total.
But when I do this the value box at the top side pops out an error:
It prompts me to enter a value on the unrelated boxes.
I also tried separating them by forms but it didn't work.
I tried this on the other forms I have and its working, I was just using a checkbox plus textbox, however on this page I am unable to do it. What should I do on this case?
A checklist just to be clear:
I generated ID's for each cell added
I used that ID to evaluate on a javascript script
The accumulated total was supposed to go to the ID "total" but it didn't happen.
I already tried separating the forms, but this time it only reloaded and the entries weren't added.
I have a separate button for saving all fields named "Submit Form"
Any input or ways how to do this in your opinion?

The reason you're getting this error is due to nested forms, which are not a constructed supported by browsers. Make sure you close your first form before starting the new one - then validation won't cross-contaminate.
To be clear, this has nothing to do with the way you're totalling your values (though that has some issues to be resolved on its own, e.g. you're accessing the value of your elements, while you've never set it - instead you want to be getting their innerHtml).

Array in ng-repeat isn't showing

I have a problem with my ng-repeat. I am working in a project and I'm designing a gradecontrol system. I have a form that when the user clicks in the button, it adds the $scope.grade to an array.
In the table below, it was supposed to show the array. But it isn't showing.
<div class="container">
<h2>Controle de Notas:</h2>
<form role="form">
<div class="form-group">
<label for="inputNameSubject"> Subject's Name</label>
<input type="text" class="form-control" ng-model="grade.name" placeholder="Enter the name of the subject" />
<p>{{grade.name}}</p>
</div>
<div class="form-group">
<label for="inputTeacherSubject"> Teacher's Name</label>
<input type="text" class="form-control" ng-model="grade.teacher" placeholder="Enter the name of the teacher"/>
</div>
<div class="form-group">
<label for="inputScoreSubject"> Grade </label>
<input type="text" class="form-control" ng-model="grade.score" placeholder="Enter your grade"/>
</div>
<button type="button" class="btn btn-primary" ng-click="pushToArray() "> Submit your score!</button>
</form>
</div>
<br><br><br>
<div class="container">
<table class="table">
<th ng-repeat="head in tableHeadings"> {{head}}</th>
<tr ng-repeat="gr in grades track by $index" ></tr>
<td > {{gr.name}}</td>
<td>{{gr.teacher}}</td>
<td> {{gr.score}}</td>
</table>
</div>
angular.module('myProjectApp')
.controller('MainCtrl', function($scope) {
$scope.grade = {};
$scope.grades = [];
$scope.tableHeadings = ['Subject', ' Teacher', 'Grade'];
$scope.pushToArray = function(){
$scope.grades.push($scope.grade);
console.log($scope.grades);
}
});

Because you close off your tr element so your td elements are not considered in the same scope as your ng-repeat and do not get printed correctly. Not to mention it is also not valid html.
<tr ng-repeat="gr in grades track by $index" ></tr>
<td > {{gr.name}}</td>
<td>{{gr.teacher}}</td>
<td> {{gr.score}}</td>
should be
<tr ng-repeat="gr in grades track by $index" >
<td > {{gr.name}}</td>
<td>{{gr.teacher}}</td>
<td> {{gr.score}}</td>
</tr>

Patrick beat me to it!
angular.module('myProjectApp', [])
.controller('MainCtrl', function($scope) {
$scope.grade = {};
$scope.grades = [];
$scope.tableHeadings = ['Subject', ' Teacher', 'Grade'];
$scope.pushToArray = function() {
$scope.grades.push($scope.grade);
console.log(JSON.stringify($scope.grades));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myProjectApp" ng-controller="MainCtrl">
<div class="container">
<h2>Controle de Notas:</h2>
<form role="form">
<div class="form-group">
<label for="inputNameSubject">Subject's Name</label>
<input type="text" class="form-control" ng-model="grade.name" placeholder="Enter the name of the subject" />
<p>{{grade.name}}</p>
</div>
<div class="form-group">
<label for="inputTeacherSubject">Teacher's Name</label>
<input type="text" class="form-control" ng-model="grade.teacher" placeholder="Enter the name of the teacher" />
</div>
<div class="form-group">
<label for="inputScoreSubject">Grade</label>
<input type="text" class="form-control" ng-model="grade.score" placeholder="Enter your grade" />
</div>
<button type="button" class="btn btn-primary" ng-click="pushToArray() ">Submit your score!</button>
</form>
</div>
<br>
<br>
<br>
<div class="container">
<table class="table">
<th ng-repeat="head in tableHeadings">{{head}}</th>
<tr ng-repeat="gr in grades">
<td>{{gr.name}}</td>
<td>{{gr.teacher}}</td>
<td>{{gr.score}}</td>
</tr>
</table>
</div>
</body>

We Keep Coding

JavaScript is the programming language of the Web.

Getting Javascript Generated Values to Flask - javascript

Related

How to create a unique ID on each function call to a drop down list Asp.net

Search filter in angular js

How to get Data from another page Local Storage?

Javascript in HTML forms, Accumulating Total Realtime

Array in ng-repeat isn't showing

Categories

Resources