Menu
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.
714
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.
198
I usually do:
<form action=".">
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
2
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..
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With