Simple Form Submit In AngularJs with PHP

Simple Form Submit In AngularJs with PHP

Today, We want to share with you Simple Form Submit In AngularJs with PHP.
In this post we will show you Simple Form Submit In AngularJs with PHP, hear for Simple Form Submit In AngularJs with PHP we will give you demo and example for implement.
In this post, we will learn about Simple Form Submit In AngularJs with PHP with an example.

Simple Form Submit In AngularJs with PHP

Which is the best PHP framework for making an angularJs Web App’s?

Simple AngularJS is a client side(browser side) JavaScript library(SPA’s) while PHP is a server side programming language.an AngularJs always run on client side(Browser side) , if you want to build an web site in php i will advised to laravel will be the best choice to create a web app’s. then we can easily use Restful api and website in laravel and also there is lots of couple of advantages of using laravel php framework.

READ :  AngularJS All Currency Filters formats

AngularJs is a client side(browser side) framework so there is no any connection between angularJs and php framework.

AngularJS Submit From Controller with PHP

index.html

<!DOCTYPE html>
<html ng-app="submitFormExample">
    <head>
        <title>Angularjs Insert update delete using php mysql with infinityknow.com</title>
        <link rel="stylesheet" href="https://infinityknow.com/bt/css/bootstrap.min.css" type="text/css" />
       <script src="https://infinityknow.com/libs/angular.min.js"></script>
        <script src="form_data.js"></script>
    </head> 

    <body>

        <div ng-controller="submitFormCtrl">
            <form  name="userForm"  class="well form-search"   >
                
                <input type="text" ng-model="name" class="input-medium search-query" placeholder="Name" required>
                <input type="email" ng-model="email" class="input-medium search-query" placeholder="Email" required>
                <input type="text" ng-model="message" class="input-medium search-query" placeholder="Message" required>
                <button type="submit" class="btn" ng-click="formsubmit(userForm.$valid)"  ng-disabled="userForm.$invalid">Submit </button>
		
            </form>
            <pre ng-model="result">
                <mark>{{result}}</mark>
            </pre>
        </div>
        <a href="https://infinityknow.com/phpexecuteonline/" alt="angularjs user registration form example" title="Angularjs Insert update delete using php mysql with infinityknow.com">infinityknow.com</a>
        
    </body>

</html>

form_data.js

// define module
var app = angular.module('submitFormExample', []);

//define controller
app.controller("submitFormCtrl", ['$scope', '$http', function($scope, $http) {
        $scope.url = 'do_submit.php'; // send or post data in this page
        $scope.formsubmit = function(isValid) {
            if (isValid) {
              
				// all post data and valid form using angularjs
                $http.post($scope.url, {"name": $scope.name, "email": $scope.email, "message": $scope.message}).
                        success(function(data, status) {
                            console.log(data); //console print data
                            $scope.status = status; // store status
                            $scope.data = data; // all data store in this var
                            $scope.result = data; // display result from server to response in our <pre></pre> HTML element
                        })
            }else{
                
                  alert('my html Form is not valid :plz valid data enter');
            }
        }
    }]);

do_submit.php

->Simple saving to database connection and excute query->excute or save query
->now simple i am just printing all parameter’s the values

READ :  Angular ng init directive Example

$post_date = file_get_contents("php://input");
$data = json_decode($post_date);
echo "Your Good Name : ".$data->name."\n";
echo "Your Professtional Email : ".$data->email."\n";
echo "your Suggest Message : ".$data->message."\n";

Download

https://pakainfo.com/

Add a Comment

Your email address will not be published. Required fields are marked *