Как обновить выпадающий список на замену другого и сохранить его с помощью AJAX и JavaScript

Question

Я никогда не делал AJAX-вызовы раньше ...

У меня есть страница с двумя выпадающими полями, одно из которых отправляет стенограмму, а другое - тип слуха.Я добавил функциональность onchange к типу слушания, чтобы сделать изменения в тексте для отправки в поле, в зависимости от того, что было выбрано.

Проблема в том, что человек мог выбрать другой вариант перед сохранением задания, поэтому, если вы прочитаетезначение раскрывающегося списка не изменяется в коде, даже если меняется дисплей.Я думал, что, возможно, мне нужно сделать AJAX-вызов, чтобы сохранить раскрывающийся список, прежде чем я его прочитаю, но я застрял.Я никогда раньше не использовал AJAX.

Есть много примеров чтения из файла или чтения в файл и использования jQuery, но мне нужно использовать JavaScript и записать в базу данных.

Это поле с событием onchange:

 echo form_label('Type:', 'hearingtype') . form_dropdown('hearingtype[r]', $hearingtypes, isset($job['hearingtype']) ? $job['hearingtype'] : '', array('onchange' => 'changeEmail($(this));')) . '<br />';

Это поле должно измениться:

echo form_label('Send transcript to:', 'emailkey') .
            form_dropdown('emailkey', $operationsemails, isset($job) ? $job['emailkey'] : '', 'id="emailkey"') . '<br />';

А это JavaScript:

<script type="text/javascript">
    function changeEmail(name) {
        let hearingType = name.value.toString();
        let emailkey = document.getElementById('emailkey').innerHTML;
        let xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                if (hearingType == 16) {
                    if (emailkey.indexOf('selected="selected">John Doe') > 0) {
                        // All correct
                    } else {
                        // Change and flash green
                        document.getElementById('emailkey').value = '1';
                        document.getElementById('emailkey').setStyle('background-color', 'lightgreen');
                        setTimeout(function() {
                            document.getElementById('emailkey').setStyle('background-color', 'white');
                        }, 250);
                     }
                   } else {
                      if (emailkey.indexOf('selected="selected">Lisa Black') > 0) {
                          // Correct, do nothing.
                      } else {
                          // Change and flash green
                          document.getElementById('emailkey').value = '0';
                                document.getElementById('emailkey').setStyle('background-color', 'lightgreen');
                                setTimeout(function() {
                                    document.getElementById('emailkey').setStyle('background-color', 'white');
                                }, 250);
                            }
                        }
                    }
                };
                xhttp.open('GET', 'test.txt', true);
                xhttp.send();
            }
        </script>

test.txt явно не корректен.Я поставлен в тупик относительно того, что положить туда, чтобы написать в базу данных.Буду ли я вызывать функцию ($this->functioName)?Все остальное работает отлично.

Я не знаю, есть ли другой способ прочитать то, что отображается на веб-странице, а не то, что в коде ...

Answer 1

Если кому-то интересно, я закончил тем, что сделал следующее и заставил его работать:

 echo form_label('Type:', 'hearingtype') . form_dropdown('hearingtype[r]', $hearingtypes, isset($job['hearingtype']) ? $job['hearingtype'] : '', array('onchange' => 'changeEmail($(this));')) . '<br />';

И:

        <script type="text/javascript">
            function changeEmail(name) {
                let hearingType = name.value.toString();
                if (hearingType === '16') {
                    let x = document.getElementById('emailkey');
                    for (let i = 0; i < x.options.length; i++) {
                        let optionValue = x.options[i].innerHTML;
                        if (optionValue.includes('Janet') > 0) {
                            x.options[i].selected = 'selected';
                            document.getElementById('emailkey').setStyle('background-color', 'lightgreen');
                            setTimeout(function() {
                                document.getElementById('emailkey').setStyle('background-color', 'white');
                            }, 250);
                        }
                    }
                } else {
                    let x = document.getElementById('emailkey');
                    for (let i = 0; i < x.options.length; i++) {
                        let optionValue = x.options[i].innerHTML;
                        if (optionValue.includes('Michelle') > 0) {
                            x.options[i].selected = 'selected';
                            document.getElementById('emailkey').setStyle('background-color', 'lightgreen');
                            setTimeout(function() {
                                document.getElementById('emailkey').setStyle('background-color', 'white');
                            }, 250);
                        }
                    }
                }
            }
        </script>