List of items not getting added dynamically - javascript

I have written this code in AngularJS where I want to add item name, price and quantity. This item is represented in lower table and saved as an array. Later, I am finding the total bill.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<p>Try to add the items.</p>
<div ng-app="myApp" ng-controller="myCtrl">
<table border="1">
<tr>
<td>Item</td>
<td>Price</td>
<td>Quantity
</tr>
<tr>
<form>
<td><input type = "text" ng-model="name"></td>
<td><input type = "text" ng-model="price"></td>
<td><input type = "text" ng-model="quantity"></td>
</form>
</tr>
</table>
<br>
<button onClick="createItem()">Add to Cart</button>
<h2>My Cart</h2>
<div style="border: 1px solid blue;">
</div>
<table border="1" class="mytable">
<tr>
<td>S.No.</td>
<td>Item</td>
<td>Price</td>
<td>Quantity</td>
<td>Cost</td>
</tr>
<tr ng-repeat="item in items">
<td><span ng-bind="item.serial"></span></td>
<td><span ng-bind="item.name"></span></td>
<td><span ng-bind="item.price"></span></td>
<td><span ng-bind="item.quantity"></span></td>
<td><span ng-bind="item.cost"></span></td>
</tr>
</table>
<br>
<h3><span ng-bind="total"></span></h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller("OnlineShopping", function($scope)
{
var i = 1;
$scope.createItem = function($scope) {
var item = {};
item.serial = i++;
item.name = $scope.name;
item.price = $scope.price;
item.quantity = $scope.quantity;
item.cost = $scope.price * $scope.quantity;
item.cost = $scope.quantity;
addItem(item);
};
$scope.addItem = function(item) {
$scope.items.push(item);
$scope.item = {};
};
$scope.totalBill = function(items) {
$scope.total = 0;
for(var item in items) {
total+=item.cost;
}
$scope.total = total;
};
</script>
</body>
</html>
Please guide me what I am doing wrong that it's not working, and how to collect this array as an object to save in DB. I am not sure how can I achieve this with angular, how to add object to array whenever there is a new directive template added to view dynamically.
Thanks in advance.

There are multiple issues with your code.
1.Syntax error: not closed controller.
2.Your controller is myCtrl but you used OnlineShopping in angularjs code
3.$scope.items is not defined.use this in controller $scope.items = []
4.you should call addItem as $scope.addItem
5.Onclick will not work with angular you should use ng-click
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<p>Try to add the items.</p>
<div ng-app="myApp" ng-controller="OnlineShopping">
<table border="1">
<tr>
<td>Item</td>
<td>Price</td>
<td>Quantity
</tr>
<tr>
<td><input type="text" ng-model="name"></td>
<td><input type="text" ng-model="price"></td>
<td><input type="text" ng-model="quantity"></td>
</tr>
</table>
<br>
<button ng-click="createItem()">Add to Cart</button>
<h2>My Cart</h2>
<div style="border: 1px solid blue;">
</div>
<table border="1" class="mytable">
<tr>
<td>S.No.</td>
<td>Item</td>
<td>Price</td>
<td>Quantity</td>
<td>Cost</td>
</tr>
<tr ng-repeat="item in items">
<td><span ng-bind="item.serial"></span></td>
<td><span ng-bind="item.name"></span></td>
<td><span ng-bind="item.price"></span></td>
<td><span ng-bind="item.quantity"></span></td>
<td><span ng-bind="item.cost"></span></td>
</tr>
</table>
<br>
<br>
<h3>Total : <span ng-bind="total"></span></h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller("OnlineShopping", function ($scope) {
var i = 1; $scope.items = [];$scope.total = 0;
$scope.createItem = function () {
var item = {};
item.serial = i++;
item.name = $scope.name;
item.price = $scope.price;
item.quantity = $scope.quantity;
item.cost = ($scope.price * $scope.quantity).toFixed(2);;
$scope.addItem(item);
};
$scope.addItem = function (item) {
$scope.items.push(item);
$scope.item = {};
$scope.resetForm();
$scope.totalBill($scope.items);
};
$scope.totalBill = function (items) {
var total = 0;
for(var i = 0; i < $scope.items.length; i++){
var item = $scope.items[i];
total += (item.quantity*item.price);
}
$scope.total = total;
};
$scope.resetForm = function(){
$scope.name = '';
$scope.price = '';
$scope.quantity = '';
}
});
</script>

So many syntax errors in your code: I've prepared code pen for your code
[check here][1]
you missed closing breaket you missed some scooping . please check code pen code this will help you
[1]: https://codepen.io/sumit-jaiswal/pen/LLdbRV?
so your code he
<p>Try to add the items.</p>
<div ng-app="myApp" ng-controller="OnlineShopping">
<table border="1">
<tr>
<td>Item</td>
<td>Price</td>
<td>Quantity
</tr>
<tr>
<form>
<td><input type = "text" ng-model="name"></td>
<td><input type = "number" ng-model="price"></td>
<td><input type = "number" ng-model="quantity"></td>
</form>
</tr>
</table>
<br>
<button ng-click="createItem()">Add to Cart</button>
<h2>My Cart</h2>
<div style="border: 1px solid blue;">
</div>
<table border="1" class="mytable">
<tr>
<td>S.No.</td>
<td>Item</td>
<td>Price</td>
<td>Quantity</td>
<td>Cost</td>
</tr>
<tr ng-repeat="item in items">
<td><span ng-bind="item.serial"></span></td>
<td><span ng-bind="item.name"></span></td>
<td><span ng-bind="item.price"></span></td>
<td><span ng-bind="item.quantity"></span></td>
<td><span ng-bind="item.cost"></span></td>
</tr>
</table>
<br>
<h3><span ng-bind="total"></span></h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller("OnlineShopping", function($scope)
{
var i = 1;
$scope.items = [];
$scope.createItem = function() {
var item = {};
item.serial = i++;
item.name = $scope.name;
item.price = $scope.price;
item.quantity = $scope.quantity;
item.cost = $scope.price * $scope.quantity;
$scope.addItem(item);
};
$scope.addItem = function(item) {
$scope.items.push(item);
$scope.item = {};
$scope.resetForm();
};
$scope.totalBill = function(items) {
$scope.total = 0;
for(var item in items) {
total+=item.cost;
}
$scope.total = total;
};
$scope.resetForm = function(){
$scope.name = '';
$scope.price = '';
$scope.quantity = '';
}
})
</script>

try this code there are a lots of mistake
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<body>
<p>Try to add the items.</p>
<div ng-app="myApp" ng-controller="OnlineShopping">
<table border="1">
<tr>
<td>Item</td>
<td>Price</td>
<td>Quantity
</tr>
<tr>
<td><input type="text" ng-model="name"></td>
<td><input type="text" ng-model="price"></td>
<td><input type="text" ng-model="quantity"></td>
</tr>
</table>
<br>
<button ng-click="createItem()">Add to Cart</button>
<h2>My Cart</h2>
<div style="border: 1px solid blue;">
</div>
<table border="1" class="mytable">
<tr>
<td>S.No.</td>
<td>Item</td>
<td>Price</td>
<td>Quantity</td>
<td>Cost</td>
</tr>
<tr ng-repeat="item in items">
<td><span ng-bind="item.serial"></span></td>
<td><span ng-bind="item.name"></span></td>
<td><span ng-bind="item.price"></span></td>
<td><span ng-bind="item.quantity"></span></td>
<td><span ng-bind="item.cost"></span></td>
</tr>
</table>
<br>
<h3><span ng-bind="total"></span></h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller("OnlineShopping", function ($scope) {
var i = 1; $scope.items = [];
$scope.createItem = function () {
var item = {};
item.serial = i++;
item.name = $scope.name;
item.price = $scope.price;
item.quantity = $scope.quantity;
item.cost = $scope.price * $scope.quantity;
item.cost = $scope.quantity;
$scope.addItem(item);
};
$scope.addItem = function (item) {
$scope.items.push(item)
};
$scope.totalBill = function (items) {
$scope.total = 0;
for (var item in items) {
total += item.cost;
}
$scope.total = total;
};
});
</script>
</body>
</html>

Related

Change <p> to <table>

I wants to change the output of the <p id="demo> to <table> with <tr> and <td>but it involved Javascript in the output so it doesn't on what I've tried.
<button onclick="myFunction()">Predict</button>
<div id="demo" align="center"></div>
<script type="text/javascript">
var selectedprg = '';
var selectedcount = '';
var selectedcity = '';
var average = '';
function myFunction() {
document.getElementById("demo").innerHTML = `
<table>
<tr>
<td style="padding: 5px;">Selected program</td>
<td style="padding: 5px;">${selectedprg}</td>
</tr>
<tr>
<td style="padding: 5px;">Total number of students</td>
<td style="padding: 5px;">${selectedcount}</td>
</tr>
</table>'
}
$(document).ready(function(){
$("#prg").change( function(){
selectedprg = $('#prg option:selected').text();
selectedcount = $('#prg option:selected').data('prgcount');
selectedcity = $('#prg option:selected').data('citycount');
if(selectedcount > 5){
average = selectedcount / 3 + 5;
} else{
average = selectedcount / 3 - 5;
}
});
});
</script>
Current output
Expected output
Could someone assist on this? Thank you.
You can do something like this:
document.getElementById("demo").innerHTML = `
<table>
<tr>
<td style="padding: 5px;">Selected program</td>
<td style="padding: 5px;">${selectedprg}</td>
</tr>
<tr>
<td style="padding: 5px;">Total number of students</td>
<td style="padding: 5px;">${selectedcount}</td>
</tr>
</table>
`
the styling should be writing with css ofcourse.

Can’t identify object attribute: Uncaught ReferenceError: fat is not defined

I’m building a simple application to calculate BMI as part of an JS exercise and can’t get past this error when I create an object to read inputs of my form. The error I get is the one in the title. Uncaught ReferenceError: fat is not defined at HTMLButtonElement.
var button = document.querySelector("#button-add");
button.addEventListener("click", function() {
event.preventDefault();
var form = document.querySelector("#add-form");
var patient = getFormPatient
console.log(patient);
var patientTr = document.createElement("tr");
var nameTd = document.createElement("td");
var weightTd = document.createElement("td");
var heightTd = document.createElement("td");
var fatTd = document.createElement("td");
var bmiTd = document.createElement("td");
nameTd.textContent = name;
weightTd.textContent = weight;
heightTd.textContent = height;
fatTd.textContent = fat;
bmiTd.textContent = calculateBmi(weight, height);
patientTr.appendChild(nameTd);
patientTr.appendChild(weightTd);
patientTr.appendChild(heightTd);
patientTr.appendChild(fatTd);
patientTr.appendChild(bmiTd);
var table = document.querySelector("#patients-table");
table.appendChild(patientTr);
})
function getFormPatient(form) {
var patient = {
name: form.name.value,
weight: form.weight.value,
fat: form.fat.value,
height: form.height.value
}
return patient;
}
<header>
<div class="container">
<h1 class="title">Queensland Nutrition</h1>
</div>
</header>
<main>
<section class="container">
<h2>My clients</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Weight(kg)</th>
<th>Height(m)</th>
<th>Fat Percentage (%)</th>
<th>BMI</th>
</tr>
</thead>
<tbody id="patients-table">
<tr class="patients">
<td class="info-name">Paulo</td>
<td class="info-weight">100</td>
<td class="info-height">2.00</td>
<td class="info-fat">10</td>
<td class="info-bmi">0</td>
</tr>
<tr class="patients">
<td class="info-name">João</td>
<td class="info-weight">80</td>
<td class="info-height">1.72</td>
<td class="info-fat">40</td>
<td class="info-bmi">0</td>
</tr>
<tr class="patients">
<td class="info-name">Erica</td>
<td class="info-weight">54</td>
<td class="info-height">1.64</td>
<td class="info-fat">14</td>
<td class="info-bmi">0</td>
</tr>
<tr class="patients">
<td class="info-name">Douglas</td>
<td class="info-weight">85</td>
<td class="info-height">1.73</td>
<td class="info-fat">24</td>
<td class="info-bmi">0</td>
</tr>
<tr class="patients">
<td class="info-name">Tatiana</td>
<td class="info-weight">46</td>
<td class="info-height">1.55</td>
<td class="info-fat">19</td>
<td class="info-bmi">0</td>
</tr>
</tbody>
</table>
</section>
<section class="container">
<h2 id="titulo-form">Add New Patient</h2>
<form id="add-form">
<div class="grupo">
<label for="nome">Name:</label>
<input id="nome" name="name" type="text" placeholder="enter patient's name" class="campo">
</div>
<div class="grupo">
<label for="peso">Weight:</label>
<input id="peso" name="weight" type="text" placeholder="enter patient's weight" class="campo campo-medio">
</div>
<div class="grupo">
<label for="altura">Height:</label>
<input id="altura" name="height" type="text" placeholder="enter patient's height" class="campo campo-medio">
</div>
<div class="grupo">
<label for="gordura">Fat Percentage:</label>
<input id="gordura" name="fat" type="text" placeholder="enter patient's fat percentage" class="campo campo-medio">
</div>
<button id="button-add" class="botao bto-principal">Adicionar</button>
</form>
</section>
</main>
<script src="js/bmi-calc.js" type="text/javascript"></script>
<script src="js/form.js" type="text/javascript"></script>
I thought I might be making a mistake with variable names, but reviewed them and can’t find any. Any ideas on what I’m doing wrong here?
------------------------- EDIT ---------------------
adding code for the calculateBmi function to make it clearer. That's literally all the code I have for the exercise.
var patients = document.querySelectorAll(".patients");
function calculateBmi(weight, height) {
var bmi = 0;
bmi = weight / (height * height);
return bmi.toFixed(2);
}
for (var i = 0; i < patients.length; i++) {
var patient = patients[i];
var tdWeight = patient.querySelector(".info-weight");
var weight = tdWeight.textContent;
var tdHeight = patient.querySelector(".info-height");
var height = tdHeight.textContent;
var tdBmi = patient.querySelector(".info-bmi");
var validWeight = true;
var validHeight = true;
if (weight <= 0 || weight >= 700) {
validWeight = false;
tdBmi.textContent = "Invalid weight";
patient.classList.add("invalid-patient");
}
if (height <= 0 || height >= 3) {
validHeight = false;
tdBmi.textContent = "Invalid height";
patient.classList.add("invalid-patient");
}
if (validHeight == true && validWeight == true) {
var bmi = calculateBmi(weight, height);
tdBmi.textContent = bmi;
}
}
You have no variables name, weight, height, or fat. I think you meant patient.name, etc.
But you didn't call the function in
var patient = getFormPatient
You need parentheses with the argument after it.
var button = document.querySelector("#button-add");
button.addEventListener("click", function() {
event.preventDefault();
var form = document.querySelector("#add-form");
var patient = getFormPatient(form);
console.log(patient);
var patientTr = document.createElement("tr");
var nameTd = document.createElement("td");
var weightTd = document.createElement("td");
var heightTd = document.createElement("td");
var fatTd = document.createElement("td");
var bmiTd = document.createElement("td");
nameTd.textContent = patient.name;
weightTd.textContent = patient.weight;
heightTd.textContent = patient.height;
fatTd.textContent = patient.fat;
bmiTd.textContent = calculateBmi(patient.weight, patient.height);
patientTr.appendChild(nameTd);
patientTr.appendChild(weightTd);
patientTr.appendChild(heightTd);
patientTr.appendChild(fatTd);
patientTr.appendChild(bmiTd);
var table = document.querySelector("#patients-table");
table.appendChild(patientTr);
})
function getFormPatient(form) {
var patient = {
name: form.name.value,
weight: form.weight.value,
fat: form.fat.value,
height: form.height.value
}
return patient;
}
<header>
<div class="container">
<h1 class="title">Queensland Nutrition</h1>
</div>
</header>
<main>
<section class="container">
<h2>My clients</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Weight(kg)</th>
<th>Height(m)</th>
<th>Fat Percentage (%)</th>
<th>BMI</th>
</tr>
</thead>
<tbody id="patients-table">
<tr class="patients">
<td class="info-name">Paulo</td>
<td class="info-weight">100</td>
<td class="info-height">2.00</td>
<td class="info-fat">10</td>
<td class="info-bmi">0</td>
</tr>
<tr class="patients">
<td class="info-name">João</td>
<td class="info-weight">80</td>
<td class="info-height">1.72</td>
<td class="info-fat">40</td>
<td class="info-bmi">0</td>
</tr>
<tr class="patients">
<td class="info-name">Erica</td>
<td class="info-weight">54</td>
<td class="info-height">1.64</td>
<td class="info-fat">14</td>
<td class="info-bmi">0</td>
</tr>
<tr class="patients">
<td class="info-name">Douglas</td>
<td class="info-weight">85</td>
<td class="info-height">1.73</td>
<td class="info-fat">24</td>
<td class="info-bmi">0</td>
</tr>
<tr class="patients">
<td class="info-name">Tatiana</td>
<td class="info-weight">46</td>
<td class="info-height">1.55</td>
<td class="info-fat">19</td>
<td class="info-bmi">0</td>
</tr>
</tbody>
</table>
</section>
<section class="container">
<h2 id="titulo-form">Add New Patient</h2>
<form id="add-form">
<div class="grupo">
<label for="nome">Name:</label>
<input id="nome" name="name" type="text" placeholder="enter patient's name" class="campo">
</div>
<div class="grupo">
<label for="peso">Weight:</label>
<input id="peso" name="weight" type="text" placeholder="enter patient's weight" class="campo campo-medio">
</div>
<div class="grupo">
<label for="altura">Height:</label>
<input id="altura" name="height" type="text" placeholder="enter patient's height" class="campo campo-medio">
</div>
<div class="grupo">
<label for="gordura">Fat Percentage:</label>
<input id="gordura" name="fat" type="text" placeholder="enter patient's fat percentage" class="campo campo-medio">
</div>
<button id="button-add" class="botao bto-principal">Adicionar</button>
</form>
</section>
</main>
<script src="js/bmi-calc.js" type="text/javascript"></script>
<script src="js/form.js" type="text/javascript"></script>
Your object patient has all the params,
so use patient.field_name to get the value.
var button = document.querySelector("#button-add");
button.addEventListener("click", function() {
event.preventDefault();
var addForm = document.querySelector("#add-form");
var patient = getFormPatient(addForm)
console.log(patient);
var patientTr = document.createElement("tr");
var nameTd = document.createElement("td");
var weightTd = document.createElement("td");
var heightTd = document.createElement("td");
var fatTd = document.createElement("td");
var bmiTd = document.createElement("td");
nameTd.textContent = patient.name;
weightTd.textContent = patient.weight;
heightTd.textContent = patient.height;
fatTd.textContent = patient.fat;
bmiTd.textContent = calculateBmi(weight, height);
patientTr.appendChild(nameTd);
patientTr.appendChild(weightTd);
patientTr.appendChild(heightTd);
patientTr.appendChild(fatTd);
patientTr.appendChild(bmiTd);
var table = document.querySelector("#patients-table");
table.appendChild(patientTr);
})
function getFormPatient(form) {
var patient = {
name: form.name.value,
weight: form.weight.value,
fat: form.fat.value,
height: form.height.value
}
console.log(patient);
return patient;
}

Calculate taxes and Total

I am trying to create a table that will calculate on an amount entered by the user the two different taxes and show the total
I dont understand where is the problem and why nothing is showing.
I included the script.
Thanks
<head>
<style>
td
{
border: 1px solid black;
padding: 20px;
margin: 20px;
}
</style>
<script type="text/javascript">
function calculateGST ()
{
var v_GST = 0.05;
var v_price = parseFloat(Number(document.getElementById('inputuser').value));
var v_taxes_GST = (v_price * v_GST));
return v_taxes_GST;
}
function calculateQST ()
{
var v_QST = 0.09975;
var v_price = parseFloat(Number(document.getElementById('inputuser').value));
var v_taxes_QST = (v_price * v_QST));
return v_taxes_QST;
}
function calculatetotal ()
{
var v_prix = parseFloat(Number(document.getElementById('inputuser').value));
var v_total;
v_total = v_price + calculateQST() + calculateGST();
return v_total;
}
function showTotal()
{
document.getElementById('valueTotal').innerHTML = showTotal();
}
function showQST()
{
document.getElementById('valueQST').innerHTML = showQST();
}
function showGST()
{
document.getElementById('valueGST').innerHTML = calculateGST();
}
</script>
</head>
<body>
<table style ="width:75%">
<tr>
<td colspan=2> Example</td>
</tr>
<tr>
<td colspan=2> You sell a taxable good for $100. Taxes are calculated as follows: </td>
</tr>
<tr>
<td> Selling price </td>
<td> <input type="text" id="inputuser"> </td>
</tr>
<tr>
<td> GST ($100 × 5%) </td>
<td> <input type="button" value="calculate GST" onclick="showGST();"/>
<div id = "valueGST" class="GST"></div> </td>
</tr>
<tr>
<td> QST ($100 × 9.975%) </td>
<td> <input type="button" value="calculate QST" onclick="showQST();"/>
<div id = "valueQST" class="QST"></div> </td>
</tr>
<tr>
<td> Total </td>
<td> <input type="button" value="calculate total" onclick="showTotal();"/>
<div id = "valueTotal" class="total"></div> </td>
</tr>
</table>
</body>
</html>
Your showTotal() and showQST() functions are calling themselves.
function showTotal() {
document.getElementById('valueTotal').innerHTML = calculatetotal();
}
function showQST() {
document.getElementById('valueQST').innerHTML = calculateQST();
}
function showGST() {
document.getElementById('valueGST').innerHTML = calculateGST();
}

Creating 2 html tables using javascript

I'm trying to create 2 dynamic html tables using Javascript with data from html inputs. I was able to create the first table I wanted but I've been unable to create 2 different tables using different inputs on the same page.
I tried changing the addRow() functions in the html and JS to have different names but this caused both tables to fail.
Any help would be appreciated. Here's the test code I've been using.
<!DOCTYPE html>
<body onload="load()">
<div id="myform">
<table>
<tr>
<td>Name:</td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>Age:</td>
<td><input type="number" id="age">
<input type="button" id="add" value="Add" onclick="addRow()"></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<br>
<table>
<tr>
<td>Height:</td>
<td><input type="text" id="height"></td>
</tr>
<tr>
<td>Width:</td>
<td><input type="text" id="width">
<input type="button" id="addDim" value="Add" onclick="addRow()"></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div id="mydata">
<table id="myTableData" border="1" cellpadding="2">
<tr>
<td> </td>
<td><b>Name</b></td>
<td><b>Age</b></td>
</tr>
</table>
<table id="myTableData2" border="1" cellpadding="2">
<tr>
<td> </td>
<td><b>Height</b></td>
<td><b>Width</b></td>
</tr>
</table>
</body>
</html>
function addRow() {
var myName = document.getElementById("name");
var age = document.getElementById("age");
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML= '<input type="button" value = "Delete" onClick="deleteRow(this)">';
row.insertCell(1).innerHTML= myName.value;
row.insertCell(2).innerHTML= age.value;
var width = document.getElementById("width");
var height = document.getElementById("height");
var table2 = document.getElementById("myTableData2");
var rowCount2 = table2.rows.length;
var row2 = table2.insertRow(rowCount2);
row.insertCell(0).innerHTML = '<input type="button" value="Delete" onClick="deleteRow(this)">';
row.insertCell(1).innerHTML = width.value;
row.insertCell(2).innerHTML = height.value;
}
function deleteRow(obj) {
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
}
function load() {
console.log("Page load finished");
}
Looks like in the bottom section, you're not using the row2 variable you've defined.
Should be:
var rowCount2 = table2.rows.length;
var row2 = table2.insertRow(rowCount2);
row2.insertCell(0).innerHTML = '<input type="button" value="Delete" onClick="deleteRow(this)">';
row2.insertCell(1).innerHTML = width.value;
row2.insertCell(2).innerHTML = height.value;
here how i did it. you can use the same function for any amount of table, if pass the parameter in the function.
http://jsfiddle.net/8t5aqomk/2/
function myFunction(thisTable) {
var firstName = document.getElementById('firstName').value;
var lastName = document.getElementById('lastName').value;
var age = document.getElementById('age').value;
var info = [firstName,lastName,age]
var table = document.getElementById(thisTable);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cellCount = table.rows[0].cells.length;
for(var i=0; i<cellCount; i++) {
row.insertCell(i).innerHTML=info[i];
}
}

Validating input using angularJS inside a function

My code is like this.
<form name="palletForm" novalidate=novalidate>
<div ng-app='myApp' ng-controller="MainCtrl">
<!--Small Package starts here -->
<div ng-repeat="prdElement in packageElement track by $index" class="package-grid">
<table class="hovertable">
<thead>
<tr>
<th>Line Quantity#</th>
<th>Ship Quantity</th>
<th>PickQuantity</th>
<th>Quantity in Plt</th>
<th>Allready Packed</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in prdElement.Data" ng-init="data.newquantity = 0">
<td>{{data.LINQTY}}</td>
<td>{{data.SHPQTY}}</td>
<td>{{data.PickQty}}</td>
<td>
<input ng-model="data.newquantity" placeholder="Quantity" required=required type="number" />
</td>
<td>{{data.SHPQTY}}</td>
</tr>
<tr>
<td width="100%" colspan="4">
<button ng-show="prdElement.show" type="button" ng-click="newPackageItem( prdElement,$event)">Finish Package</button>
</td>
</tr>
</tbody>
</table>
</div>
<!--Small Package ends here -->
</div>
angular.module('myApp', ['ui.bootstrap']);
angular.module('myApp', []).controller('MainCtrl', ['$http', '$scope', function ($http, $scope) {
var counter = 0;
$scope.packageElement = [{
show: true,
palletClosed: false,
disableNextPallet: false,
Data: [{
"ITMLN": 100,
"ITCLS": "EPZ",
"ITEMNO": "021041029300",
"LINQTY": 1,
"SHPQTY": 0,
"PickQty": 1000,
"Qtyplt": 0,
"packed": 0
}, {
"ITMLN": 100,
"ITCLS": "EPZ",
"ITEMNO": "4901000002201",
"LINQTY": 1,
"SHPQTY": 0,
"PickQty": 2000,
"Qtyplt": 0,
"packed": 0
}]
}];
$scope.newPackageItem = function (packageElement, $event) {
var npackageElement = {};
angular.copy(packageElement, npackageElement);
counter++;
packageElement.show = false;
npackageElement.name = counter;
angular.forEach(npackageElement.Data, function (row) {
if (row.PickQty != row.newquantity || row.PickQty != 0) {
row.PickQty = row.PickQty - row.newquantity;
row.SHPQTY = Number(row.SHPQTY) + Number(row.newquantity);
}
});
npackageElement.show = true;
angular.forEach(packageElement.Data, function (row) {
row.SHPQTY = Number(row.SHPQTY) + Number(row.newquantity);
});
$scope.packageElement.push(npackageElement);
};
}]);
Inside button click I am calling a function newPackageItem I want to validate my text boxes before that function executes. textbox is number only field and required. I want to validate it in angular way. How can I achieve this?
Fiddle
<body ng-app="phonecatApp">
<form ng-controller="PhoneListCtrl" name="myForm">
<p>
<input name="Quantity" ng-model="data.newquantity" placeholder="Quantity" required=required type="number" />
<span class="error" ng-show="myForm.Quantity.$error.pattern">
</span>
</p>
</form>
</body>
and in your javascript file
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function ($scope) {
$scope.pattern = /^[0-9]*$/;
});
Here is a validation example i uploaded to jsfiddle:
http://jsfiddle.net/sfk1bu1y/1/
AngularJS form validation is your friend:
https://docs.angularjs.org/guide/forms

Categories