title: Angularjs - simple form submit
body: <p>I am going through learning curve with AngularJs and I am finding that there are virtually no examples that serve real world use.</p>
  
  <p>I am trying to get a clear understanding of how to submit a form with the most standard components and pass it on to a PHP file.. </p>
  
  <p>My <a href="http://jsfiddle.net/bYeZQ/10/">fiddle</a>.</p>
  
  <p>Does anyone have any good examples on submitting simple, un-polluted, forms that would help me and probably numerous other Angularjs beginners..</p>
  
  <p>When I say a clean form I am referring to something like this..</p>
  
  <pre><code>&lt;div ng-app="myApp"&gt;
  
      &lt;form name="saveTemplateData" action="#" ng-controller="FormCtrl" ng-submit="submitForm()"&gt;
  
          First name:    &lt;br/&gt;&lt;input type="text" ng-model="form.firstname"&gt;    &lt;br/&gt;&lt;br/&gt;
          Email Address: &lt;br/&gt;&lt;input type="text" ng-model="form.emailaddress"&gt; &lt;br/&gt;&lt;br/&gt;
  
          &lt;textarea rows="3" cols="25" ng-model="form.textareacontent"&gt;&lt;/textarea&gt;
  
              &lt;br/&gt;&lt;br/&gt;
  
          &lt;input type="radio" ng-model="form.gender" value="female" /&gt;Female ...
          &lt;input type="radio" ng-model="form.gender" value="male" /&gt;Male &lt;br/&gt;
  
              &lt;br/&gt;&lt;br/&gt;
  
          &lt;input type="checkbox" ng-model="form.member" value="5"/&gt; Already a member
  
              &lt;br/&gt;&lt;br/&gt;
  
          &lt;input type="file" ng-model="form.file_profile" id="file_profile"&gt;&lt;br/&gt;
          &lt;input type="file" ng-model="form.file_avatar" id="file_avatar"&gt;
  
              &lt;br/&gt;&lt;br/&gt;
  
          &lt;!-- &lt;button ng-click="save()" &gt;Save&lt;/button&gt; --&gt;
          &lt;input type="submit" ngClick="Submit" &gt;
  
      &lt;/form&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>My ng-app code...</p>
  
  <pre><code>var app = angular.module('myApp', []);
  app.controller('FormCtrl', function ($scope, $http) {
  
       var formData = {
          firstname: "default",
          emailaddress: "default",
          textareacontent: "default",
          gender: "default",
          member: false,
          file_profile: "default",
          file_avatar: "default"
      };
  
      $scope.save = function() {
          formData = $scope.form;
      };
  
      $scope.submitForm = function() {
          console.log("posting data....");
          formData = $scope.form;
          console.log(formData);
          //$http.post('form.php', JSON.stringify(data)).success(function(){/*success callback*/});
      };
  
   });
  </code></pre>
  
  <p>I guess three questions I have from here on are...</p>
  
  <ol>
  <li>How is my php file supposed to interact with this (how to I get the json string to an array in php file)?</li>
  <li>How would I submit value of a checkbox when the checkbox is true?</li>
  <li>I find a lot of information abotu using jQuery with Angular to submit images,, I see there is an image object in this submission already,, how do I retrieve that data? What are considerations to include with images?</li>
  </ol>
  
  <p>I am willing to take any clear and concise information and assemble a good learning example for everyone... </p>
  
  <p>My <a href="http://jsfiddle.net/bYeZQ/10/">fiddle</a></p>