CSRF Token missing or invalid. -> First form fails other CSRF Token work - ajax

Question

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'>×</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.

Answer 1

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.