AngularJS: Submit form the normal way

Question

AngularJS: Submit form the normal way

12.7k Views Asked by henk At 28 April 2025 at 16:06

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.

Original Q&A

There are 5 best solutions below

**seridis** · Answer 1

seridis On 08 August 2013 at 10:05

Can't you just use

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

And add the POST method to the controller

**rajasaur** · Answer 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

**henk** · Answer 3

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

**dshap** · Answer 4

dshap On 25 January 2014 at 03:30

I usually do:

<form action=".">

**Pietro Saccardi** · Answer 5

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.

AngularJS: Submit form the normal way

There are 5 best solutions below

Related Questions in ANGULARJS

Related Questions in POST

Related Questions in FORM-SUBMIT

Related Questions in NG-SUBMIT

Trending Questions

Popular # Hahtags

Popular Questions