AngularJS: assigning and reading values of two different submit buttons

All we need is an easy explanation of the problem, so here it is.

I have a form with two submit input types. Depending on which submit is clicked I want to save the form either as draft or a correct one.

I was thinking about adding a value/property to the submit inputs, maybe ng-model attribute..

<form ng-submit="submitNew()">
  <div>
    Text:
    <input type="text" ng-model="myForm.text" />
  </div>
  <div>
    <input type="submit" name="correct" value="Add new" />
  </div>
  <div>
    <input type="submit" name="draft" value="Save as draft" />
  </div>
  </div>
</form>

In controller I would like to add this as a boolean value (“myForm.isDraft”) to data sent with POST method:

myApp.controller('myAppController', ['$scope', '$http', '$log',
  function($scope, $http, $log) {
    $scope.submitNew = function() {
      $http({
        method: 'POST',
        url: '/app/submit',
        data: {
          text: $scope.myForm.text,
          isDraft: $scope.myForm.isDraft,
        }
      })
    };
  }
]);

How does it work with inputs of submit type?

Edit – a step forward:

After changing submits to:

<div>
  <input type="submit" ng-click="isDraft = false" value="Add new" />
</div>
<div>
  <input type="submit" ng-click="isDraft = true" value="Save as draft" />
</div>

and adding log inside $scope.submitNew = function() I see that $scope.isDraft is either true or false depending on which button is clicked. However, in the data sent to the back-end it is always false.

Controller now:

$scope.submitNew = function() {
  $log.info("Log: isDraft: " + $scope.isDraft);
  $http({
    method: 'POST',
    url: '/app/submit',
    data: {
      text: $scope.myForm.text,
      isDraft: $scope.myForm.isDraft = $scope.isDraft,
    }
  })
};

If I change isDraft: $scope.myForm.isDraft = $scope.isDraft to isDraft = $scope.isDraft it’s still not working properly.

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Try putting it on a function like

$scope.setDraft = function(isDraft) {
  $scope.isDraft = isDraft;
  //try console.log() to see if the values are correct
  //but if its keeps return false try adding this $scope.$apply();
}

and in your html would be like this

<div>
  <input type="submit" ng-click="setDraft(false)" value="Add new" />
</div>
<div>
  <input type="submit" ng-click="setDraft(true)" value="Save as draft" />
</div>

or you can use @Eric suggestion instead using ng-submit, just create new function and use on ng-click like this

$scope.submitNew = function(isDraft) {
  $http({
    method: 'POST',
    url: '/app/submit',
    data: {
      text: $scope.myForm.text,
      isDraft: isDraft,
    }
  })
};

and in the html would be like this

<form>
  <div>
    Text:
    <input type="text" ng-model="myForm.text" />
  </div>
  <div>
    <input type="button" ng-click="submitNew(false)" name="correct" value="Add new" />
  </div>
  <div>
    <input type="button" ng-click="submitNew(true)" name="draft" value="Save as draft" />
  </div>
  </div>
</form>

Method 2

Create a variable that is set by an ng-click on each submit button, then you can track which one was clicked.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply