how to update form hidden data before submssion in AngularJS?

Question

I have my model variables already bound to some hidden input fields in a form.

When the user hits the submit button, I try to update these fields by updating the corresponding bound model variables but they do not change (I noticed that when dumping the request on the server, I always receive the old data), also I noticed that every thing works O.K when I use normal text inputs rather than hidden inputs

Here is my code:

Form

<form name="bla bla" action="bla bla" method="post" ng-submit="updateForm()"> 
  <input type="hidden" name="token" ng-model= "extra.token" />
  <input type="hidden" name="filters" ng-model="extra.filters" />
  <button type="submit">
    submit form
  </button>
</form>

Controller

var app = angular.module(... // bla bla

app.controller('MyController', ['$scope', ctrlDef]);

function ctrlDef($scope) {
  $scope.extra = {};
  $scope.extra.token = '';
  $scope.extra.filters = '';

  $scope.updateForm = function() {
      $scope.extra.token = 'test1';
      $scope.extra.filters = 'test2';
  };
}

Do you want to reload the screen on form submit? Because if you use form with action attribute, it will reload the page. Is this the requirement or you can fire POST XHR call? — Shripal Soni, Feb 08 '16 at 15:20
@ShripalSoni no, actually the form submits to a hidden `iframe` which in turns uses the hidden data to generate a downloadable file — Abdo Adel, Feb 08 '16 at 15:21
instead of type="hidden" have you tried ng-hide="true" and type="text" — Harbinger, Feb 08 '16 at 15:36
@Harbinger nice idea, it solves my problem :) but I wonder if there is a way to use hidden inputs ? [text inputs with `ng-hide='1'` causes some flickers (they are shown while the template is rendered and hidden later)] — Abdo Adel, Feb 08 '16 at 15:43
Looks like this should answer your problem. http://stackoverflow.com/questions/18446359/angularjs-does-not-send-hidden-field-value — Harbinger, Feb 08 '16 at 15:44

score 1 · Answer 1 · answered Feb 08 '16 at 15:24

1

I don't think ngSubmit will reliably be run before the POST request if you use the standard HTML form attributes (method, action, etc). A better idea would be to use the $html service to send your request. This also has the benefit of being asynchronous, so you shouldn't need a hidden iframe like you do at the moment.

app.controller('MyController', ['$scope', '$html', ctrlDef]);

function ctrlDef($scope, $html) {
  $scope.extra = {};
  $scope.extra.token = '';
  $scope.extra.filters = '';

  $scope.updateForm = function() {
      $scope.extra.token = 'test1';
      $scope.extra.filters = 'test2';

      $http.post(extra, "your post url here").then(function (response) {
          // do stuff with the response here...
      });
  };
}

answered Feb 08 '16 at 15:24

Joe Clay

33,401
4
85
85

I don't want to use XHR calls – Abdo Adel Feb 08 '16 at 15:26
Having the regular `action` is intended because the form submits to a hidden `iframe` used in downloading a file in the same page – Abdo Adel Feb 08 '16 at 15:28
I don't see how this couldn't be achieved just as easily with a XHR - that said, I don't know your codebase, so I could be wrong! – Joe Clay Feb 08 '16 at 15:28
The response is a file, if there is a way to download a file in JavaScript without external libraries or popup windows then XHRs are welcomed :), anyway thanks for your suggestion – Abdo Adel Feb 08 '16 at 15:38
Ah, yeah, that can be a tricky one if you're not able to use external libraries, not sure how you'd go about that. Sorry I couldn't be of more help! – Joe Clay Feb 08 '16 at 15:42

how to update form hidden data before submssion in AngularJS?

1 Answers1