如何更新另一个下拉列表的下拉列表并使用AJAX和JavaScript保存它

Question

I have never done an AJAX call before...

I have a page where there are two dropdown fields, one of who to send a transcript to and the other is the type of hearing. I added onchange functionality to the type of hearing to make the send transcript to field change, depending on what was selected.

The problem is that the person could choose another option before the job is saved, so if you read the value of the send to dropdown, it doesn't change in code, even though the display changes. I was thinking that maybe I need to do an AJAX call to save the dropdown before I read it, but I'm stuck. I've never used AJAX before.

There are a lot of examples of reading from a file or reading to a file and using jQuery, but I need to use JavaScript and write to a database.

This is the field with the onchange event:

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

This is the field that should change:

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

And this is the 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>

The test.txt is obviously not correct. I am stumped as to what to put in there to write to the database. Would I put a call to a function ( $this->functioName )? Everything else works perfectly.

I don't know if there's another way to read what's displayed on the webpage, not what's in the code...

Answer 1

If anyone is interested, I ended up doing the following and got it to work:

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

And:

        <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>