AngularJS does not send hidden field value

Question

For a specific use case I have to submit a single form the  old way   Means  I use a form with action     The response is streamed  so I am not reloading the page  I am completely aware that a typical AngularJS app would not submit a form that way  but so far I have no other choice   That said  i tried to populate some hidden fields from Angular    lt input type  hidden  name  someData  ng-model  data    gt    data     Please note  the correct value in data is shown   The form looks like a standard form    lt form id  aaa  name  aaa  action   reports aaa html  method  post  gt       lt input type  submit  value  Export    gt   lt  form gt    If I hit submit  no value is sent to the server  If I change the input field to type  text  it works as expected  My assumption is the hidden field is not really populated  while the text field actually is shown due two-way-binding   Any ideas how I can submit a hidden field populated by AngularJS

User · Answer

I achieved  this via -    lt p style  display none  gt   user role  store user    lt  p gt

User · Answer

Here I would like to share my working code     x000D   x000D   lt input type  text  name  someData  ng-model  data  ng-init  data 2  style  display  none    gt  x000D  OR x000D   lt input type  hidden  name  someData  ng-model  data  ng-init  data 2   gt  x000D  OR x000D   lt input type  hidden  name  someData  ng-init  data 2   gt  x000D   x000D   x000D

User · Answer

I use a classical javascript to set value to hidden input   scope SetPersonValue   function  PersonValue        document getElementById  TypeOfPerson   value   PersonValue      if  PersonValue     person                 document getElementById  Discount   checked   false           scope isCollapsed   true            else                scope isCollapsed   false

User · Answer

Directly assign the value to model in data-ng-value attribute  Since Angular interpreter doesn t recognize hidden fields as part of ngModel    lt input type  hidden  name  pfuserid  data-ng-value  newPortfolio UserId   data Id   gt

User · Answer

You cannot use double binding with hidden field  The solution is to use brackets     lt input type  hidden  name  someData  value    data      gt    data     EDIT   See this thread on github   https   github com angular angular js pull 2574  EDIT   Since Angular 1 2  you can use  ng-value  directive to bind an expression to the value attribute of input  This directive should be used with input radio or checkbox but works well with hidden input   Here is the solution using ng-value    lt input type  hidden  name  someData  ng-value  data    gt    Here is a fiddle using ng-value with an hidden input  http   jsfiddle net 6SD9N

User · Answer

Just in case someone still struggles with this  I had similar problem when trying to keep track of user session userid on multipage form   Ive fixed that by adding            when   q2  uid  in the routing         when   q2  uid             templateUrl   partials q2 html           controller   formController           paramExample  uid          And added this as a hidden field to pass params between webform pages   lt  lt  input type  hidden  required ng-model  formData userid  ng-init  formData userid uid       Im new to Angular so not sure its the best possible solution but it seems to work ok for me now

User · Answer

Found a strange behaviour about this hidden value    and we can t make it to work   After playing around we found the best way is just defined the value in controller itself after the form scope    controller  AddController     scope   http   state   stateParams  function  scope   http   state   stateParams          scope routineForm            scope routineForm hiddenfield1    whatever value you pass on         scope sendData   function       JSON http post action to API

User · Answer

update  tymeJV  s answer  eg     lt div style  display  none  gt       lt input type  text  name  price  ng-model  price  ng-init  price    lt     product price to s   gt    gt    lt  div gt

User · Answer

I had facing the same problem   I really need to send a key from my jsp to java script  It spend around 4h or more of my day to solve it   I include this tag on my JavaScript JSP    x000D   x000D    scope sucessMessage   function       x000D       var message         scope messages sucess  format  scope portfolio name  scope portfolio id   x000D        scope inforMessage   message  x000D       alert message     x000D    x000D    x000D   x000D  String prototype format   function     x000D      var formatted   this  x000D      for  var arg in arguments     x000D          formatted   formatted replace       arg        arguments arg    x000D        x000D      return formatted  x000D     x000D   lt  -- Messages definition -- gt  x000D   lt input type  hidden   name  sucess    ng-init  messages sucess   lt fmt message  key  portfolio create sucessMessage    gt     gt  x000D   x000D   lt  -- Message showed affter insert -- gt  x000D   lt div class  alert alert-info  ng-show   inforMessage length  gt  0   gt  x000D        inforMessage   x000D   lt  div gt  x000D   x000D   lt  -- properties x000D    portfolio create sucessMessage Portf u00f3lio  0  criado com sucesso  ID  1   -- gt  x000D   x000D   x000D    The result was  Portf  lio 1 criado com sucesso  ID 3   Best Regards

User · Answer

In the controller    scope entityId    routeParams entityId    In the view    lt input type  hidden  name  entityId  ng-model  entity entityId  ng-init  entity entityId   entityId    gt

User · Answer

I ve found a nice solution written by Mike on sapiensworks  It is as simple as using a directive that watches for changes on your model    directive  ngUpdateHidden  function         return function scope  el  attr            var model   attr  ngModel            scope  watch model  function nv                el val nv                           and then bind your input    lt input type  hidden  name  item Name  ng-model  item Name  ng-update-hidden   gt    But the solution provided by tymeJV could be better as input hidden doesn t fire change event in javascript as yycorman told on this post  so when changing the value through a jQuery plugin will still work   Edit I ve changed the directive to apply the a new value back to the model when change event is triggered  so it will work as an input text    directive  ngUpdateHidden   function          return           restrict   AE     attribute or element         scope              replace  true          require   ngModel           link  function   scope  elem  attr  ngModel                 scope  watch ngModel  function  nv                    elem val nv                               elem change function        bind the change event to hidden input                  scope  apply function                          ngModel  setViewValue   elem val                                                               so when you trigger     yourInputHidden   trigger  change   event with jQuery  it will update the binded model as well

User · Answer

You can always use a type text and display none  since Angular ignores hidden elements  As OP says  normally you wouldn t do this  but this seems like a special case    lt input type  text  name  someData  ng-model  data  style  display  none    gt

User · Answer

Below Code will work for this IFF it in the same order as its mentionened make sure you order is type then name  ng-model ng-init  value  thats It

[javascript] AngularJS does not send hidden field value

Examples related to javascript

Examples related to forms

Examples related to angularjs