Error 500 (Internal Server Error) When Submission in Django using AJAX

Question

When I click submit, It's Error 500 (Internal Server Error).I see this error in "Inspect Elements : Network"

This is my code:

HTML

<form id="new_user_form">
    <input type="text" id="name" placeholder="Name" name="" value="">
    <select class="" name="skill_type" id="type">
      <option value="1">Developer</option>
      <option value="2">Network</option>
      <option value="3">System</option>
      <option value="4">Database Analysis</option>
    </select>
    <input type="submit" name="" value="submit">
  </form>

JS

$(document).on('submit','#new_user_form',function(e){
    e.preventDefault();

    $.ajax({
      type : 'POST',
      url : 'skill/create',
      data : {
        name : $('#name').val(),
        type : $('#type').val(),
      },
      sucess:function(){

      }
    });
  });

view.py

def create_skill(request):
    if request.method == 'POST':
        name = request.POST['name']
        type = request.POST['type']

        skill = Skill(skill_name=name,skill_type=type)
        skill.save()

        return HttpResponse()

This is image Error : enter image description here

Please Help me TT

Answer 1

You need to POST csrf_token too in ajax:

$(document).on('submit','#new_user_form',function(e){
    e.preventDefault();

    $.ajax({
        type : 'POST',
        url : 'skill/create', // hardcoding urls? not a good idea, use {% url 'url_name' %}
        data : {
            name : $('#name').val(),
            type : $('#type').val(),
            csrfmiddlewaretoken: $('input[name="csrfmiddlewaretoken"]').val() // No traling comma
        },
        sucess:function(){}
    });
});

Now fix your template:

<form id="new_user_form">
    {% csrf_token %}  // add csrf token
    <input type="text" id="name" placeholder="Name" name="name" value="">  // add name
    <select class="" name="skill_type" id="type">
      <option value="1">Developer</option>
      <option value="2">Network</option>
      <option value="3">System</option>
      <option value="4">Database Analysis</option>
    </select>
    <input type="submit" value="submit">  // submit doesn't require name attribute
</form>

Name of the input elements from html is used on backed to get POST data, so in your view:

def create_skill(request):
    if request.method == 'POST':
        name = request.POST['name']
        type = request.POST['skill_type']  # name for select in your html is 'skill_type' so use that

        skill = Skill(skill_name=name,skill_type=type)
        skill.save()

    return HttpResponse('') # Empty HttpResponse doesn't makes much sense, also for ajax I would recommend JsonResponse