AngularJS: Submit form the normal way

angularjs post form-submit ng-submit

12,654

Solution 1

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.

Solution 2

I usually do:

<form action=".">

Solution 3

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

Solution 4

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

View more solutions

12,654

henk

Updated on June 04, 2022

Comments

henk almost 2 years
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.
- tschiela over 10 years
  
  Can you give example code please? The question is unclear for me.
henk over 10 years

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 over 10 years

Well, as I said, that doesn't seem to work. I guess AngularJS checks to see if it's not empty..