POSTED IN Angularjs

How to submit form using angularjs in php?

How to submit form using angularjs in php?

Hi in this tutorial I am goin to explain how to submit the from using angular js. Maximum of the developers are using jquery and ajax. But now a new library comes out with named angularjs. In angularjs $http service provided to communicate remote http servers. There are many ways to post form data using angularjs, but i am sharing a simple way. We’ll use a simple form that used to be submitted using PHP and how to convert that to Angular.

1. The Form – Setting up angularjs application/model/controller :-

Let’s create html to show up form and initialize angularjs app.

Understanding the form :- We including angualrjs script library to work with angularjs like jquery.

ng-app=”postApp” – Directive that define angularjs application
ng-controller=”postController” – Directives that define angularjs controller

ng-submit=”submitForm()” – We are calling a function on form submit

ng-show=”errorName” – This will control to show errors. we will showing up errors in this span tag using ng-show directives.

2. Use angular object to get form data :-

We are using ng-model directive to define angular object we are using user object to process with form like, user.username

3. Post form data using angularjs :-

Let’s make angularjs script to post form data using angularjs. Add this script to your form to process. Here we are using POST method Submit Form with angularjs to php.

Understanding the script :-

$scope: is a object of application model For more follow Docs.
$http: The Angular service that will help to communicate remote http servers . For more information, check out the Docs.

4. Process/handle form data and errors in php :-

Now create a clone.php and add below code to show response or errors back to angularjs application.

 5. Show form success/errors using angularjs :-

We are using ng-show directive to show errors in our form. which we are sending back if form has any errors.

So now you can easily post form data using angularjs, you can also use $.param() method to convert user object in string and can get directly your post values. But we are working with angularjs so i am not including jquery here. So Now you can easily submit your form with angularjs.

If you like this article don’t forget to share and comment.


Happy Coding.