动态创建表单并提交表单后没有POST数据

Question

I am creating a little shop system for myself (learning purpose) using AngularJS and PHP, and I am stuck with the following problem:

I created a dynamic shopping cart and filled it on ng-click with some information of the clicked object in the list. I saved to a scope variable called scope.cartwhich is then shown by ng-repeat within the shopping cart table. I then also automatically created input fields which are hidden to pass them to the $_POST variable after submit. Because my POST is empty after submitting, I tried to use the ng-submit directive to create a json file out of the scope.cart array at the time the formula is sent, so I can then call it via PHP. But this doesn*t work either. Now I am stuck and have no clue what the problem could be.

However I think that the input field is empty even though the browser adds new fields dynamically in the source code, and when I hit submit there is the state of the empty cart.

Whats the best way to solve my problem and send the AngJS data to the server?

navApp.controller('MainCtrl', ['$scope', '$http', function (scope, http){
scope.submit = function() {
        var time = Math.floor(Date.now() / 1000);
        
        http.post('../dampfen/cfg/orders/cart_' + time + '.json', scope.cart).then(function(data) {
            alert("Order successfully transferred!");
        });
    }
}]);

<div class="panel-body">
            <table class="table table-hover">
            <thead><tr><th colspan="4">Bestellung</th></thead><tbody>
<form name="orderForm" method="POST" ng-submit="submit()" action="index.php?checkout">
            <tr ng-repeat="item in cart">
                <input type="hidden" name="order[]" value="{{item.id}}" />
            <td>1x</td><td><strong>{{item.name}}</strong></td><td>{{item.preis}} <span class="glyphicon glyphicon-euro"></span></td><td><button class="btn btn-xs btn-danger" ng-click="removeFromCart($index)"><span class="glyphicon glyphicon-remove"></span></button></td></tr>
            </tbody>
            </table>
        </div>
        <div class="panel-footer">
          <p class="text-right"><strong>{{cart.sum}} <span class="glyphicon glyphicon-euro"></span></strong></p>
          <p class="text-left"><button type="submit" class="btn btn-sm btn-success">Checkout</button> <button type="button" class="btn btn-sm btn-danger" ng-click="deleteCart()">Warenkorb l&ouml;schen</button></p>
            </form>

</div>

Answer 1

<form> elements cannot be child nodes of <tbody> elements.

You can have an entire table inside a form. You can have an entire form inside a table cell.

Anything else leads to browser error recovery that can dump the form outside the table leaving the inputs behind.

Use basic QA. Write valid HTML.