Retrieving Date Value and Assigning Date to Django Backend-CodePudding

I am trying to figure out a way to assign a date that I retrieve from the standard html date picker and then assign it to a backend model after a button of type 'submit' is clicked. I am relatively new to javascript so please bare with me. Attached are all the files that I have been working on. Please let me know if there is anything else you may need from me to help me with my question!

vieworders.html

<div >
    <label for="start">Drop Off Date Selector:</label>
    <br>
    <input type="date" id="dropOffDate"
        min="2022-01-01" max="3000-12-31">
        <button type="submit" value="Continue"  id="submit-drop-off-date">Submit Drop Off Date</button>
</div>

<script type="text/javascript">
    var date = document.getElementById("dropOffDate");

    date.addEventListener('submit', function(e){
        e.preventDefault()
        submitDropOffData()
        console.log("Drop off data submitted...")
    })
        function submitDropOffData() {
            var dropOffDateInformation = {
                'dropOffDate':null,
            }

            dropoffDate.date = date.value

            var url = "/process_drop_off_date/"
            fetch(url, {
                method:'POST',
                headers:{
                    'Content-Type':'application/json',
                    'X-CSRFToken':csrftoken,
                }, 
                body:JSON.stringify({'dropoffDate':dropOffDateInformation}),
                
            })
        .then((response) => response.json())
            .then((data) => {
                console.log('Drop off date has been submitted...')
                alert('Drop off date submitted');
                window.location.href = "{% url 'home' %}"
                })
        }
</script>

views.py

def processDropOffDate(request):
    data = json.loads(request.body)

    DropOffDate.objects.create(
        DropOffDate=data['dropoffDate']['date'],
    )

    return JsonResponse('Drop off date submitted...', safe=False)

models.py

class DropOffDate(models.Model):
    DropOffDate = models.DateField()

    def __str__(self):
        return str(self.DropOffDate)

CodePudding user response：

You can simply use the following code.

ajax.html

<div >
    <label for="start">Drop Off Date Selector:</label>
    <br>
    <input type="date" id="dropOffDate"
           min="2022-01-01" max="3000-12-31">
    <button type="submit" value="Continue"  id="submit-drop-off-date">Submit Drop Off
        Date
    </button>
</div>


<script type="text/javascript">
    $(document).on('click', '#submit-drop-off-date', function (e) {
        e.preventDefault();
        let date = $('#dropOffDate').val();
        console.log(date);
        $.ajax({
            type: 'POST',
            url: "{% url 'process_drop_off_date' %}",
            async: true,
            data: {
                date: date,
                csrfmiddlewaretoken: '{{ csrf_token }}'
            },
            success: function (values) {
                console.log("Date Has Been Submitted");
            },
            error: function () {
                console.log("Some Error Occured");
            },
        });

    })
</script>

urls.py

from django.urls import path
from . import views


urlpatterns = [
    path('process_drop_off_date/', views.process_drop_off_date, name="process_drop_off_date"),
]

views.py

def process_drop_off_date(request):
    date = request.POST.get('date')
    print(date)
    # Do, Whatever You Want, Here...
    return render(request, 'ajax.html')

CodePudding user response：

Error came from ID error, posting new question for further support