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

Last Updated : 31 Jul, 2024

In this article, we will see how to assign and read the two different submit buttons' values in AngularJS. Usually, many websites provide relevant kinds of information and also supportive submit buttons like one or more than one also to proceed further.

For instance,

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.
On the main opening page of any website, we can see “Register with Email“, “Login”, “Login via Google”, “Login via Facebook” etc.,

Each submission needs 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 named a simple app.
ng-controller: Defines the application controller. Here “MainCtrl” is a JavaScript function that is going to help out to handle multiple submit buttons 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 values and another for submitting. 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.

Example 1: This example describes the assign and reads values of two different submit buttons in AngularJS.

HTML

<!DOCTYPE html>
<html ng-app="simpleapp">

<head>
  <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js">
  </script>
</head>

<body style="text-align: center;" 
      ng-controller="MainCtrl as mainctrl">
  <h1 style="color: green;">GeeksforGeeks</h1>
  <h3>
    Assign and read values of two different
    submit buttons using AngularJS
  </h3><br>
  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 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" & On click of the "Submit" button, the output is seen:

Example 2: In the below example, multiple submits 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 a self.user because, For the second form, our ng-model is mainctrl.user.username and mainctrl.user.password.

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

HTML

<!DOCTYPE html>
<html ng-app="multiformapp">

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js">
    </script>
</head>

<body style="text-align: center;"
      ng-controller="MainCtrl as mainctrl">
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h3>
        Assign and read values of two different
        submit buttons using AngularJS
    </h3>
    <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 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:

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 an MVC framework, a clean neat user interface in HTML, two-way binding, etc., Depending upon the requirements, we can handle events for different submit buttons easily and divert the flow accordingly.

priyarajtt

Improve

Article Tags :

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

Explanation of ng controls:

Similar Reads

Thank You!

What kind of Experience do you want to share?