Передайте элемент select в json

Как сделать так, чтобы он передавал выбранный элемент в javascript.

У меня получилось сделать так, что он отображается для выбора, но при сохранении он не проходит.

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)

Я попробовал все, но можно сказать, что я новичок в этой части передачи опции select в javascript.

В остальном дата и время работают нормально.

Вернуться на верх