Django Angular Form Submit

Question

Hi Guys I'm trying to Submit the data's using angularjs in Django by refering this post, But Its not working in my 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 is my code I Don't know what i Missed here, While I submitting the form its not triggering any thing.Please suggest me if I left any thing here and It will be greatfull for your suggestion. Thanks in advance.

If you already send the csrftoken in the request header, you don't really need to add it to the form and submitted data anymore. — C14L
– C14L, Commented Jan 28, 2016 at 12:54

Kacper Dziubek · Accepted Answer · 2016-01-28 14:20:38Z

1

Did you check what console logs tell you? Let me start from begining:

You should not import angular-cookies script directly from raw github source because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled by default in most browsers. Download the script directly to you local disk or import it from proper CDN network.
You use jQuery but you don't import it. Add below line to your code to import jquery (or stop using it at all).

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

userprofile model is not defined in your controller's scope. You should add $scope.userprofile = {};
$cookies.csrftoken is not defined. If you want to use csrftoken with $cookies you have to save it yourself, and then attach it to your post request. You can do it for example like this (simplest way in case of your code): $cookies.csrftoken = document.getElementsByName("csrfmiddlewaretoken")[0].value;
So your fixed controller could like 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>

Be sure to always check what's going on in web console debugger, and in your Django app. This will save you a lot of time ;)

I hope this post will help you with your issues.

answered Jan 28, 2016 at 14:20

Kacper Dziubek

1,6931 gold badge12 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ajay Kumar Over a year ago

Thanks for your kind reply, I tired your fixed code and its returning the value as '{"fname":"Mark","mname":"Hendry","lname":"Luc","email":"[email protected]","phone":"8524552255522","csrfmiddlewaretoken" :"YuVNrDz1sfDwHal08wVCLDlCZsP8VkPg"}' dictionary , when i checked in console. and I used 'data = json.loads(request.body)' in the views to get the data, is this approach is right?

Kacper Dziubek Over a year ago

Yes, this is the way you have to use to get your data in a view.

Ajay Kumar Over a year ago

Thank You so much, As you said i Used the approach, the data's are posted successfully, But I need to redirect the page to some url after the success, I tried with "$location.path = ('/')" but its not working, Showing error in console that '$location is not defined', Can you please suggest me how to redirect to another url after form submitted.Thank you so much.

user01 · Accepted Answer · 2016-01-28 12:41:05Z

0

Use verbatim block. So, your form.html looks like:

{% verbatim %}
<div ng-app="myApp">
    <form action="." method="post" ng-controller="MyFormCtrl">{% csrf_token %}
        ...
    </form>
</div>
{% endverbatim %}

answered Jan 28, 2016 at 12:41

user01

1,6651 gold badge13 silver badges14 bronze badges

Collectives™ on Stack Overflow

Django Angular Form Submit

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related