CODEWITHSUNDEEP
htmlformsangularjs
Dfr
Dfr

Reputation: 4175

Angular.js submit form old way

I'm migrating an old html page from jQuery to Angular, and it contains some old-school forms with <input type="submit">. When I enriched my pages with the ng-app directive, the old forms stopped working (I mean when you press the submit buttons then nothing happens).

I searched for this problem and scanned the Angular docs too, but it seems that nobody is submitting forms anymore.

Any suggestions on how to bring those forms to life again without much keystrokes would be appreciated.

Currently the form has following markup:

<form name="form_upload" method="post" action="" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" name="send" value="Upload">
</form>

All jQuery code I purged and starting fresh with Angular.

UPD:

I guess i now found cause, it's empty action attribute, it seems empty action is not welcomed by standarts, but very convenient to use allowing you to submit form to the current page URL, is there Angular way to do it ?

Upvotes: 30

Views: 17148

Answers (3)

markmarijnissen
markmarijnissen

Reputation: 5887

  • Use a non-empty action attribute to make Angular submit the form
  • Fill action attribute with current location (using angular)

In your controller:

$scope.location = $window.location.href

In your HTML:

<form action="{{location}}">

See the plunkr demo.

Upvotes: 11

Tim Withers
Tim Withers

Reputation: 12059

Going off of the docs: http://docs.angularjs.org/api/ng.directive:form

Angular's philosophy is to minimize data and page reloads, so they don't like "old school forms", but you can get around it by using an action attribute in the form.

Angular is designed with single page applications in mind and avoiding full page reloads as that is going to take longer to do. By using the ngSubmit directive, you can define a function to send over the form data to the server and get a response back much quicker than a full page reload. Bytes instead of Kilobytes.

Upvotes: 18

Karen Zilles
Karen Zilles

Reputation: 7671

I've done this. I'm pretty sure I was using jquery to submit the form, but you could probably do it with plain old javascript.

One of the comments on the angular form page suggests this:

<input onclick="javascript:$(this).parent().submit();" type="submit" value="">

http://docs.angularjs.org/api/ng.directive:form

Upvotes: 0

Related Questions