Pass select element to json

How do I make it pass the selected element to javascript.

I managed to make it appear to select but when saving it is not going.

Appedit.html

<div class="modal fade edit-modal1" id="modaledit1" tabindex="-1" role="dialog" aria-labelledby="modaledit1label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="modaledit1label">Update Appointment</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <form id="updateappointment" action="">
            <div class="modal-body">
              {% csrf_token %}
                <label for="doc" >Doctor</label>
                <select class="select_doctor" name="select_doctor">
                {% for user in users %}
                    <option id="form-doc" value="{{user.id}}" name="formDoc" class="form-control">{{user.username}}</option>
                {% endfor %}
                <label for="date" >Date</label>
                <input class="form-control" id="form-date" type="date" name="formDate"/>
                <label for="time">Time</label>
                <input class="form-control" id="form-time" type="time" name="formTime"/>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="saveappointment">Save</button>
            </div>
          </form>
        </div>
    </div>
  </div>

script.js

function updatepatielement(element){
    element.addEventListener("click", function(event) {
        event.preventDefault();
        $('#modaledit1').on('show.bs.modal', () => {
            var saveButton = document.querySelector(".modal-footer > #saveappointment");
            tr_id1 = null;
            date = null;
            time = null;

            id = element.getAttribute("idappointment");

            if (id) {
                
                tr_id1 = "#appointment" + id;
                doc1 = $(tr_id1).find(`#DocName${id}`);
                date1 = $(tr_id1).find(`#AppoiDate${id}`);
                time1 = $(tr_id1).find(`#AppoiTime${id}`);
                $('#form-doc').val(doc1);
                $('#form-date').val(date1);
                $('#form-time').val(time1);
            }
            saveButton.addEventListener("click", () => {
                var docselect = $('option[name="formDoc"]').val();
                var dateInput = $('input[name="formDate"]').val();
                var timelInput = $('input[name="formTime"]').val();
                console.log(docselect)
                $('#modaledit1').modal('hide');
                fetch('/updateappointme/'+ id, {
                    method: "POST",
                    body: JSON.stringify({
                        doctor: docselect,
                        date: dateInput,
                        time: timelInput,
                    }),
                })
                .then(async(response) => {
                    if (response.status === 201) {
                        document.querySelector(`#DocName${id}`).innerHTML = docselect;
                        document.querySelector(`#AppoiDate${id}`).innerHTML = dateInput;
                        document.querySelector(`#AppoiTime${id}`).innerHTML = timelInput;
                    }
                })
                return false;
            });
            event.stopPropagation();
        });
    });
}

views.py

@login_required
def updateappointme(request, appointment_id = 0):
    try:
        appointment = Appointment.objects.get(id = appointment_id)
    except Patient.DoesNotExist:
        return JsonResponse({"error": "Patient not found."}, status=404)
    if request.method == "POST":
        data = json.loads(request.body)
        appointment.doctor = data["doctor"]
        appointment.date = data["date"]
        appointment.time = data["time"]
        appointment.save()
        return JsonResponse({}, status=201)
    return JsonResponse({ "error": "GET or PUT request required." }, status=400)

I tried everything but, it can be said that I'm kind of new to this part of passing select option in javascript.

Other than that date and time works fine.

Back to Top