CODEWITHSUNDEEP
javascripthtmlangularjsforms
John Friday
John Friday

Reputation: 133

How to submit angular js form using ng-click?

I want to provide id and date though the html form and then submit these values to the js controller and execute one of my endpoint with that values (adminId and adminDate). I think something is missing.

// adminForm.html

<form class="form-horizontal" role="form" ng-controller="AdminController">

    <input class="form-control" id="adminId" placeholder="adminId" ng-model="formInfo">

    <input class="form-control" id="adminDate" placeholder="adminDate" ng-model="formInfo">

    <button type="submit" ng-click="adminUpload()" class="btn btn-success">AdminUpload</button>

</form>

// AdminController.js

define([], function() {

    function AdminController($scope, $http) {

        $scope.adminUpload = function() {
        $http.get('/app/endpoint/$scope.adminId/$scope.adminDate').success(
            function () {
                alert("Something went wrong!");
            }
            ).error(
                function () {
                    alert("Everything fine!");
                }
            );
        };

    }

    AdminController.$inject = ['$scope', '$http'];

    return AdminController; 
    }
);

Upvotes: 0

Views: 152

Answers (1)

joseglego
joseglego

Reputation: 2109

There are a few errors in your code, the template, and the controller. I'll list them one by one to explain and provide one example,

The live example

https://plnkr.co/edit/G3f6X0mUVwQ4Nxj2

The Explanation

In Template:

  • Your ng-model in both inputs are referencing the same model. You should make reference to different elements (or different attributes of the same element). So, I used other elements for the sake of the example.
  • Your button is type=submit. It's a problem because the submit default behavior is POST the form information (and load the form's action). So, I redefined the button just as a button.

In Controller:

  • You're not interpolating the string on the request of the URL. You're always fetching '/app/endpoint/$scope.adminId/$scope.adminDate'. You should be fetching '/app/endpoint/(value of $scope.adminId)/( value of $scope.adminDate)'.So I used a template literal (The strings with the back quote symbol)and concatenate the strings with the variable values.
  • You were using success/error functions in the inverse order. Your success says "Something went wrong!" and your error says "Everything fine!"
  • Based on AngularJS documentation (https://docs.angularjs.org/api/ng/service/$http), there are no success/error functions after $http.get, so even when they were so used and they were part of AngularJS maybe they aren't in your version. So, my recommendation would be to use the recommendation function which is then(successCallback, errorCallback)

After all this explanation the code would be

template

      <form class="form-horizontal" role="form">
        <input
          class="form-control"
          id="adminId"
          placeholder="adminId"
          ng-model="adminId"
        />

        <input
          class="form-control"
          id="adminDate"
          placeholder="adminDate"
          ng-model="adminDate"
        />

        <button type="button" ng-click="adminUpload()" class="btn btn-success">
          AdminUpload
        </button>
      </form>

controller

 $scope.adminUpload = function () {
    const url = `/app/endpoint/${$scope.adminId}/${$scope.adminDate}`;
    alert(url);
    $http
      .get(url)
      .then(function () {
        alert('Everything fine!');
      }, function () {
        alert('Something went wrong!');
      });
  };

Upvotes: 1

Related Questions