angularjs - Django Angular Form Submit -


hi guys i'm trying submit data's using angularjs in django refering post, not working in case,

views.py

def add(request, template_name="form.html"):     if request.method == "post":         print request.post.get('fname')     return templateresponse(request, template_name) 

form.html

<div ng-app="myapp"> <form action="." method="post" ng-controller="myformctrl">{% csrf_token %}      <input type="text" name="fname" id="fname" ng-model="userprofile.fname" placeholder="first name">      <input type="text" name="mname" id="mname" ng-model="userprofile.mname" placeholder="middle name">      <input type="text" name="lname" id="lname" ng-model="userprofile.lname" placeholder="last name">      <input type="text" name="email" id="email" ng-model="userprofile.email" placeholder="email">      <input type="text" name="phone" id="phone" ng-model="userprofile.phone" placeholder="phone number">     <button ng-click="submit($event)">save</button> </form> 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> <script type="text/javascript" src="https://raw.githubusercontent.com/angular/bower-angular-cookies/master/angular-cookies.js"></script> <script type="text/javascript"> var namespace = angular.module("myapp", ['ngcookies']); namespace.controller("myformctrl", ['$scope', '$http', '$cookies', function ($scope, $http, $cookies) {     $http.defaults.headers.post['content-type'] = 'application/x-www-form-urlencoded';     $http.defaults.headers.post['x-csrftoken'] = $cookies.csrftoken;     $scope.submit = function ($event) {         $event.preventdefault();         var in_data = jquery.param({'fname': $scope.userprofile.fname,'csrfmiddlewaretoken': $cookies.csrftoken});         $http.post("{% url 'add_angularjs' %}", in_data)           .success(function(out_data) {             $scope.card = angular.copy({});         });     }  }]); </script> 

this code don't know missed here, while submitting form not triggering thing.please suggest me if left thing here , greatfull suggestion. in advance.

did check console logs tell you? let me start begining:

  1. you should not import angular-cookies script directly raw github source because mime type ('text/plain') not executable, , strict mime type checking enabled default in browsers. download script directly local disk or import proper cdn network.

  2. you use jquery don't import it. add below line code import jquery (or stop using @ all).

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

  1. userprofile model not defined in controller's scope. should add $scope.userprofile = {};

  2. $cookies.csrftoken not defined. if want use csrftoken $cookies have save yourself, , attach post request. can example (simplest way in case of code): $cookies.csrftoken = document.getelementsbyname("csrfmiddlewaretoken")[0].value;

  3. so fixed controller like this:

<script type="text/javascript">      var namespace = angular.module("myapp", ['ngcookies']);      namespace.controller("myformctrl", ['$scope', '$http', '$cookies',          function ($scope, $http, $cookies) {              $scope.userprofile = {};              $http.defaults.headers.post['content-type'] = 'application/x-www-form-urlencoded';              $cookies.csrftoken = document.getelementsbyname("csrfmiddlewaretoken")[0].value;              $http.defaults.headers.post['x-csrftoken'] = $cookies.csrftoken;              $scope.submit = function ($event) {                  console.log($cookies.csrftoken);                  $event.preventdefault();                  var in_data = {                      fname: $scope.userprofile.fname,                      csrfmiddlewaretoken: $cookies.csrftoken                  };                  $http.post("{% url 'add_angularjs' %}", in_data)                    .success(function(out_data) {                      $scope.card = angular.copy({});                  });              }       }]);  </script>

  1. be sure check what's going on in web console debugger, , in django app. save lot of time ;)

i hope post issues.


Comments

Popular posts from this blog

Hatching array of circles in AutoCAD using c# -

ios - UITEXTFIELD InputView Uipicker not working in swift -

Python Pig Latin Translator -