Angularjs - simple form submit

Question

I am going through learning curve with AngularJs and I am finding that there are virtually no examples that serve real world use   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     My fiddle   Does anyone have any good examples on submitting simple  un-polluted  forms that would help me and probably numerous other Angularjs beginners    When I say a clean form I am referring to something like this     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    My ng-app 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                     I guess three questions I have from here on are      How is my php file supposed to interact with this  how to I get the json string to an array in php file   How would I submit value of a checkbox when the checkbox is true  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    I am willing to take any clear and concise information and assemble a good learning example for everyone      My fiddle

User · Answer

I think the reason AngularJS does not say much about form submission because it depends more on 'two-way data binding'. In traditional html development you had one way data binding, i.e. once DOM rendered any changes you make to DOM element did not reflect in JS Object, however in AngularJS it works both way. Hence there's in fact no need to form submission. I have done a mid sized application using AngularJS without the need to form submission. If you are keen to submit form you can write a directive wrapping up your form which handles ENTER keydown and SUBMIT button click events and call form.submit().

If you want the sample source code of such a directive, please let me know by commenting on this. I figured out it would a simple directive that you can write yourself.

User · Answer

WARNING This is for Angular 1 x  If you are looking for Angular  v2   currently version 8   try this answer or the official guide     ORIGINAL ANSWER  I have rewritten your JS fiddle here  http   jsfiddle net YGQT9    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  name  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  gt            Describe your reason for submitting this form               lt  textarea 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 input type  checkbox  ng-model  form member  value  true   gt  Already a member          lt input type  checkbox  ng-model  form member  value  false   gt  Not a member          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 input type  submit  gt       lt  form gt   lt  div gt    Here I m using lots of angular directives ng-controller  ng-model  ng-submit  where you were using basic html form submission   Normally all alternatives to  The angular way  work  but form submission is intercepted and cancelled by Angular to allow you to manipulate the data before submission  BUT the JSFiddle won t work properly as it doesn t allow any type of ajax http post get so you will have to run it locally   For general advice on angular form submission see the cookbook examples  UPDATE The cookbook is gone  Instead have a look at the 1 x guide for for form submission  The cookbook for angular has lots of sample code which will help as the docs aren t very user friendly   Angularjs changes your entire web development process  don t try doing things the way you are used to with JQuery or regular html js  but for everything you do take a look around for some sample code  as there is almost always an angular alternative

User · Answer

I have been doing quite a bit of research and in attempt to resolve a different issue I ended up coming to a good portion of the solution in my other post here   Angularjs - Form Post Data Not Posted   The solution does not include uploading images currently but I intend to expand upon and create a clear and well working example  If updating these posts is possible I will keep them up to date all the way until a stable and easy to learn from example is compiled

User · Answer

x000D   x000D  var app   angular module   myApp         x000D   x000D  app controller   myCtrl      scope   function  scope    x000D   x000D       scope submit form   function formData    x000D   x000D           scope formData   formData  x000D   x000D          console log formData      object x000D          console log JSON stringify formData       string x000D   x000D           scope form          clear ng-model form x000D   x000D        x000D   x000D        x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 6 4 angular min js  gt  lt  script gt  x000D   x000D   lt div ng-app  myApp  ng-controller  myCtrl  gt  x000D   x000D       lt form ng-submit  submit form form    gt  x000D   x000D          Firstname   lt input type  text  ng-model  form firstname    gt  lt br   gt  x000D          Lastname   lt input type  text  ng-model  form lastname    gt  lt br   gt  x000D   x000D           lt hr   gt  x000D   x000D           lt input type  submit  value  Submit    gt  x000D   x000D       lt  form gt  x000D   x000D       lt hr   gt            x000D   x000D       lt p gt Firstname     form firstname    lt  p gt  x000D       lt p gt Lastname     form lastname    lt  p gt  x000D   x000D       lt pre gt Submit Form     formData     lt  pre gt  x000D   x000D   lt  div gt  x000D   x000D   x000D    Codepen

User · Answer

Sending data to some service page    lt form class  form-horizontal  role  form  ng-submit  submit form    gt       lt input type  text  name  user id  ng-model    formAdata user id  gt       lt input type  text  id  name  name  name  ng-model    formAdata name  gt   lt  form gt    scope submit form   function                                  http                           url   http   localhost services test php                           method   POST                           headers    Content-Type    application x-www-form-urlencoded                            data    param  scope formAdata                         success function data  status  headers  config                             scope status   status                         error function data  status  headers  config                             scope status   status

[javascript] Angularjs - simple form submit

Examples related to javascript

Examples related to php

Examples related to forms

Examples related to angularjs