1

how we can submit form with angular controller? another questions is how we can call jquery functions with angular?

 <form id="flightRules" target="_blank" action="<?= Yii::$app->request->baseUrl ?>/site/farerules" method="post">
                            <input type="hidden" name="airlineCode" id="airlineCode" />
                            <input type="hidden" name="fareCode" id="fareCode" />
                        </form>

i have form in html and i want to submit that form with angular !(the same things that i did with jquery);

thanks!

1
  • Okay! go ahead do it. Commented Aug 5, 2015 at 12:12

3 Answers 3

3

You can do like below:

<div ng-controller="MyController" >
<form>
<input type="text" id="name" ng-model="myForm.name" ng-minlength="5" ng-maxlength="12"> Name <br/>

<select ng-model="myForm.car">
  <option value="nissan">Nissan</option>
  <option value="toyota">Toyota</option>
  <option value="fiat">Fiat</option>
</select>

<button ng-click="myForm.submitTheForm()">Submit Form</button>
</form>

<div>
    {{myForm.name}}
</div>
<div>
    {{myForm.car}}
</div>

<script>
 angular.module("myapp", [])
 .controller("MyController", function($scope, $http) {
   $scope.myForm = {};
   $scope.myForm.name = "Jakob Jenkov";
   $scope.myForm.car  = "nissan";

  $scope.myForm.submitTheForm = function(item, event) {
   console.log("--> Submitting form");
   var dataObject = {
      name : $scope.myForm.name
      ,car  : $scope.myForm.car
   };

   var responsePromise = $http.post("/angularjs-examples/json-test- data.jsp", dataObject, {});
   responsePromise.success(function(dataFromServer, status, headers, config) {
      console.log(dataFromServer.title);
   });
    responsePromise.error(function(data, status, headers, config) {
      alert("Submitting form failed!");
   });
 }

});
</script>

For Call Jquery Funtion with angular you can check with this link Call jQuery function from AngularJS Controller Happy Coding :)

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

4 Comments

that is first question's answer. good. what about another questions is how we can call jquery functions with angular?.
sumbit form from angular controller like ( Jquery.form.submit() )something like that ! not the routine way of submitting form with angular
@mohsen Jquery.form.submit() here .submit() is js method not from jQuery.
doesn't matter i want this in angular
3

I found the answer!

Add $element to controller. After that call $element.find("#yourformid").submit();.

Comments

-1

ng-submit directive

https://docs.angularjs.org/api/ng/directive/ngSubmit

to use jquery function you can create your own directive and apply your logic accordingly

How to use jQuery in AngularJS

2 Comments

problem solved!!! add $element to controller after that call $element.find("#yourformid").submit();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.