Styjun

So I have a site with multiple buttons. These buttons are inside forms and use this CSRF . However the first button won't work.

This is a snippet of how the HTML looks like.

<form method="post" id="post-form">
 % csrf_token %
 <button type="submit" name="startVm" class="btn btn-default btn-block d-none d-md-block">StartVM</button>
 </form>
 <form method="post" id="post-form">
 % csrf_token %
 <button type="submit" name="stopVm" class="btn btn-default btn-block d-none d-md-block">StopVM</button>
 </form>

And this is the Ajax function that I use.

$('#post-form').on('submit', function(e)
 e.preventDefault();
 console.log("form submitted!") // sanity check
 post();
 );
 // AJAX for posting
 function post() 
 console.log("create post is working!") // sanity check
 $.ajax(
 url : '', // the endpoint
 type : 'post', // http method
 data : ,
 csrfmiddlewaretoken: ' csrf_token ',
 contentType: 'application/x-www-form-urlencoded',
 processData: true,
 // handle a successful response
 success : function() 
 alert("Thank you for your comment!");
 console.log("success"); // another sanity check
 ,

 // handle a non-successful response
 error : function(xhr,errmsg,err) 
 $('#results').html("<div class='alert-box alert radius' data-alert>Oops! We have encountered an error: "+errmsg+
 " <a href='#' class='close'>&times;</a></div>"); // add the error to the dom
 console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
 
 );
 ;

So as I said. The button StartVM won't work and it returns a 403 error.(Forbidden (CSRF token missing or incorrect.): /)
The second one however works without a problem.

This is the code in the view.py

def post (self, request):
 if request.method == 'POST' and 'startVm' in request.POST:
 print("startVM button")
 return HttpResponse("",
 content_type='application/json', status=204)
 if request.method == 'POST' and 'stopVm' in request.POST:
 print("stopVM button");
 return HttpResponse("",
 content_type='application/json', status=204)
 return HttpResponse("",
 content_type='application/json')

I am returning status 204 because e.preventDefault() won't work and it refreshes the whole site if I click on a button.

Firstly, ids should be unique, but you have id="post-form" on two separate forms.

You could do class="post-form" instead, and change your JS to use .post-form.

Or, for the template in your question, you could have a single <form> tag that contains both buttons.

Next, you need to include the CSRF token inside the form data.

data : 'csrfmiddlewaretoken': ' csrf_token ',

Alternatively, you could follow the suggestion in the docs, and add an X-CSRFToken header for ajax requests, then you don't need to include the token in the post data.