AngularJS: Submit form the normal way

henk picture henk · Aug 8, 2013 · Viewed 12.6k times · Source

I am implementing AngularJS on an existing web application that requires a common HTTP POST like you would do without AngularJS.

This seems to be more difficult than I expected. The page URL is dynamically generated and cannot be echoed using PHP. I tried modifying the form action using jQuery but that doesn't seem to work either.

Is it really impossible to submit a form the normal way? This is what I mean with a normal form:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <form method="post">
        <input type="text" name="txt">
        <input type="submit" name="submit">
    </form>
</body>
</html>

And this is the same form with AngularJS:

<!DOCTYPE html>
<html ng-app>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
    <form method="post">
        <input type="text" name="txt">
        <input type="submit" name="submit">
    </form>
</body>
</html>

The first form performs a regular form post, the second form doesn't. According to http://docs.angularjs.org/api/ng.directive:form this is by design and I can provide the "action" parameter in the form. Leaving it empty doesn't work and modifying it by using jQuery doesn't seem to work either.

Answer

Spak picture Spak · Sep 30, 2013

I encountered the same problem. As long as AngularJS finds an empty (or missing) action attribute, it will prevent any submit button/input from actually submitting the form.

I managed to solve the issue simply adding the action="#" attribute.

It's only a workaround, there will be that ugly # at the end of the POST URL, but works. The advantage is that you don't need to hardcode the POST URL (which could be dynamically generated) in the HTML code.