PHP/Javascript ajax call - get old data before onchange function

Question

I have an select input field, and i have an onchange function. The table shows the value on the selected value, if nothing is selected, it should show all data. I want to know if it possible to get the value of that select field before the onchange happens? So, the value before the change.

I looked on the internet, but nothing helps.

This is my current code:

HTML

<form action="#" method="get">
     <div class="form-group" style="max-width: 300px; width: 98%;">
          <select name="status" id="status" class="form-control" onchange="getProjectsByStatus(this.value)">
               <option value="">Select a status</option>
               <?php foreach ($status as $stat) { ?>
                    <option value="<?php echo $stat['status_id']; ?>"><?php echo $stat['status']; ?></option>
               <?php } ?>
          </select>
     </div>
</form>

Javasscript

function getProjectByStatus(value) {
     var current = document.getElementById('project-status').value;

     if (value == "") {
          document.getElementById('project-status').innerText = this.current;
          return;
     } else {
          var xmlhttp = new XMLHttpRequest();
          xmlhttp.onreadystatechange = function() {
               if (this.readyState == 4 && this.status == 200) {
                    document.getElementById('project-status').innerHTML = this.responseText;
               }
          };

          xmlhttp.open('GET', 'getProjectsByStatus.php?status='+value, true);
          xmlhttp.send();
     }
}

before the `select` menu value is changed there is, quite possibly, nothing happening so I presume you want to know the value that was previously selected prior to the change event? Create a global variable, update it `onchange` but capture previous value before your `getProjectsByStatus` does the ajax request? — Professor Abronsius, Jun 06 '20 at 17:43
Does this answer your question? [Getting value of select (dropdown) before change](https://stackoverflow.com/questions/4076770/getting-value-of-select-dropdown-before-change) — RST, Jun 06 '20 at 17:47
Does this answer your question? https://stackoverflow.com/questions/4076770/getting-value-of-select-dropdown-before-change — smartdroid, Jun 06 '20 at 17:51

score 0 · Answer 1 · answered Jun 06 '20 at 18:41

I would recommend, not to use html attributes like 'onchange'. Functions, used by those attributes must be in the global namespace. This should be prevented. Instead, you should register the event from your javascript code. The following example uses jquery. The code would be different, if you use vanilla js or another framework.

$(function() {
    var $status = $('#status');

    var previousValue = $status.val();

    $status.change(function() {
    var newValue = $status.val();
    // here your logic
    });
});

With such approach, you can store the initial state of the input and access it, if the value of the select field is changed. Additionally you prevent your app from writing into the global namespace.

PHP/Javascript ajax call - get old data before onchange function

1 Answers1