We Keep Coding

Creating input element continuing ID enumeration

I have a button that creates 4 input elements inside a DIV after click:
<div id="content"></div>
<button class="check">Check</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var num = 4;
$(".check").click(function(){
for(i=0; i<num;i++){
$("#content").append("<input id='input"+i+"' type='text'><br>");
}
});
</script>
But the problem is I want input id number continues the enumeration (like this example) instead of return to zero:
<div id="content">
<input id="input0" type="text">
<input id="input1" type="text">
<input id="input2" type="text">
<input id="input3" type="text">
<input id="input4" type="text">
<input id="input5" type="text">
<input id="input6" type="text">
<input id="input7" type="text">
...and continues
</div>
How can I fix it?

You can check the id of the last input. Here I am calculating start and end of for loop based on the total number of elements in #container.
var num = 4;
$(".check").click(function() {
var start = $("#content input").length;
var end = start + num;
for (i = start; i < end; i++) {
var id = 'input' + i;
$("#content").append("<input id='"+id+"' type='text' value='"+id+"'><br>");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"></div>
<button class="check">Check</button>
PS: Here input value is just to demonstrate the id setting to input.

You need some kind of global variable here, or use that simple one:
var getID = (function () {
var id = 0;
return function () { return ++id; }
})();
So whenever you call getID() the »internal« id will be incremented, so each call will yield an new ID.

$(".check").click(function() {
for(var i = 0; i < 4; i++) {
$('<input type="text">') //create a new input
.attr('id', 'input' + $('#content input').length) //id based on number of inputs
.appendTo('#content'); //append it to the container
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"></div>
<button class="check">Check</button>

If you're asking how to have a stack of elements to begin with, and then continue enumeration from there, you simply need to set a variable to the ID of the latest element.
All you need to do is count the number of elements. This can be done with a combination of .querySelectorAll() and .length.
Then simply have your loop start at this new value instead of 0.
This can be seen in the following:
var total_desired = 20;
var start = document.querySelectorAll('#content > input').length;
console.log(start + " elements to start with");
$(".check").click(function() {
for (i = start; i < total_desired; i++) {
$("#content").append("<input id='input" + i + "' type='text'><br>");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="check">Check</button>
<div id="content">
<input id="input0" type="text">
<input id="input1" type="text">
<input id="input2" type="text">
<input id="input3" type="text">
<input id="input4" type="text">
<input id="input5" type="text">
<input id="input6" type="text">
<input id="input7" type="text"> ...and continues
</div>
Having said that, it's unlikely that you actually need simultaneous ID <input> elements, and you may benefit from classes instead.

You can create this object:
var MyId = {
a: 0,
toString() {
return this.a++;
}
}
And concatenate it into the string. Automatically will increase the counter.
<div id="content"></div>
<button class="check">Check</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var GetID = {
a: 0,
toString() {
return this.a++;
}
}
var num = 4;
$(".check").click(function(){
for(i=0; i<num;i++){
$("#content").append("<input id='input"+GetID+"' type='text'><br>");
}
});
</script>

Calculate the values of input where each input has different prices. Any shorter code for this?(javascript only)

The code below is working fine but what if there are 100 inputs? any shorter way to do this?
function checkTotal() {
var a = document.getElementById("sandwich").value;
var b = document.getElementById("burger").value;
var c = document.getElementById("cake").value;
var d = document.getElementById("coffee").value;
document.getElementById("total").value = parseInt(a) * 10 + parseInt(b) * 5 + parseInt(c) * 15 + parseInt(d) * 20;
}
<form role="form" name="listForm">
<label>Sandwich</label>
<input type="number" id="sandwich" value="0" onkeyup="checkTotal()"><br>
<label>Burger</label>
<input type="number" id="burger" value="0" onkeyup="checkTotal()"><br>
<label>Cake</label>
<input type="number" id="cake" value="0" onkeyup="checkTotal()"><br>
<label>Coffee</label>
<input type="number" id="coffee" value="0" onkeyup="checkTotal()"><br> Total: <input type="text" size="2" name="total" id="total" value="0" />
</form>
1) Here each input article has a different price.
2) The value of the input should be mutiply with its price given(Eg. if the sandwich has a price:30, and user inputs value 2 it should calculte the total=price*input value.)
3) i have my code which is working fine but is the above code is the right way to do?
4) what if there are 100 of article inputs. is there shorter code or should i create variable for each one?

what if there are 100 of article inputs. is there shorter code or
should i create variable for each one?
You can maintain a map
var idPriceMap = {
"sandwich" : 20,
"burger" : 10,
"cake" : 5,
"coffee" : 10
};
You can iterate this and produce your value using reduce
var output = Object.keys( idPriceMap ).reduce( function(a,b){
var value = +document.getElementById( b ).value;
a += value * idPriceMap[ b ];
return a;
}, 0);
document.getElementById( "total" ).value = output;

Another way to try is to give your elements a class and some data attributes that can be retrieved by JavaScript using dataset. You can then use them to make your calculations. That way you get rid of ids and you just have to change the HTML code to add a new element.
function checkTotal() {
var total = 0,
foods = document.querySelectorAll('.food');
for (var i = 0; i < foods.length; i++) {
var food = foods[i],
name = food.dataset.item,
price = parseInt(food.dataset.price),
howMany = parseInt(food.value);
console.log(howMany, name, 'costs', (howMany * price));
total += howMany * price;
}
document.getElementById('total').value = total;
}
<form role="form" name="listForm">
<label>Sandwich</label>
<input class="food" data-item="sandwich" data-price="30" type="number" value="0" onBlur="checkTotal()"><br>
<label>Burger</label>
<input class="food" data-item="burger" data-price="10" type="number" value="0" onBlur="checkTotal()"><br>
<label>Cake</label>
<input class="food" data-item="cake" data-price="5" type="number" value="0" onBlur="checkTotal()"><br>
<label>Coffee</label>
<input class="food" data-item="coffee" data-price="15" type="number" value="0" onBlur="checkTotal()"><br>
Total: <input type="text" size="2" name="total" id="total" value="0" />
</form>
As a side note, you should give a try on Angular or Knockout which can help you to achieve those operations.

AngularJS ng - repeat, ng - model on input text strange behaviour

i am new to AngularJS, i try and do the code below
var app = angular.module('SomeApp', []);
app.controller('QuotationController', function($scope) {
$scope.init = function(){
$scope.chargableDescription = [""];
$scope.chargablePrice = [];
$scope.chargableQuantity = [];
$scope.chargableTotal = [];
}
$scope.chargableInput = function($last){
if ( $last ) {
$scope.chargableDescription.push([""]);
}
}
});
Basically, what i am trying to achieve here is to insert the whole group of input when user input something on the last chargableDescription field.
<div class="chargable-group" ng-repeat="item in chargableDescription" >
<div class="col-md-3">
<label class="form-control-label" for="l2" id="chargable-label">Chargable Item</label>
</div>
<div class="col-md-9" id="chargable-header">
<textarea name="chargable[]" class="form-control dynamic chargable" placeholder="Chargable Description" ng-model="chargableDescription[$index]" ng-keypress="chargableInput($last)"> </textarea>
<br>
<input type="number" class="form-control" step="0.01" name="chargable-price-1" placeholder="Chargable Price" ng-model="chargablePrice[$index]">
<br>
<input type="number" class="form-control" name="chargable-quantity-1" placeholder="Chargable Quantity" ng-model="chargableQuantity[$index]">
<br>
<input type="number" class="form-control" step="0.01" name="chargable-total-1" placeholder="Chargable Total" readonly ng-model="chargableTotal[$index]" >
</div>
</div>
It does the trick, however, i wonder why when i do any input on the textarea, the cursor will be gone once i input a character.
How to remove this behaviour and what would be the factor that causing this behavior?
UPDATE :
SOLVED
I added ng-model-options = { updateOn : 'blur' } and it seems like it solves the issue

It works for me https://plnkr.co/IV9t4fhln5v3l81NHaPC
What's your Angular version?
(function() {
'use strict';
var app = angular.module('SomeApp', []);
app.controller('QuotationController', function($scope) {
$scope.init = function() {
$scope.chargableDescription = [""];
$scope.chargablePrice = [];
$scope.chargableQuantity = [];
$scope.chargableTotal = [];
}
$scope.chargableInput = function($last) {
if ($last) {
$scope.chargableDescription.push([""]);
}
}
$scope.init();
});
})();

How to set a combined maxlength of two input fields in angular

I'm wanting to set a combined maximum length of 64 for two input fields in angular, so if say that for the first field the user enters 40 characters, in the second field the maxlength becomes 24.
So far I have tried to write is like so...
js
function newCat() {
var cat = {
id: $scope.id,
name: $scope.name
};
$scope.idMax = 64 - ($scope.name)
$scope.nameMax = 64 - ($scope.id)
[irrelevant code]
return cat
};
html
<div class="form-group">
<h3>id</h3>
<input ng-maxlength="idMax" type="text" class="form-control" ng-model="id">
</div>
<div class="form-group">
<h3>Name</h3>
<input ng-maxlength="nameMax" type="text" class="form-control" ng-model="name">
</div>
This hasn't worked though.
Can anyone suggest how it would be possible to fix what i've done, or what would be a better way to go about fixing the problem?

Made some piece of code that may help you.
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.name=''; $scope.id='';
var max = 10;
$scope.update = function() {
$scope.remaining = max - ($scope.name.length + $scope.id.length);
$scope.idMax = max - ($scope.name.length);
$scope.nameMax = max - ($scope.id.length);
}
$scope.update();
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<h3>id</h3>
<input maxlength="{{idMax}}" type="text" ng-model="id" ng-change="update()"> Length: {{id.length}}
<h3>Name</h3>
<input maxlength="{{nameMax}}" type="text" ng-model="name" ng-change="update()"> Length: {{name.length}}
<p>Remaining: {{remaining}}</p>
</div>
Run it and see if its what you were trying to achieve.
Fiddle

Creating a multiplication function in an angularjs controller?

I am trying to create a multiplication function in an angularjs controller. I want the function to return the product of quantity and price. I'm using the snippet below, but it's returning an error. What am I doing wrong?
<!DOCTYPE html> <html>
<head> <script src= "Angular.js"></script> </head>
<body>
<div ng-app="" ng-controller="personController">
<h2>Cost Calculator</h2>
Quantity: <input type="number" ng-model="quantity"> Price: <input type="number" ng-model="price">
<p><b>Total in dollar:</b> {{fullname()}}</p>
</div>
<script> function personController(scope) { var input1 = scope.quantity , var input2 = scope.price ,
$scope.fullName = function() {
return {{input1 * input2}};
} } </script>
</body> </html>

In this simple example you do not need to create a controller.
See here
<h2>Cost Calculator</h2>
Quantity:
<input type="number" ng-model="quantity">Price:
<input type="number" ng-model="price">
<p><b>Total in dollar:</b> {{quantity*price}}</p>
</div>
But, if you need create it - see mistakes:
angulars interpolation syntax {{ }} is only used in HTML, not javascript.
Use $scope, not scope
formatting your code is important.

Here is an example using the currency filter. You might also want to take a look at the number filter.
Note: Starting in angular 1.3.0 the currency filter lets you add a fractionSize.
angular.module('myApp',[])
.controller('personController', ['$scope', function($scope) {
$scope.price = 0;
$scope.quantity = 0;
$scope.total = function() {
return $scope.price * $scope.quantity;
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="personController">
<h2>Cost Calculator</h2>
Quantity: <input type="number" ng-model="quantity">
Price: <input type="number" ng-model="price">
<p><b>Total in dollars:</b> {{ total() | currency : $ }}</p>
</div>

<script> function personController(scope) {
var input1 = scope.quantity;,
var input2 = scope.price;
$scope.fullName = function() {
return {{input1 * input2}};
}
}
</script>
</body> </html>
There is a clear syntax error here which is {{input * input2}}. This is angularjs expression syntax, not javascript syntax. Try just using input * input2. You are also referring to $scope which is not available, so change to 'scope':
scope.fullName = function() {
return input1 * input2;
}
Or, you could refer to the scope variables directly
scope.fullName = function() {
return scope.quantity * scope.price;
}
Or you could refer to them directly in the template:
<!DOCTYPE html> <html>
<head> <script src= "Angular.js"></script> </head>
<body>
<div ng-app="">
<h2>Cost Calculator</h2>
Quantity: <input type="number" ng-model="quantity"> Price: <input type="number" ng-model="price">
<p><b>Total in dollar:</b> {{quantity * price}}</p>
</div>
</body> </html>

you are not using $scope? thats not local variable that is injected $scope so name cannot be changes as we do with the argument names of loval variables
There were syntax errors as well i have refactored your code
Working demo
angular.module('test',[]).controller('personController', function ($scope) {
$scope.price = 0;
$scope.quantity=0
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html> <html>
<head> <script src= "Angular.js"></script> </head>
<body>
<div ng-app="test" ng-controller="personController">
<h2>Cost Calculator</h2>
Quantity: <input type="number" ng-model="quantity"> Price: <input type="number" ng-model="price">
<p><b>Total in dollar:</b> {{quantity*price}}</p>
</div>
</body> </html>