AngularJS: Submit form the normal way

Question

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.

Can you give example code please? The question is unclear for me. — tschiela, Aug 08 '13 at 09:33
I'm sorry, I appended some information and a little more about the documentation. I hope someone can help me out.. I can't imagine this is impossible. — henk, Aug 08 '13 at 09:49
the pages are cached and the url contains a dynamic set of parameters so this is different every time.. this is different everytime in the website, so I'm preferring a html-solution.. This would allow me to keep the existing PHP code and not do a major modification in the server-side code. — henk, Aug 08 '13 at 09:56
The documentation clearly mentions if you add action attribute to form it does the full form post i.e regular post. There is no reason for it to not post, can you see you browser firebug console to see if a post is done. — Chandermani, Aug 08 '13 at 09:57
well, I tried leaving it empty or modifying it by jquery doesn't work.. — henk, Aug 08 '13 at 09:59
Can you not use `$_SERVER['QUERY_STRING']` or the like to echo the current url? If you can't set the action then afaik your only option would be to run a custom version of the angular code with this 'feature' removed. — noj, Aug 08 '13 at 09:59
check out this simple directive: http://stackoverflow.com/a/21708194/468855 — rob_james, Feb 11 '14 at 17:04

score 13 · Answer 1 · answered Sep 30 '13 at 17:23

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.

score 3 · Answer 2 · answered Jan 25 '14 at 03:30

3

I usually do:

<form action=".">

answered Jan 25 '14 at 03:30

dshap

1,382
14
19

score 2 · Answer 3 · answered Aug 08 '13 at 10:34

2

Can you try adding an empty action attribute like

<form action="" method="POST">

According to HTML Form Submission Algorithm, point 8 is

If action is the empty string, let action be the document's address of the form document.

This means it should take the dynamically constructed url and post to it and AngularJS will also allow it since there is an action attribute

answered Aug 08 '13 at 10:34

rajasaur

5,340
2
27
22

Well, as I said, that doesn't seem to work. I guess AngularJS checks to see if it's not empty.. – henk Aug 08 '13 at 11:33

score 2 · Answer 4 · answered Aug 08 '13 at 11:31

I found it.. somewhat. It turns out that modifying the action with jQuery while loading the DOM tree does work, but modifying it after the DOM is loaded doesn't work..

So this does work:

<!DOCTYPE html>
<html ng-app>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
    <form method="post" ng-submit="submit()" action>
        <input type="text" name="txt">
        <input type="submit" name="submit">
    </form>
</body>
</html>
<script type="text/javascript">
    $("form").get(0).setAttribute( "action", "test.html" );
</script>

But this doesn't:

<!DOCTYPE html>
<html ng-app>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
    <form method="post" ng-submit="submit()" action>
        <input type="text" name="txt">
        <input type="submit" name="submit">
    </form>
</body>
</html>
<script type="text/javascript">
    $(function() {
        $("form").get(0).setAttribute( "action", "test.html" );
    });
</script>

It feels like a horrible hack, but I guess I have to live with that. Unless someone can come up with a better solution..

score -4 · Answer 5 · answered Aug 08 '13 at 10:05

-4

Can't you just use

<form ng-submit="submit()" ng-controller="Ctrl">

And add the POST method to the controller

answered Aug 08 '13 at 10:05

seridis

5
2

7

I'm not sure what you mean by that. Submitting the form using AJAX is not what I'm looking for, I'm looking for a plain, common HTTP POST. – henk Aug 08 '13 at 11:33

AngularJS: Submit form the normal way

5 Answers5