JSFiddle - React, Tailwind, and code Playground

by Andrew Pougher

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-2.1.0.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/paper/bootstrap.min.css">
 <div class="container"  ng-app="formExample" ng-controller="Controller">
  <div class="row">
  <div class="col-xs-6">
  <h3>
  Hi There.
  </h3>
    <div class="panel panel-default">
      <form novalidate class="form panel-body" ng-submit="sendPost()">
       <div class="form-group">
    <label for="email">First Name:</label>
    <input type="text" ng-model="user.fn" required>
  </div>
  <div class="form-group">
    <label for="pwd">  Last Name:</label>
    <input type="email" ng-model="user.email" required>
  </div>
    <div class="form-group">
     I want to: <input type="radio" ng-model="user.usertype" value="shopper">Shop
        <input type="radio" ng-model="user.usertype" value="vendor">Sell<br><hr>
    </div>
  
     
        <button ng-click="update(user)" class="btn btn-xs btn-info">Update</button>
         <button class="btn btn-xs btn-danger" type="submit">SAVE</button>
      </form> </div>  </div> 
          <div class="col-xs-6">  <h3>
  _
  </h3>asdasdasd</div>
     
        
      
          
          </div>   </div>
      <pre>form = {{user | json}}</pre>
      <pre>master = {{master | json}}</pre>

CSS

@import url("https://fonts.googleapis.com/css?family=Oxygen:400,300,700");
@import url("https://fonts.googleapis.com/css?family=Maven+Pro:500");
body {
  font-family: 'Oxygen', sans-serif;}
  input{outline:none}form{    font-size: 1rem;
    font-family: "Maven Pro", Verdana, Helvetica, Sans-Serif}

JavaScript

angular.module('formExample', [])
       .controller('Controller', ['$scope', function($scope, $http) {
       $scope.master = {};

       $scope.update = function(user) {
       $scope.master = angular.copy(user);
      };

       $scope.reset = function() {
       $scope.user = angular.copy($scope.master);
     };
     
         $scope.sendPost = function() {
        var data = $.param({
            json: JSON.stringify({
                name: $scope.newName
            })
        });
        $http.post("/echo/json/", data).success(function(data, status) {
            $scope.hello = data;
        })
    } 
       $scope.sendPost = function() {
        var data = $.param({
            json: JSON.stringify({
                allForm: angular.copy($scope.user)
            });
            alert(data);
        });
        $http.post("/echo/json/", data).success(function(data, status) {
           alert(data);
        })
        }
         

     $scope.reset();
   }]);