AngularJS: Submit form the normal way

Asked 8/8, 2013 at 9:27 Answered 25/1, 2014 at 3:30

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.

Kablesh answered 8/8, 2013 at 9:27 Comment(8)

Can you give example code please? The question is unclear for me. – Thickness 8/8, 2013 at 9: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. – Kablesh 8/8, 2013 at 9:49

Why can't you echo the page url? – Storehouse 8/8, 2013 at 9:50

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. – Kablesh 8/8, 2013 at 9: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. – Staminody 8/8, 2013 at 9:57

well, I tried leaving it empty or modifying it by jquery doesn't work.. – Kablesh 8/8, 2013 at 9: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. – Storehouse 8/8, 2013 at 9:59

check out this simple directive: https://mcmap.net/q/1163497/-empty-action-attribute-on-a-form-with-angularjs – Degrease 11/2, 2014 at 17:4

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.

Butanol answered 30/9, 2013 at 17:23 Comment(0)

I usually do:

<form action=".">

Nofretete answered 25/1, 2014 at 3:30 Comment(0)

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

Darsey answered 8/8, 2013 at 10:34 Comment(1)

Well, as I said, that doesn't seem to work. I guess AngularJS checks to see if it's not empty.. – Kablesh 8/8, 2013 at 11:33

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..

Kablesh answered 8/8, 2013 at 11:31 Comment(0)

-4

Can't you just use

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

And add the POST method to the controller

Borate answered 8/8, 2013 at 10:5 Comment(1)

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. – Kablesh 8/8, 2013 at 11:33

Recommended topics

Hot tags