How to update a dropdown onchange of another dropdown and save it using AJAX and 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...

that's alot of code for a simple drop_down_list. don't re-invent the wheel. Set up a service that returns the array to populate the new select. Then just use AJAX to bring that array (just a json object, don't fret), and insert it in a straight forward manner. no need to use XHR, when you have other things (like $http in angular or $.ajax(...) in JQuery. — LongChalk, May 23 '19 at 12:46
@LongChalk, I appreciate your response. I will spend some more time reworking this and see what I can come up with. Thank you. — PortyR, May 23 '19 at 12:52
Possible duplicate of https://stackoverflow.com/questions/27895772/loading-options-to-select-using-jquery — LongChalk, May 23 '19 at 12:57
@LongChalk, right, but I can't use jQuery. The page uses MooTools and I've been told they clash. — PortyR, May 23 '19 at 12:58
Why you are not using jquery. There is very easy way to populate dropdown using ajax. https://stackoverflow.com/questions/19728666/drop-down-box-dependent-on-the-option-selected-in-another-drop-down-box — Dipti, May 23 '19 at 14:07
@Dipti, I don't know if you posted your comment after mine, but the site uses MooTools and I was told that MooTools and jQuery clash and you can't use them together. — PortyR, May 26 '19 at 06:11

score 0 · Accepted Answer · answered May 26 '19 at 13:43

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>

How to update a dropdown onchange of another dropdown and save it using AJAX and JavaScript

1 Answers1