Is it possible to get textarea row count in html using angularjs?
Below is javascript way to get the row count.
console.log(document.getElementById('field_id').rows)
The code below doesn't work but something similar to it, just using front-end?
{{mainCtrl.header.modelName.rows}}
Below are two types of textarea row count you can fetch using angularjs :
Fixed rows - that are pre defined for the textarea element
Dynamic rows - that can change as per the new lines added to the textarea element.
angular.module("app", []).controller("ctrl", function($scope) {
$scope.fixedRows = angular.element(document.querySelector("#txt-area")).attr("rows");
$scope.getDynamicRows = function() {
var ele = angular.element(document.querySelector("#txt-area"));
return ele.val().split(/\r|\r\n|\n/).length;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="app" ng-controller="ctrl">
<textarea id="txt-area" rows="10" cols="50" type="text" ng-model="textValue"></textarea>
<p>Fixed Rows Count = {{fixedRows}}, Dynamic Rows Count = {{getDynamicRows()}}
</p>
</body>
Related
I have a var that is the result of a math calculation which changes based on the users input. I'm trying to create a get-form in html that will send the results to a new page.
my result appears on the page as var newpayment
document.querySelectorAll("#cart span.newpayment")[0].innerHTML = newpayment.toFixed(2);
However the form does not show the result..
<form id="form1" method="get">
<input type="hidden" id="submit_total1" value=""
name="submit_total1">
<button id="select1">Select</button>
</form>
<script>
var form = document.getElementById("form1");
document.getElementById("form1").action = "/complete/file.php";
document.getElementById("select1").addEventListener("click", function ()
{
var submit_total1=newpayment;
form.submit();
});
</script>
Thanks for your help but I'm still not able to get it to work. I've also tried another method by setting the value after the form is rendered (see Below). The var "newpayment" is displayed on the page as the span class but it will not populate as the value in the form. Thank you in advance for any remedies.
`
<script>
function setVal(){
document.getElementById('id').value=newpayment;
}
</script>
<p >$<span class="newpayment">0.00</span></p>`
I have the following html code which is just an item name from a view cart page. I want to be able to transfer this data (amongst others once i get the basic idea down) to a separate html page that'll automatically generate a list of multiple items, with multiple prices and output a total price.
<div class="product-name-options">
<!--START: itemnamelink--><a id="itemName" href="product.asp?itemid=[ITEM_CATALOGID]">[ITEM_NAME]</a><!--END: itemnamelink-->
<button type="button" onclick="window.location='Quote_ep_78-1.html'" id="vc_ChkButton" class="btn"><i class="icon-basket"></i> Get Quote</button>
</div>
I have the following Json code on the cart page.
<script>
window.onload =
function createStudent(){
// this is how you set it
var newProduct = new Object();
newProduct.itemName= document.getElementById('itemName');
if(localStorage.product)
{
product= JSON.parse(localStorage.getItem('product'));
}else{
product=[];
}
product.push(newProduct)
localStorage.setItem('product', JSON.stringify(product));
}
</script>
This is the quote page.
<script>
window.onload= function jsonStarter(){
var retrievedObject = localStorage.getItem('product');
/* document.getElementById("demo").innerHTML = retrievedObject;*/
console.log('retrievedObject: ', JSON.parse(retrievedObject));
}
</script>
</head>
<body>
<div id = ".myDivClass">
</div>
</body>
I can't seem to get the jSON data appear in the div that i've made furthermore at the moment i get the following.
"retrievedObject: (2) [{…}, {…}]"
I get the above console.log which i believe is correct as it reflects the number of items in my cart but i can't get it to print anything else. This is my first ever time using JSON so i'm a bit out of my depth but i'm eager to learn how to do this.
The quote page div after all this looks like this;
<div id=".myDivClass">[{"itemName":{"__hj_mutation_summary_node_map_id__":1063}},{"itemName":{"__hj_mutation_summary_node_map_id__":1063}},{"itemName":{"__hj_mutation_summary_node_map_id__":1063}}]</div>
I wrote this code for add and remove Textboxes using AngularJS, but I want to add the value of checkbox which will written by user and display it on same page so what can I do it?
The code below will display 1 textbox and 3 buttons, if I click on append then it will add one more text box on page and when I click on remove then it will remove last checkbox.
And I want to add functionality for example if I append 4 checkboxes, and every checkbox I insert some values as number, then I click on add button then it will return the addition of values which I inserted before and return it on same page. so what should i write in code
var app = angular.module('abc', []);
app.controller('myCtrl', function($scope) {
$scope.array=[1];
});
<html ng-app="abc" ng-controller="myCtrl">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-repeat="a in array">
Textbox {{a}} <input type="text" id="{{a}}">
</div>
<button ng-click="array.push(array.length+1)">Append</button>
<button ng-click="array.pop(array.length-1)">Remove</button>
<button>Add</button>
</body>
</html>
You can create a calcSum function in the scope, which calculates the sum of the entered values and stores the sum in the scope. Then you can call that function with ng-click.
Note that I changed your array to directly contain the values entered in the textbox. This way you can directly calculate the sum of the array without having to loop through the inputs manually.
var app = angular.module('abc', []);
app.controller('myCtrl', function($scope) {
$scope.array=[0];
$scope.calcSum = function() {
$scope.sum = $scope.array.reduce(function(total, num) {
return total + num;
})
}
});
<html ng-app="abc" ng-controller="myCtrl">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-repeat="a in array track by $index">
Textbox {{$index}} <input type="number" ng-model="array[$index]">
</div>
<button ng-click="array.push(0)">Append</button>
<button ng-click="array.pop(array.length-1)">Remove</button>
<button ng-click="calcSum()">Add</button>
<div>{{sum}}</div>
</body>
</html>
I am working on angularJS and Html,
from my angularJs side I am getting two fields they are
name.firstname, name.lastname,
So in my html i will be able to display it like this
<div>{{name.firstname}}-{{ name.lastname}}</div>
but i want to display these two values in a single text box separated by ","
I tried as given below but it is not working
<div><input type ='text' ng-model ="name.firstname" , "name.firstname"/></div>
please suggest me how to do this in a simple way without using any directives
In this case you can assign model to your input and assign it the sum of fname and lname:-)
<div ng-controller="MyCtrl">
<div>
<input type ='text' ng-model ='name'"/>
</div>
</div>
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.fname = 'raciit';
$scope.lname = 'gulati';
$scope.name=$scope.fname+$scope.lname;
}
Fiddle
I am creating an HTML Invoice. The system we use outputs the data to html in HTML. I put the relevant tag (such as {{order_purchasedate}}) and the values are displayed there instead.
I need the invoice to display the total order weight for all items in the order. The weights will be displayed as numbers in a list for example "60 80 120" with just a space separating them.
How can I add the numbers is html and only display the total?
I know I could use Java but I am not familiar with this. If someone could help that would be great.
Ben
*edit I have made an attempt at the code. I am struggling getting the output. I am sure you guys must think me an idiot!
<!DOCTYPE html>
<html>
<body>
<h1>Invoice</h1>
<p id="order_weight"></p>
<script>
getTotal = function(values){
var total = values.split(" ").reduce(function(a,b){
a = parseInt(a)
b = parseInt(b)
return a+b
});
return total
}
document.getElementById("order_weight").innerHTML = getTotal(a+b);
</script>
</body>
</html>
You can use JavaScript to take your values and calculate total value.
getTotal = function(values){
var total = values.split(" ").reduce(function(a,b){
a = parseInt(a)
b = parseInt(b)
return a+b
});
return total
}
and then just call that function
getTotal(x)
where x is your list
Here is the working example:
http://jsfiddle.net/o89f1mj5/1/
<body>
<h1>Invoice</h1>
<p id="order_weight"></p>
<input id="total" name="total" type="text"></input>
<input id="totalBtn" type="button" value="Get Total" onClick="getTotal();"></input>
</body>
<script>
function getTotal() {
var values = $('#total').val();
alert(values);
var total = values.split(" ").reduce(function(a,b){
var a = parseInt(a);
var b = parseInt(b);
return a+b;
});
document.getElementById('order_weight').innerHTML = "Value: " + total;
}
</script>
Working JS Fiddle: http://jsfiddle.net/o89f1mj5/9/
In the JSFiddle put "5 15 30" into the text box (without the quote of course) and it will make the paragraph be 50
This is what #mgibala did above using a Textbox and a Button. His answer should be accepted I am just giving you it in application with a variable input option.