AngularJS does not send hidden field value

how to get hidden field value in angular 6
angular material hidden input
angularjs input value binding
angularjs get input value
ng-value checkbox angularjs
formbuilder hidden field
angularjs get input value by id
ng-value not working

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:

<input type="hidden" name="someData" ng-model="data" /> {{data}}

Please note, the correct value in data is shown.

The form looks like a standard form:

<form id="aaa" name="aaa" action="/reports/aaa.html" method="post">
...
<input type="submit" value="Export" />
</form>

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?

You cannot use double binding with hidden field. The solution is to use brackets :

<input type="hidden" name="someData" value="{{data}}" /> {{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:

<input type="hidden" name="someData" ng-value="data" />

Here is a fiddle using ng-value with an hidden input: http://jsfiddle.net/6SD9N

property editor binding using hidden input field, Or does the ng-model binding not work for hidden input fields? .com/questions/​18446359/angularjs-does-not-send-hidden-field-value. <input type="submit" value="Export" /> </form>. 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.

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.

<input type="text" name="someData" ng-model="data" style="display: none;"/>

AngularJS does not send hidden field value, 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="". javascript - type - AngularJS does not send hidden field value 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. Directly assign the value to model in data-ng-value attribute.

In the controller:

$scope.entityId = $routeParams.entityId;

In the view:

<input type="hidden" name="entityId" ng-model="entity.entityId" ng-init="entity.entityId = entityId" />

Using Hidden Input in a Form in AngularJS, Another useful code snippet for those of you dealing with angularjs applications. Setting a Default Value for Select Elements in AngularJS Using Hidden Input in a Form This ended up being an interesting little problem for me during one of my you can use to pass hidden data to any form submission using AngularJS. The form is simple - it has submit button and a hidden field holding the ID value. But it does not work. The value is empty. I updated the default angular example to display the situation - the todo text is in hidden field.

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:

<input type="hidden" name="item.Name" ng-model="item.Name" ng-update-hidden />

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.

Angular way to get a value of a hidden element for use in a , Hidden elements are not really supported by AngularJS. Now I did set the value of the hidden field to what I wanted it to be in the controller, so maybe that is the To unsubscribe from this group, send email to angular+u. Angular just ignores hidden input elements.(ng-model doesn't support input field) If you want that value in ng-model it self, then it shouldn't be of type hidden. You could solve this problem by hiding that div by doing display:none instead of giving type hidden or using ng-show directive make it hidden.

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 
}

}])

HTML DOM Input Hidden value Property, Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we  Browsers are not supposed to display elements that have the hidden attribute specified. Browsers attach "display: none" styles to elements with hidden attribute. Let’s see some Angular 2 code. So here is Angular 2 component class with only one property hideElement.

ngValue, Show / Hide Table of Contents It is mainly used on input[radio] and option elements, so that when the element is to an input element such as an input[text] or a textarea , when that element does not use ngModel. AngularJS expression​, whose value will be bound to the value attribute and value property of the element. Usually the wyswyg script will made the target textarea hidden and using iframe to update the textarea value. Since ng-model does not work with the hidden element, I can't get the value of the textarea through the scopeinstead I have to use a js selector to get the value or I can modify the script to set the textarea to visible=false instead of display=none.

angularjs gives 'undefined' for hidden field with php session variable , I have found a lot or resources on how to pass a hidden input field value to an angularjs script, but not if that value is being read from a php session. This is my  Other than the above, but not suitable for the Qiita community (violation of guidelines) Angularでのtype="hidden"ではng-valueをつかう。 Node.js input Angular

How to get hidden field array values - JavaScript, Number of hidden fields can be different for different cases. I need to get the values of these hidden fields and then pass it as query parameter. that using the name attribute in this way is not the best method of to achieving what you want. depuis L'angle 1.2, vous pouvez utiliser la directive' ng-value ' pour lier une expression à l'attribut value de l'entrée. Cette directive devrait être utilisée avec la radio d'entrée ou la case à cocher mais fonctionne bien avec caché entrée.

Comments
  • Hmm... how about type text, display: none;? It's ugly tho. Angular ignores hidden elements.
  • put that as the answer @tymeJV!
  • I use the following syntax to bind a value: <input type="hidden" required ng-model="data.userid" ng-init="data.userid=pivot.id" /> . This might not be the proper way of doing but it works for me.
  • Awesome. Thanks a lot. I was almost going with hiding the textfield, but now i feel this is great workaround.
  • Great. And also you can use ng-value="modelName" to do it without brackets.
  • That's right, since Angular 1.2, you can use ng-value to bind an expression to the value attribute, the answer is up to date.
  • do you really need a hidden field anymore when you use AngularJS? on ngSubmit you hit a controller all your data is completely visible for access, and you send it all via some $http service.
  • Thanks a lot. The fact that ng-model cannot be used for hidden input should be documented in AngularJS IMO.
  • Thanks! I thought in the same direction, but I simply had to prefer the {{}} Solution from Mickael.
  • clever / smart solution
  • Good point... I would rather do this only in the controller next time
  • i'm falling in love with ng-init
  • Nooo . in loop it makes much trouble and assigns last value to all entityId if entityId is an array
  • Is anyone else having trouble getting this solution to work? The issue is that the ngModel parameter is undefined when the directive is parsed and executed, thus, the $watch isn't added.