CODEWITHSUNDEEP
javascriptangularjsforms
richard
richard

Reputation: 1585

Submit regular form using Angular JS

I have a normal HTML form with inputs, action, etc. already defined inside an Angular controller. However, this form doesn't have a submit button. Instead it has a button elsewhere on the page that is outside the form, but when clicked should trigger the normal form submission process. In other words, have the external button work as a normal submit button.

For example (with a very simplified version of what I have),

<div ng-controller='sendFormController">
    <form name='my_form' action='/path/to/form_handler.php' method="POST">
        <input type="text" name="form_data" />
    </form>

    <button ng-click='submitForm()">Send Data</button>
</div>

I've been looking for a solution to this problem but the only solutions I've been able to find (which are a bit hackish to my way of thinking) include,

I'm assuming that there must be a way in Angular to simply trigger the submission of the form but I can't find it in the docs. Can anyone point me in the direction of what I'm missing?

Upvotes: 3

Views: 2451

Answers (3)

Yosef Tukachinsky
Yosef Tukachinsky

Reputation: 5895

Use this:

     <form onsubmit='this.submit()' name='my_form' action='/path/to/form_handler.php' method="POST">

or in more 'Angular' way:

     <form #form (submit)='form.submit()' name='my_form' action='/path/to/form_handler.php' method="POST">

Upvotes: 0

Marian Ban
Marian Ban

Reputation: 8168

I think it would be better to do in a angular way: 

app.controller('sendFormController', function($scope) {
       $scope.model = { 
          form_data: ''
       };

       $scope.submitForm = function () {
          $http({
              url: '/path/to/form_handler.php',
              method: "POST",
              data: $.param($scope.model),
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
              }
          });
        };
});

html:

<div ng-controller='sendFormController">    
    <input type="text" ng-model="model.form_data" />  

    <button ng-click='submitForm()">Send Data</button>
</div>

Upvotes: 2

Kalhan.Toress
Kalhan.Toress

Reputation: 21901

In sendFormController,

$scope.submitForm = function() {
    document.getElementById('my_form').submit(); //force to submit the form after clicking the button
}

And,

<form name='my_form' id='my_form' action='/path/to/form_handler.php' method="POST">

Upvotes: 2

Related Questions