How to store variable values of table in angularjs - javascript

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>User Info</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body data-ng-app="MyAPP" ng-controller="myController">
<div>
<h1><u>User Information </u></h1>
<table style="width 100%" align="center">
<caption>Enter the information below</caption>
<tr>
<th>Entry</th>
<th>Input</th>
<th>Input Stored</th>
</tr>
<tr>
<td>Enter Your id </td>
<td><input type="number" ng-model="id" placeholder="Enter 4 digit id here" pattern="[1-9]{1}[0-9]{3}"></td>
<td><span ng-bind="id"></span></td>
</tr>
<tr>
<td>Enter your full name </td>
<td><input type="text" ng-model="name" placeholder="Enter full name here" pattern="[a-zA-Z\s]+"></td>
<td><span ng-bind="name"></span></td>
</tr>
</table>
</div>
<div class="btn-group" align="center">
<button type="button" ng-click="myFunction()" id="one" class='btn btn-default btn-success btn-lg btn1'>Save Entry</button>
<button type="button" ng-click="close_window()" id="two" class='btn btn-default btn-success btn-lg btn2'>Exit</button>
</div>
<script>
var admin = angular.module('MyAPP', []);
admin.controller('myController', function ($scope) {
$scope.myFunction = function () {
var change = document.getElementById("one")
if (change.innerHTML == "Save Entry") {
change.innerHTML = "Saved!";
} else {
change.innerHTML = "Save Entry";
}
}
$scope.close_window = function () {
if (confirm("Close Window?")) {
close();
}
});
</script>
</body>
</html>
I'm trying to save the content entered in fields using localStorage so that i can display it later. But as soon as i add the controller field the button's stop working and their function is not executed. Also how do i store these varibles, in code there are 4 variables so that i can show them again in a table?

Related

Can't edit the newly added rows

I cannot edit the rows that are newly added. I have included the class in the newly added row. But when I click the edit button in the newly added row, its not working. Also the edit button is not working once I edit the row. I can't edit the same row two times. The function is not calling when I click the button edit.
Can u guys help me out?
Following is the reproduction of my issue -
$(document).ready(function(){
$('#add').on('click',()=>{
$("#popup").dialog({
width:400,
modal:true,
resizeable:false,
buttons:{
"Submit":function(){
var addrow = '<tr><td><input type="checkbox" class="select"></td><td>'+
$('#name').val()+'</td><td>'
+$("#age").val()+
'</td><td>'+
'<button type="button" class="edit" >Edit</button>'+
'</td></tr>';
$('#table tbody').append(addrow);
$('.add-input').val('');
$(this).dialog("close");
}
}
});
})
$("#delete").on("click", function () {
$('table tr').has('input:checked').remove();
})
$('#deleteall').on('click',function(){
$('tbody tr').remove();
})
$('.edit').on('click',(event)=>{
$("#popup").dialog({
width:400,
modal:true,
resizeable:false,
buttons:{
"Submit":function(){
var name = '<tr><td><input type="checkbox" class="select"></td><td>'+
$('#name').val()+'</td><td>'
+$("#age").val()+
'</td><td>'+
'<button type="button" class="edit">Edit</button>'+
'</td></tr>';
$(event.currentTarget).parents('tr').replaceWith(name);
console.log($('tr'));
$('.add-input').val('');
$(this).dialog("close");
}
}
})
})
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>table edit</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<div class="table-wrap">
<table id="table" border="1">
<thead>
<tr>
<th>Select</th>
<th>Name</th>
<th>Age</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="select"></td>
<td>Sakthi</td>
<td>20</td>
<td><button type="button" class="edit" >Edit</button></td>
</tr>
<tr>
<td><input type="checkbox" class="select"></td>
<td>Prabhu</td>
<td>21</td>
<td><button type="button" class="edit" >Edit</button></td>
</tr>
</tbody>
</table>
</div>
<div class="op">
<button type="button" class="mod" id="add">Add</button>
<button type="button" class="mod" id="delete">Delete</button>
<button type="button" class="mod" id="deleteall">Delete All</button>
</div>
<div class="popup" id="popup" style="display:none;">
<input type="text" placeholder="Name" class="add-input" id="name">
<input type="number" placeholder="Age" class="add-input" id="age">
</div>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript" src="tab-mod.js"></script>
</body>
</html>
Can I do without using onclick() ? How to do so?

The problem is that when you load the onclick listeners for .edit there you have only two buttons, and the script don't know news rows.
If you will add dynamically rows it need another context to can execute it.
Just replace this:
$('.edit').on('click',(event)=>{...})
by
$("tbody").on("click", ".edit", (event) =>{...})
Update:
you could take name & age when you open the edit box like this:
$(document).ready(function(){
$('#add').on('click',()=>{
$("#popup").dialog({
width:400,
modal:true,
resizeable:false,
buttons:{
"Submit":function(){
var addrow = '<tr><td><input type="checkbox" class="select"></td><td>'+
$('#name').val()+'</td><td>'
+$("#age").val()+
'</td><td>'+
'<button type="button" class="edit" >Edit</button>'+
'</td></tr>';
$('#table tbody').append(addrow);
$('.add-input').val('');
$(this).dialog("close");
}
}
});
})
$("#delete").on("click", function () {
$('table tr').has('input:checked').remove();
})
$('#deleteall').on('click',function(){
$('tbody tr').remove();
})
$("tbody").on("click", ".edit", event => {
let $btnParentSiblings = $(event.currentTarget).parent().siblings('td')
let $name = $btnParentSiblings[1];
let $age = $btnParentSiblings[2];
$("#popup > #name").val($($name).html());
$("#popup > #age").val($($age).html());
$("#popup").dialog({
width:400,
modal:true,
resizeable:false,
buttons:{
"Submit":function(){
var name = '<tr><td><input type="checkbox" class="select"></td><td>'+
$('#name').val()+'</td><td>'
+$("#age").val()+
'</td><td>'+
'<button type="button" class="edit">Edit</button>'+
'</td></tr>';
$(event.currentTarget).parents('tr').replaceWith(name);
console.log($('tr'));
$('.add-input').val('');
$(this).dialog("close");
}
}
})
})
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>table edit</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<div class="table-wrap">
<table id="table" border="1">
<thead>
<tr>
<th>Select</th>
<th>Name</th>
<th>Age</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="select"></td>
<td>Sakthi</td>
<td>20</td>
<td><button type="button" class="edit" >Edit</button></td>
</tr>
<tr>
<td><input type="checkbox" class="select"></td>
<td>Prabhu</td>
<td>21</td>
<td><button type="button" class="edit" >Edit</button></td>
</tr>
</tbody>
</table>
</div>
<div class="op">
<button type="button" class="mod" id="add">Add</button>
<button type="button" class="mod" id="delete">Delete</button>
<button type="button" class="mod" id="deleteall">Delete All</button>
</div>
<div class="popup" id="popup" style="display:none;">
<input type="text" placeholder="Name" class="add-input" id="name">
<input type="number" placeholder="Age" class="add-input" id="age">
</div>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript" src="tab-mod.js"></script>
</body>
</html>

because your JavaScript code is running once the document is fully loaded and at that moment searches for all elements with edit class and assign their click event the editing method. so when you add a new element you must manually assign the method to its edit button.

popup taking first entry of the table every time

I am having table with 6 fields and there is update button in the last field, onclick of that one popup appears but popup is taking only first entry of the in the table every time even if pressing the second or third entry's update button.
Here is my JSP Code `
<%#taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<title>Report</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-sm-2"></div>
<div class="col-sm-8">
<div class="panel panel-primary">
<div class="panel-heading">Details of Students</div>
<div class="panel-body">
<button id="newbtn" type="button"
class="form-control btn btn-success">Add New Student</button>
<button id="shwbtn" type="button"
class="form-control btn btn-success">show</button>
<div style="margin-top: 40px;">
<table class="table table-bordered" id="updatedetailsFrm">
<thead>
<tr style="background-color: #E0E0E1;">
<th>Sr.No.</th>
<th>Name</th>
<th>Surname</th>
<th>Contact No</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<s:if test="noData==true">
<s:iterator value="beanList">
<tr>
<td><s:property value="srNo" /></td>
<td><s:property value="name" /></td>
<td><s:property value="surname" /></td>
<td><s:property value="contactno" /></td>
<td><s:property value="email" /></td>
<td>
<a href="#popupLogin" data-rel="popup"
data-position-to="window" id="updateBtnfirst"
class="ui-btn ui-corner-all ui-shadow" data-transition="pop">Update</a>
<div data-role="popup" id="popupLogin" data-theme="a"
class="ui-corner-all">
<form id="updatedetailsFrm" method="post">
<div style="padding: 10px 20px;">
<h3>Update Your Data</h3>
<input id="name" placeholder="Name" type="text" name="name"
value='<s:property value="name"/>'>
<input id="surname" placeholder="Surname" type="text"
name="surname" value='<s:property value="surname"/>'>
<input id="contactno" placeholder="Contact No" type="text"
name="contactno" value='<s:property value="contactno"/>'>
<input id="email" class="disabled" placeholder="Email" type="text"
name="email" value='<s:property value="email"/>'>
<button value="update" type="button" id="updateBtn">Update</button>
</div>
</form>
</div>
<button class="btn btn-danger" id="deleteBtn">Delete</button>
</td>
</tr>
</s:iterator>
</s:if>
</table>
<s:else>
<div style="color: red;">No Data Found.</div>
</s:else>
</div>
</div>
</div>
</div>
<div class="col-sm-2"></div>
<script>
$("#updateBtn").click(function() {
var id = document.forms["updatedetailsFrm"]["email"].value;
var userName = document.forms["updatedetailsFrm"]["name"].value;
var surName = document.forms["updatedetailsFrm"]["surname"].value;
var contactNo = document.forms["updatedetailsFrm"]["contactno"].value;
window.location = "updatedetails.action?email="+id+"&name="+userName+"&surname="+surName+"&contactno="+contactNo;
})
// $('#updateBtnfirst').click(function() {
// document.getElementById("email").disabled = true;
// })
$('#newbtn').click(function() {
window.location.href = "insert.jsp";
})
$('#shwbtn').click(function() {
window.location = "report";
})
$("#deleteBtn").click(function() {
var id = $(this).closest("tr").find('td:eq(4)').text();
window.location.href = "deleterecord.action?&email=" + id;
})
</script>
</body>
</html>
`
So, my question is, popup should bring the row wise details in popup, in particular row.

Your iterator generates all of your rows with the same ID's over and over again. Update your iterator to generate unique ID's for each form in each row. I would then remove the ID from the update button and use a class instead so it's easy to bind your click event and use an HTML "data" attribute to hold the form ID value. Then when an update button is clicked, your JavaScript will be able to grab the data attribute value and then target the correct form via unique ID.
Example update button:
<button value="update" type="button" class="updateBtn" data-form-id="updatedetailsFrm-1">Update</button>
Example form ID:
<form id="updatedetailsFrm-1" method="post">
With duplicate ID's, you'll only ever retrieve the first instance of what you're trying to target in the DOM. There are other ID's in your iterator you'll want to look at too. ID's should be unique.

Make static functions to be dynamic

I am doing an exercise to learn JavaScript. I am having issues making my program dynamic. What I want to do here is:
Create two input to let the user set up the new product data.
Create a button. This button will have assigned a click event that will: 1- Get the data from the inputs. 2- Create a new product row with the data we stored.
Be able to delete all items and decrease total price based on the price of reminding item. In case there is no item, total price should be 0.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shoping</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/index.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<header>
<h1 class="h1 text-center mb">Shoping<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span></h1>
</header>
<table class="table mb">
<thead>
<tr>
<th>Products:</th>
<th>Price:</th>
<th>Quantity:</th>
<th>Total:</th>
<th>
</th>
</tr>
</thead>
<tbody id="soyTBody">
<tr id="itemSubject">
<th scope="row"><span id="productName">T-Shirts</span></th>
<td class="price1"> <span class="dolar">$</span><span id="product">15</span></td>
<td class="qty1">
<form class="form-inline">
<div class="form-group">
<label for="inputQty">QTY</label>
<input type="text" id="qty" class="form-control mx-sm-3" maxlength="3" aria-describedby="qtyItem1">
</div>
</form>
</td>
<td <span class="dolar">$</span><span id="total">0.00</span></td>
<td class="text-right">
<button class="delate btn btn-danger" type="button" onclick="removeItem()" value="delate">
<input id ="delateButton" class="delateItem" type="button" value="Delate">
</button>
</td>
</tr>
<tr id="itemSubject2">
<th scope="row"><span id="productName">Stickers</span></th>
<td class="price2"> <span class="dolar">$</span><span id="product2">2</span></td>
<td class="qty2">
<form class="form-inline">
<div class="form-group">
<label for="inputQty">QTY</label>
<input type="text" id="qty2" class="form-control mx-sm-3" maxlength="3" aria-describedby="qtyItem2">
</div>
</form>
</td>
<td <span class="dolar">$</span><span id="total2">0.00</span></td>
<td class="text-right">
<button class="delate btn btn-danger" type="button" onclick="removeItem2()" value="delate">
<input id ="delateButton" class="delateItem" type="button" value="Delate">
</button>
</td>
</tr>
<!-- <tr>
<th scope="row">Stickers</th>
<td class="price2">$1</td>
<td class="qty2">
<form class="form-inline">
<div class="form-group">
<label for="inputPassword4">QTY</label>
<input type="text" id="qty2text" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
</div>
</form>
</td>
<td class="total-2">$0.00</td>
<td class="text-right">
<button class="delate btn btn-danger" type="button" value="delate">
<span class="delateButton"><strong>Delate</strong></span>
</button>
</td>
</tr> -->
<!-- <tr>
<th scope="row">Flags</th>
<td class="price3">$2</td>
<td class="qty3"><form class="form-inline">
<div class="form-group">
<label for="inputPassword4">QTY</label>
<input type="text" id="qty3text" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
</div>
</form>
</td>
<td class="total3">$0.00</td>
<td class="text-right">
<button class="delate btn btn-danger" type="button" value="delate">
<span class="delateButton"><strong>Delate</strong></span>
</button>
</td>
</tr> -->
</tbody>
</table>
<div class="row text-right">
<button class="delate btn btn-success" onclick="getPrice();getPrice2();totalPrice2()" type="submit" value="calculatePriceButton" >
<input id ="calc-prices-button" class="calculator" type="button" value="Calculate Prices">
<!-- <span class="delateButton"><strong>Calculate Prices</strong></span> -->
</button>
</div>
<h2 class="text-center">Total Price: $<span id="totalPrice"></span></h2>
</div>
</body>
</html>
JS:
// qty
function getQty() {
var qty = document.querySelector("#qty").value;
document.querySelector("#total").innerHTML = qty;
return qty;
}
getQty();
// qty2
function getQty2() {
var qty2 = document.querySelector("#qty2").value;
document.querySelector("#total2").innerHTML = qty2;
return qty2;
}
getQty();
// Price
function getPrice() {
var price = parseInt(document.querySelector("#product").innerHTML);
document.querySelector("#total").innerHTML = price * getQty();
}
getPrice();
// Price 2
function getPrice2() {
var price2 = parseInt(document.querySelector("#product2").innerHTML);
document.querySelector("#total2").innerHTML = price2 * getQty2();
}
getPrice2();
// total Price
function totalPrice2() {
var total = parseInt(document.querySelector("#total").innerHTML);
var total2 = parseInt(document.querySelector("#total2").innerHTML);
document.querySelector("#totalPrice").innerHTML = total + total2;
}
totalPrice2();
//Romove Item
function removeItem() {
var remove = document.querySelector("#itemSubject").remove("itemSubject");
// setTimeout(function() { alert("Your shopping cart is empty"); }, 1000);
}
removeItem();
function removeItem2() {
var remove = document.querySelector("#itemSubject2").remove("itemSubject2");
// setTimeout(function() { alert("Your shopping cart is empty"); }, 1000);
}
removeItem2();

For your getPrice() and getPrice2() functions, we can make them dynamic by changing the following:
var price = parseInt(document.querySelector("#product").innerHTML);
and
var price2 = parseInt(document.querySelector("#product2").innerHTML);
These lines looks for elements with static names, instead we should give all inputs a common class name and loop through them. That way, we don't have to rely on static element IDs. For example, if we gave each input the class 'quantityinput', we can do the following:
var elements = document.getElementsByClassName("quantityinput");
for(var i=0; i<elements.length; i++) {
// Select this element and get its quantity
var this_total = elements[i].value;
// Get the price for this element by selecting the price td, then its second child
var this_price = elements[i].parentElement.parentElement.parentElement.previousSibling.childNodes[2].value;
// Select the total label for this row
var this_total_label = elements[i].parentElement.parentElement.parentElement.childNodes[1];
// Now update the total label for this row by multiplying the price and the quantity
this_total_label.value = this_total * this_price;
}
Now we don't have to worry about a certain row missing, since we iterate through all existing rows. A similar approach can be taken when calculating the total price for all rows, just loop through each rows total price, add them together then assign the total to the total price label.

the data in model personalDeatail.add value is not updated automatically. what am i doing wrong?

I'm trying to add two column data automatically but the data in model personalDeatail.add value is not updated automatically. what am i doing wrong?? I can get the added data in the input box but same data is not updated in the personalDetail.add? please help
index.html
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <script src="script/angular.min.js"></script> <script src="script/script.js"></script> <script src="script/scripts.js"></script> <title>Dynamically Add-Remove Rows from Table</title>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body ng-app="myapp" ng-controller="ListController">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<form ng-submit="addNew()">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th>
<th>Number1</th>
<th>number2</th>
<th>Add</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="personalDetail in personalDetails">
<td>
<input type="checkbox" ng-model="personalDetail.selected"/></td>
<td>
<input type="text" class="form-control" ng-model="personalDetail.num1" required/></td>
<td>
<input type="text" class="form-control" ng-model="personalDetail.num2" required/></td>
<td>
<input type="text" class="form-control" value="{{parseFloat(personalDetail.num1)+parseFloat( personalDetail.num2)}}"
></td>
</tr>
</tbody>
</table>
<div class="form-group">
<input ng-hide="!personalDetails.length" type="button" class="btn btn-danger pull-right" ng-click="remove()" value="Remove">
<input type="submit" class="btn btn-primary addnew pull-right" value="Add New">
</div>
</form>
{{personalDetails}}
</div>
</div>
</div>
</div>
</div> </body> </html>
script.js
var app = angular.module("myapp", []); app.controller("ListController", ['$scope', function($scope) {
$scope.personalDetails = [
{
'num1':'',
'num2':'',
'add':''
}];
$scope.addNew = function(personalDetail){
$scope.personalDetails.push({
'num1': "",
'num2': "",
'add': ""
});
};
$scope.parseFloat = function(value)
{
return parseFloat(value);
}
$scope.remove = function(){
var newDataList=[];
$scope.selectedAll = false;
angular.forEach($scope.personalDetails, function(selected){
if(!selected.selected){
newDataList.push(selected);
}
});
$scope.personalDetails = newDataList;
};
$scope.checkAll = function () {
if (!$scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
angular.forEach($scope.personalDetails, function(personalDetail) {
personalDetail.selected = $scope.selectedAll;
});
};
}]);

It's happening because you don't have ng-model set for the 3rd input box,
you could write a function to calculate the sum and assign the value to the $scope variable.
Demo
var app = angular.module("myapp", [])
app.controller("ListController", ['$scope', function($scope) {
$scope.personalDetails = [{
'num1': '',
'num2': '',
'add': ''
}];
$scope.calculateSum = function(val) {
val.add = parseFloat(val.num1) + parseFloat(val.num2);
}
$scope.addNew = function(personalDetail) {
$scope.personalDetails.push({
'num1': "",
'num2': "",
'add': ""
});
};
$scope.parseFloat = function(value) {
return parseFloat(value);
}
}]);
<html>
<head>
<meta charset="UTF-8">
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<script src="script.js"></script>
<title>Dynamically Add-Remove Rows from Table</title>
<link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
</head>
<body ng-app="myapp" ng-controller="ListController">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<form ng-submit="addNew()">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>
<input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" />
</th>
<th>Number1</th>
<th>number2</th>
<th>Add</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="personalDetail in personalDetails">
<td>
<input type="checkbox" ng-model="personalDetail.selected" />
</td>
<td>
<input type="text" ng-keyup="calculateSum(personalDetail)" class="form-control" ng-model="personalDetail.num1" required/>
</td>
<td>
<input type="text" ng-keyup="calculateSum(personalDetail)" class="form-control" ng-model="personalDetail.num2" required/>
</td>
<td>
<input type="text" ng-model="personalDetail.add" class="form-control" >
</td>
</tr>
</tbody>
</table>
<div class="form-group">
<input ng-hide="!personalDetails.length" type="button" class="btn btn-danger pull-right" ng-click="remove()" value="Remove">
<input type="submit" class="btn btn-primary addnew pull-right" value="Add New">
</div>
</form>
{{personalDetails}}
</div>
</div>
</div>
</div>
</div>
</body>
</html>

How to call another page in background in JavaScript

I have a button in enroll.html . The code of the page is as follows :
<HTML>
<HEAD>
<META http-equiv=Content-Language content=en-us>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<style TYPE="text/css">
<!-- BODY { font-family:arial,helvetica; margin-left:5; margin-top:0}
A { color:#FF5500; text-decoration:underline}
A:hover,A:active { color:#0055FF; text-decoration:underline}
-->
</style>
<Script Language="JavaScript">
<!--
function inStrGrp(src,reg)
{
var regex=new RegExp("[" + reg + "]","i");
return regex.test(src);
}
function check()
{
var uname=document.scan.elements[0].value
var bError=false
if (uname.length==0)
{
window.alert("Name is required.\n")
return false
}
if (uname.indexOf("\\")>=0)
bError=true
if (inStrGrp(uname,'/.:*?"<>| '))
bError=true
if (bError)
{
window.alert('User name can not contain the following characters:\n \\/. :*?"<>|\n')
return false
}
else
return true
}
-->
</Script>
<title>Enroll New Fingerprint.</title>
</HEAD>
<BODY onload="document.scan.name.focus();">
<center>
<table border="0" width="800">
<tr>
<td width="100%" colspan="3">
<p> </p>
<p><u><b>Online Demonstration</b></u></p>
<div align="center">
<table border="1" width="100%" height="260">
<tr>
<td width="20%" align="center" rowspan="2">
<p> </p>
<p><font color="#0055FF">Enroll</font></p>
<p>Logon</p>
<p> </p>
</td>
<td width="80%" height="30">
<b><i>Enroll Finger</i></b>
</td>
</tr>
<tr>
<td width="80%">
<p>Thanks for your registration. You can enroll two fingers for the name you registered.</p>
<form name="scan" method="POST" action="http://10.11.201.170/data/sultan/enroll.asp" onsubmit="return check()">
<p>Please input your name: <input type="text" name="name" size="20"> </p>
<p>If you want to enroll 2 fingers, please check the box. <input type="checkbox" name="chk2Finger" value="2"> </p>
<p>
<input type="submit" value=" Enroll " name="btnEnroll"></p>
</form>
</td>
</tr>
</table>
</div>
<p> </p>
</td>
</tr>
<tr>
<td width="100%" colspan="3">
<p align="center"><small>Copyright © 2004 Futronic
Technology Company Limited. All Rights Reserved.</small></td>
</tr>
</table>
</center>
</BODY>
</HTML>
When I press Enroll Button , I want to load a page named verify.asp in background . How can I do that ?
The code of verify.asp is as follows :
<HTML>
<HEAD>
<META http-equiv=Content-Language content=en-us>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<style TYPE="text/css">
<!-- BODY { font-family:arial,helvetica; margin-left:5; margin-top:0}
A { color:#FF5500; text-decoration:underline}
A:hover,A:active { color:#0055FF; text-decoration:underline}
-->
</style>
<Script Language="VBScript" Src="GetInfo.vbs">
</Script>
<title>Enroll Fingerprint.</title>
</HEAD>
<BODY Onload="GetLearnModel()";>
<center>
<table border="0" width="800">
<tr>
<td width="100%" colspan="3">
<p> </p>
<p><u><b>Online Demonstration</b></u></p>
<div align="center">
<table border="1" width="100%" height="260">
<tr>
<td width="20%" align="center" rowspan="2">
<p> </p>
<p>Enroll</p>
<p>Logon</p>
<p> </p>
</td>
<td width="80%" height="30">
<b><i>Enroll Finger</i></b>
</td>
</tr>
<tr>
<td width="80%">
<Form name="scan" method="Post" action="famenroll2.asp?name=<%=Request("name")%>&check=<%=Request("check")%>&finger=<%=Request("finger")%>">
<Input type="hidden" name="LearnModel" value="">
<Input type="text" name="SlNo" value="">
</Form>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><font size="5" color="#ff0000"><%=Request.Form("SlNo")%></font><font size="5"> Enroll Successfully!</font></p>
</td>
</tr>
</table>
</div>
<p> </p>
</td>
</tr>
<tr>
<td width="100%" colspan="3">
<p align="center"><small>Copyright © 2004 Futronic
Technology Company Limited. All Rights Reserved.</small></td>
</tr>
</table>
<% Dim Conn,strSQL,objExec,NumOfRecords,se_name,finger
cust_no=Request.QueryString("name")
Set Conn = Server.Createobject("ADODB.Connection")
Conn.Open "Driver={Oracle in XE};DBQ=xe;UID=biotpl;PWD=biotpl;"
'Query for the customer entry in FP_ENROLL Table
strSQL2 = "INSERT INTO TEST values(1,'OS')"
Set objExec = Conn.Execute(strSQL2)
'Query for the no of fingers to be taken for a customer in FP_FINGER_SETUP Table
'Set objExec = Conn.Execute("select FINGURE_NO NoF from BIOTPL.FP_FINGER_SETUP where USER_TYPE=" & Request.QueryString("cust_type") )
'NumOfFingers = objExec("NoF")
'Conn.Close()
Set objExec = Nothing
Set Conn = Nothing
%>
</center>
</BODY>
</HTML>

Add an Id in this Line
<input type="submit" value=" Enroll " name="btnEnroll">
So it becomes :
<input type="submit" value=" Enroll " id="buttonEnroll" name="btnEnroll">
<div id="result"></div>
and Than Write this Script
<script>
$("#buttonEnroll").on('click',function(e){
e.preventDefault();
$( "#result" ).load( "verify.asp" );
alert("Page loading completed");
});
</script>
#result is for loading that page in result id div.
Hope Helps !
Add this inside your header tag
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>

Ajax can be used to load a page in background. jQuery supports AJAX functionality and it is easier than what described in the first link. If your intention is to Verify an enrollment, you need to parse the reply coming out of the AJAX request. An earlier answer on parsing can be found here.
The essential steps are
Add an id to your form submit button (say 'enroll')
Include jQuery JavaScript library to your project by adding the following in the header
< script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>‌​
3.Within script tag, use a similar methodology as below.
$("#enroll").click(function(){
$.ajax({
url: "verify.asp",
success: function(result){
/* Parse the result and do whatever you want to do here */
}
});
});

//1st way::
function doFunction(event) {
event.preventDefault();
//here you can load verify.aspx by using
$("#resultdiv").load("verify.aspx", {}, function (data) {
alert("loading complete");
});
}
//2nd way:
//By using ajax call
$('#enroll').on('click', 'input[type="submit"]', function(e){
e.preventDefault();
$.post('http://mywebsite/verify.aspx',{ 'data': $('#txt_search').val() } ,function(data) {
console.log(data); // this would show you the returned data.
});
});
You can do it in 2ways:
HTML:
1st way::
=========
Add onclick to your enroll button.
<input type="submit" value="Enroll" onclick="doFunction();" id="enroll" name="btnEnroll"></p>
<div id="resultdiv">
</div>
2nd way:
========
By using ajax call

Here is modified enroll.html with modified Js
<HTML>
<HEAD>
<META http-equiv=Content-Language content=en-us>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<style TYPE="text/css">
<!-- BODY { font-family:arial,helvetica; margin-left:5; margin-top:0}
A { color:#FF5500; text-decoration:underline}
A:hover,A:active { color:#0055FF; text-decoration:underline}
-->
</style>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<title>Enroll New Fingerprint.</title>
</HEAD>
<BODY>
<center>
<table border="0" width="800">
<tr>
<td width="100%" colspan="3">
<p> </p>
<p><u><b>Online Demonstration</b></u></p>
<div align="center">
<table border="1" width="100%" height="260">
<tr>
<td width="20%" align="center" rowspan="2">
<p> </p>
<p><font color="#0055FF">Enroll</font></p>
<p>Logon</p>
<p> </p>
</td>
<td width="80%" height="30">
<b><i>Enroll Finger</i></b>
</td>
</tr>
<tr>
<td width="80%">
<p>Thanks for your registration. You can enroll two fingers for the name you registered.</p>
<form name="scan" >
<p>Please input your name: <input type="text" name="txtName" size="20" id="txtname"> </p>
<p>If you want to enroll 2 fingers, please check the box. <input type="checkbox" name="chk2Finger" value="2"> </p>
<p>
<input type="button" value="Enroll" name="btnEnroll" id="btnEnroll"></p>
</form>
</td>
</tr>
</table>
</div>
<p> </p>
</td>
</tr>
<tr>
<td width="100%" colspan="3">
<p align="center"><small>Copyright © 2004 Futronic
Technology Company Limited. All Rights Reserved.</small></td>
</tr>
</table>
</center>
</BODY>
</HTML>
<script type="text/javascript">
function inStrGrp(src,reg)
{
var regex=new RegExp("[" + reg + "]","i");
return regex.test(src);
}
$(document).ready(function(){
$('#btnEnroll').on('click',function(){
var uname = $('#txtname').val();
var bError=false
if (uname.length==0)
{
window.alert("Name is required.\n")
return false
}
if (uname.indexOf("\\")>=0)
bError=true
if (inStrGrp(uname,'/.:*?"<>| '))
bError=true
if (bError)
{
window.alert('User name can not contain the following characters:\n \\/. :*?"<>|\n')
return false
}
else
var url = "enroll.asp?name="+uname;
window.location = url;
return true
});
});
</script>
change the url in the javascript code and put yours.If you url look like
http://10.11.201.170/data/sultan/enroll.asp
this then
change the variable url in script section like the following
var url = "http://10.11.201.170/data/sultan/enroll.asp?name="+uname;
and your enroll.asp will remain the same.
Hope that will help.

Categories

Resources