HTTP 500 error from jQuery AJAX call when passing html dates into django model

i'm working with a date selector form in html (see pic below) and i'd like to pass this data into my django model.

i've successfully passed in form data to my django model (from an option class), with similar code. however, when passing in the selected dates, i get a XHR POST http://127.0.0.1:1234/ error.

i'm quite new to AJAX, but i've heard that i should stay away from creating XHR objects. have i created one here, and how do i avoid creating them? thanks!

<div class="container">
                <div class="row">
                    <div class="col-9">
                        <div class="date">
                            <br>
                            <h3>Select to view distance and orders by timeframe</h3>
                            <form method="POST">
                                <label for="start">Start date:</label>
                                <input type="date" id="start" name="trip-start" value="2018-12-01" min="2018-12-01"
                                    max="2019-06-30">

                                <label for="end">End date:</label>
                                <input type="date" id="end" name="trip-end" value="2018-12-01" min="2018-12-01"
                                    max="2019-07-01">
                                <br>
                                <br>
                            </form>
                        </div>
                        <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
                        <script>
                            $("#start").change(function () { // calling select id
                                const start_date = $(this).val();  // get the selected subject ID from the HTML dropdown list 
                                $.ajax({                       // initialize an AJAX request
                                    type: "POST",
                                    url: '',
                                    data: {
                                        'start_date': start_date,       // add the order id to the POST parameters
                                        'csrfmiddlewaretoken': "{{csrf_token}}",
                                    },
                                    success: function (data) {   // `data` is from `homepage` view function
                                        console.log("this block of code isn't useless!!")
                                        console.log(data.start_date)
                                    }
                                });
                            });
                            $("#end").change(function () { // calling select id
                                const end_date = $(this).val();  // get the selected subject ID from the HTML dropdown list 
                                $.ajax({                       // initialize an AJAX request
                                    type: "POST",
                                    url: '',
                                    data: {
                                        'end_date': end_date,       // add the order id to the POST parameters
                                        'csrfmiddlewaretoken': "{{csrf_token}}",
                                    },
                                    success: function (data) {   // `data` is from `homepage` view function
                                        console.log("this block of code isn't useless!!")
                                        console.log(data.end_date)
                                    }
                                });
                            });
                        </script>
                    </div>