Angularjs Get Input Value By Id
Last Updated : Mar 11, 2024
IN - Angular JS | Written & Updated By - Pragati
In this tutorial we will show you the solution of angularjs get input value by id, as we know angularjs similar to javascript the only different is we have to use directives instead of attributes used in javascript.
Both are works in similar way so here we accessing input value like in javascript by ‘getElementById()’ method but with ‘angular.element()’ angularjs method also then only we can achieve our result.
Step By Step Guide On Angularjs Get Input Value By Id :-
In our application we defined our app and controller within application we defined two <input> tags for collect user input created input field and submit button for submit the input value to the console by using ‘ng-click’ directive.
When user filled input field then clicks on submit button it loads function ‘fun()’.
This function defined within controller, here we collects user input by ‘‘getElementById()’ and angular.element()’ methods then result displayed on console using ‘console.log()’ method.
<!DOCTYPE HTML>
<html>
<head>
<title>Angularjs Get Value By ID</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app=angular.module("myapp",[]);
app.controller("ctrl",function($scope){
$scope.fun=function(){
console.log(angular.element(document.getElementById('in')).val());
}
});
</script>
</head>
<body ng-app="myapp" ng-controller="ctrl">
<input type="text" id="in">
<input type="submit" ng-click="fun()">
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- This file contains angularjs is distributed as a javascript file and must added to webpage by using <script> tag.
- In controller we created ‘app’ variable used to store our application ‘myapp’ and in application we need to append controller ‘ctrl’ to the application ‘app’ variable for access all elements values.
- Using $scope object we defined our function within function we defined fun() function by using $scope object. Here using ‘angular.element() and getElementById()’ methods we collects user input by ID attribute defined in input field.
- Both methods used to collects value of element by using id attribute then printed on console by console.log() method it will shows result only on console not shown on webpage.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contains coding of entire website blocks and elements described here. In body we defined application and controller ‘myapp,ctrl’ using directives of ‘ng-app,ng-controller’.
- First input tag created for getting input from user and another for create submit option to submit user inputs. Here we defined id attribute with value ‘in’ using that we collected inputs from user.
- The ng-click directive will loads fun() function when user clicks on submit.
- Both </body> ,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to get input from users by id attribute using angularjs.
When we executing angularjs file some of those needs internet connection because we used some external library supports so we need to use internet connection when you’re facing problems.
In our program when user executing on browser it will display input field and submit button after entered value in input field when user clicks on submit button it print result on console.
For see console result we need to right click on empty page of browser then select last option from that ‘inspect’ it opens panel on browsers left side there we can see results.
I hope this tutorial on angularjs get input value by id helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
