Skip to content
Related Articles

Related Articles

Improve Article

How to assign and read values of two different submit buttons using AngularJS ?

  • Last Updated : 02 Nov, 2020

Introduction: Usually, many websites provide relevant kinds of information and also supportive submit buttons like one or more than one also to proceed further.
For example, 

  • Users will be asked to fill out the form and there are options in the form of submit buttons like “submit the form”, “Clear out the fields” or even “Links to similar pages” etc.
  • In the main opening page of any websites, we can see “Register with Email“, “Login”, “Login via Google”, “Login via Facebook” etc.,

Each submits need to be handled in such a way that they need to do their respective action. In this article, let us see how we can do that via AngularJS by our following examples.

Explanation of ng controls:

  • ng-app: Our root element and it is a simple app.
  • ng-controller: Defines the application controller. Here “MainCtrl” is a JavaScript function which is going to help out to handle multiple submit buttons as the way we like.
  • We define a controller with a variable exposed on its instance called username as well as password.
  • We pointed the value for the ng-model at the same username variable on the MainCtrl.
  • Hence any changes in the input box will update the model in our controller.
  • When the value of the variable changes in the controller, the input field gets the value updated automatically.
  • We can clearly see that code is not using any id or CSS, because of this ng-model, values are getting updated automatically
  • ng-click->On button click actions need to be performed.
  • Two separate functions are written, one for clearing vales and another for submit. Hence, clean separation is happening via these different functions. Like this “n” number of functions can be written and divert the functionality according to the requirements.

The advantage is the controller has never reached out in UI, no JQuery selector, no findElementById, etc involved. On updating model fields in the controller, UI is updated and also latest values can be grabbed in a nice AngularJS way.

Implementation Code:



HTML




<html ng-app="simpleapp">
  
<body ng-controller="MainCtrl as mainctrl">
    UserName :
    <input type="text" ng-model="mainctrl.username">
    <br>
    <br>
    Password :
    <input type="password" ng-model="mainctrl.password">
    <br>
    <br>
    <button ng-click="mainctrl.clear()">
        Clear Values
    </button>
  
    <button ng-click="mainctrl.submit()">
        Submit
    </button>
  
    <script src=
    </script>
  
    <script type="text/javascript">
        angular.module('simpleapp', [])
            .controller('MainCtrl', [function () {
                var self = this;
                self.clear = function () {
  
                    // Clearing fields, given
                    // as empty values
                    self.username = '';
                    self.password = '';
  
                };
                self.submit = function () {
                    console.log('yOUR INFORMATION ',
                        self.username, self.password);
                };
            }]);
    </script>
</body>
  
</html>

Output: 

On click of “Clear Values”, the output is seen as shown in the image
 

clearfields-> On clicking of Clear Values, the entered values are erased

On click of “Submit”, the output is seen as shown in the image
 

Submit→When submit button is clicked

Example 2: In the below example, multiple submits are happen via two different forms and two submit buttons. i.e. “ng-submit” is used instead of button controls.

In the first form, the username and password are directly on the controller whereas, for the second form, they are bound to a user object in the controller. Hence, while submitting the form, the output code differs a little. i.e. for the second form, we can directly access as self.user because For the second form, our ng-model is mainctrl.user.username and mainctrl.user.password.

So, during form2 submit, we can get the value as self.user. In both ways, we can prefer. But if we bound to an object, all the contents of the form are accessed via that object easily. 

HTML




<html ng-app="multiformapp">
  
<body ng-controller="MainCtrl as mainctrl">
  
    <form ng-submit="mainctrl.form1submit()">
        <input type="text" ng-model="mainctrl.username">
        <input type="password" ng-model="mainctrl.password">
        <input type="submit" value="Form 1 Submit">
    </form>
  
    <form ng-submit="mainctrl.form2submit()">
        <input type="text" ng-model="mainctrl.user.username">
        <input type="password" ng-model="mainctrl.user.password">
        <input type="submit" value="Form 2 Submit">
    </form>
  
    <script src=
    </script>
  
    <script type="text/javascript">
        angular.module('multiformapp', [])
            .controller('MainCtrl', [function () {
                var self = this;
                self.form1submit = function () {
  
                    // Create user object to send
                    // to the server
                    var user = { username: self.username,
                            password: self.password };
  
                    console.log('First form information ', 
                            self.username, self.password);
                };
                self.form2submit = function () {
                    console.log('Second form information ',
                            self.user);
                };
            }]);
    </script>
</body>
  
</html>

Output:

  • On click of “Form 1 Submit” output is shown as

FirstForm Submit→When Form1 Submit button is clicked

  • On click of “Form 2 Submit” output is shown as

SecondForm Submit → When Form2 Submit is clicked

While verifying the output of both forms submits, Form 2 Submit provides an easier way of Accessing model objects.

Conclusion: AngularJS is very user-friendly and as it provides MVC framework, the clean neat user interface in HTML, two-way binding, etc., Depends upon the requirements, we can handle events for different submit buttons easily and divert the flow accordingly.




My Personal Notes arrow_drop_up
Recommended Articles
Page :