Ajax is not sending data to django views

I have wrote the required things only. I am newbie so please ignore the question quality :).

My Html ---

<div class="form-group row pt-3 d-flex justify-content-center">
            <div class="col-sm-10 d-flex justify-content-center">
                <button id="submit_pic" style="width: 70%;" type=""
                    class="btn btn-primary">Combine</button>
                <script>

                    $("#submit_pic").submit(function (e) {
                        e.preventDefault();
                        var csrfToken = $("input[name='csrfmiddlewaretoken']");
                        
                        $.ajax({
                            url: "{% url 'make_combine' %}",
                                //url: "/make_combine",
                            type: "POST", //-------here is problem-------
                            dataType: "json",
                            cache: true,
                            headers: {'csrfmiddlewaretoken': csrfToken.val()},
                            data: {"for_combine": response_send },
        
                            //"success": function (result) {
                            //    console.log(data);
                            //},
                        });
                        return false;
                    });

                    
                </script>
            </div>
         </div>

django views.py --

import json
def make_combine(request):
      combine_data7 = request.POST.get("for_combine")

I have tried a lot of tricks available on internet as well as on StackOverflow, but still getting this error.It tells that combine_data7 is NoneType ----

    AttributeError at /make_combine
    'NoneType' object has no attribute 'split'

Thanks Mam/Sir.

submit_pic should be inside the form id not inside button id. Try the below code, it'll work 100%. Also, giving enctype="multipart/form-data" attribute inside form is a good practice.

<div class="form-group row pt-3 d-flex justify-content-center">
    <form id='submit_pic' enctype="multipart/form-data">
        <div class="col-sm-10 d-flex justify-content-center">
            <button style="width: 70%;" type="" class="btn btn-primary">Combine</button>
        </div>
    </form>
</div>
<script>
    $("#submit_pic").on('submit', function (event) {
        event.preventDefault();
        var csrfToken = $("input[name=csrfmiddlewaretoken]").val();
        console.log(`Error ye raha === ${response_send}`)
        $.ajax({
            url: "{% url 'make_combine' %}",
            //url: "/make_combine",
            type: "post", //-------here is problem-------
            dataType: "json",
            cache: true,
            headers: {
                'csrfmiddlewaretoken': csrfToken
            },
            data: {
                "for_combine": response_send
            },

            //"success": function (result) {
            //    console.log(data);
            //},
        });
        return false;
    });
</script>