AngularJS Force submit doesn't send some hidden input values

Question

I have a page with an angular app. Everything goes fine, the final PHP catches all the values from the inputs except the 'prods' field which is empty

HTML Code

<form name="goToPaymentForm" id="goToPaymentForm" ng-form-commit action="payment.php" method="POST">
      <input type="hidden" id="payment_method" name="payment_method" ng-value="payment" />
      <input type="hidden" id="prods" name="prods" ng-value="prods" />
      <input type="hidden" id="terms" name="terms" ng-value="legalTermsAccepted" />
    </form>

Angular Code

app.directive("ngFormCommit", [function(){
    return {
        require:"form",
        link: function($scope, $el, $attr, $form) {
            $form.commit = function() {
                $el[0].submit();
            };
        }
    };
}]);

$scope.goToPayment = function($form){
    $scope.prods = JSON.stringify($scope.cart);
    $form.commit();
}

In console I catch this text:

Resource interpreted as Document but transferred with MIME type application/json

Why I don't use AJAX for sending? I submit the form because I have a controller which will redirect the browser to the proper secure payment platform (the user cannot interact with this, despite of JavaScript redirection methods). What am I doing wrong? Why does my prods hidden field have an empty value?

Final PHP Result

{
    payment_method: "paypal",
    prods: "",
    terms: "true"
}

If i do console.log($scope.prods); just before the commit() function the value is set perfectly. — Programador Adagal
– Programador Adagal, Commented Jul 14, 2016 at 9:40

Mehdi Benmoha · Accepted Answer · 2016-07-14 09:40:33Z

1

I think you should bind the prods with the ng-model directive so that you can get it's value in AngularJS. Like this:

<input type="hidden" ng-model="prods" id="prods" name="prods" ng-value="prods" />

And here's the documentation about this directive: https://docs.angularjs.org/api/ng/directive/ngModel

answered Jul 14, 2016 at 9:40

Mehdi Benmoha

3,9853 gold badges25 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Programador Adagal Over a year ago

Same result, but thanks for your response. Maybe it can be the length of the value or some character?

Mehdi Benmoha Over a year ago

Well, the problem is actually because you're sending JSON through standard form submit. Try adding this attribute to your form tag, like this : <form enctype='application/json'> . Reference: w3.org/TR/html-json-forms

Programador Adagal Over a year ago

Then why if I use out of angular code from jQuery like $('#prods').val(JSON.stringify($scope.cart))it works????

Collectives™ on Stack Overflow

AngularJS Force submit doesn't send some hidden input values

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related