How to do something like jQuery's $("#formID").submit() event using angularJS?

Question

I have a form with some fields. When user fills all fields and submits the form, I force user to register or login(in modal window) before form submission.

That is, when user try to submit the form, I first open a modal window with login form(user can toggle register/login form). After user complete the login/register form and submit it, I send all data using ajax and after I get a success status, I submit the previous form using jQuery's $("formID").submit() event.

Now as I am migrating from jQuery to angularJS I have tried to find a solution to do that using angularJS, I have completed the user registration/login part using angularJS's $http service, but have failed to submit the previous form data.

Is there any angularJS solution to that kind thing? Is it possible to submit a form with its ID or something like this?

Of course not. The form is meant to be data-bound directly to a $scope property. If the posted answer is not working for you, you have done something majorly wrong in your code dealing with the modal. I use modals in my apps and have no problems using the data-binding and directives available. — m59
– m59, Commented Sep 8, 2013 at 5:45
@m59 -- please read again my problem... I think you haven't understand my problem. — rafi
– rafi, Commented Sep 8, 2013 at 5:49
I posted an answer with a full demonstration (using a div to simulate your modal). All you need to do is see the comments on the submit function and use either the $http success callback or MUCH BETTER use promises with the .then() function. — m59
– m59, Commented Sep 8, 2013 at 6:09
You have not accepted an answer. Is your question not answered? — m59
– m59, Commented Sep 13, 2013 at 16:44
LOL. Then could you please explain why? My answer demonstrates exactly what you are trying to do, unless your question is unclear. I even wrote the code for you, which is pretty generous. — m59
– m59, Commented Sep 15, 2013 at 13:00

Mohsen · Accepted Answer · 2013-09-05 06:20:38Z

2

check this http://docs.angularjs.org/api/ng.directive:ngSubmit

<form ng-submit="{expression}">
   ...
</form>

answered Sep 5, 2013 at 6:20

Mohsen

2691 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rafi Over a year ago

this will not work as I am opening modal window on form submission and after register/login is complete, I am actually submitting previous form data.

m59 · Accepted Answer · 2013-09-08 06:03:06Z

I believe I have done everything you requested. Live demo here (click).

  <div ng-show="successMessage">
    <p>{{successMessage}}</p>
    <h6>Form data sent:</h6>
    <p ng-repeat="(k,v) in form track by k">{{k}}: {{v}}</p>
  </div>
  <form ng-submit="mySubmit()" ng-hide="modalOpen||successMessage">
    <input ng-model="form.name" placeholder="Name">
    <input ng-model="form.phone" placeholder="Phone Number">
    <input type="submit">
  </form>
  <div ng-show="modalOpen">
    <h6>This would be your modal.</h6>
    <p>Login to submit form!<p>
    <button ng-click="login()">Login</button>
  </div>

var app = angular.module('myApp', []);

app.controller('appCtrl', function($scope) {
  $scope.form = {
    name: '',
    phone: ''
  };
  $scope.modalOpen = false;
  $scope.mySubmit = function() {
    $scope.modalOpen = true; 
  };
  $scope.login = function() {
     $scope.loggedIn = true; //should come from a service and use promise, send form after promise resolves using .then()
    //dataService.sendForm() or however you want to submit the form. the same principle applies about using a promise and .then() function to set the successMessage and close modal.
    $scope.successMessage = 'Form is submitted!';
    $scope.modalOpen = false;
  };
});

Collectives™ on Stack Overflow

How to do something like jQuery's $("#formID").submit() event using angularJS?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related