Putting value to hidden input and then getting it in POST variable

Question

I am trying to get an input value with AngularJS from input field to another hidden input field (in another form in the same page) so I can transmit it later if user presses submit on the other form.

<div ng-app="">

    <p>Name: <input type="text" ng-model="name"></p>
//down the code...
    <form name="whatever" method="post">
        <input type="hidden" ng-bind="name" value="">
    </form>

</div>

When I inspect the code after I put data in the visible input field all looks fine - so when I change the data inside the visible input I can see it in the hidden input too but I can't see it in the POST variable after I submit the form - I guess it's because it doesn't change the value field in the hidden input just what between the and .

How can I get this to work so that I change the value of an hidden input - but not what between the opening and closing input field?

Angular forms are typically never submitted. Instead, they have an ng-submit function or an ng-click action on their main button, which does whatever it wants. Hidden fields, are typically useless, since these functions use the model, in the scope, to do whatever they want. What does your real code do with the form? — JB Nizet, Jan 18 '15 at 15:50
Thank you Himmet, it solved it! I should write it as an answer... JB - what Himmet told solve it for me... — dreamoki, Jan 18 '15 at 16:02

score 1 · Accepted Answer · answered Jan 18 '15 at 16:07

1

Just Replace ng-bind with ng-value like:

<input type="hidden" ng-value="name">

(Credit to Himmet Avsar)

answered Jan 18 '15 at 16:07

dreamoki

43
8

Mikko Viitala · Answer 2 · 2015-01-18T17:28:47.223

I see you answered yourself already. Anyway you should go for more "angular way" when handling your forms, letting angular do the "posting". For example:

HTML template

<body ng-controller="MainCtrl">
  <form name="form1" 
        ng-submit="submit()">
    Name: <input type="text" 
                 class="form-control" 
                 name="name" 
                 ng-model="user.name" 
                 required>
    <div class="alert alert-warning" 
         ng-show="form1.name.$error.required">
         Required field
    </div>
    <input type="submit" 
           class="btn btn-primary" 
           value="submit">
  </form>
  <div class="alert"  
       ng-class="{ 'alert-success': response.status === 200, 'alert-danger': response.status !== 200 }"
       ng-show="response !== null">
    DATA: {{ response.data }}<br>
    HTTP {{ response.status }} {{ response.statusText }} 
  </div>
  <hr>
  <form name="form2" ng-submit="submit()">
    Name: <input type="text" 
                 class="form-control" 
                 ng-model="user.name">
    Age: <input type="number" 
                class="form-control" 
                min="1" 
                max="100" 
                ng-model="user.age">
    <input type="submit" 
           class="btn btn-primary" 
           value="submit" disabled>
  </form>
</body>

JavaScript

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $http) {
  $scope.user = {};
  $scope.response = null;

  $scope.submit = function() {
    $scope.response = null;

    $http({
      method: 'POST',
      url: 'http://jsonplaceholder.typifcode.com/posts',
      data: $scope.user,
      headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).then(function (response) {
      $scope.response = response;
    }).catch(function (response) {
      $scope.response = response;
    });
  };
});

You'll get something like

imgur

Related plunker here http://plnkr.co/edit/M7zQzp

Thanks, to be honest I was trying to solve a one pointed problem - so using more of the benefit of angularJS could help me in other cases - but this time I only wanted to solve this problem with a minimal approach. what is the benefits of what you are suggesting? — dreamoki, Jan 19 '15 at 12:31
Well.. there are many. For example you can do processing on the form data before it's send, no need for page refresh after post, no need for hidden fields... etc https://docs.angularjs.org/api/ng/directive/form — Mikko Viitala, Jan 19 '15 at 12:51

Putting value to hidden input and then getting it in POST variable

2 Answers2