时间戳

首页 > 解决方案 > PHP/Javascript ajax 调用 - 在 onchange 函数之前获取旧数据

javascript - PHP/Javascript ajax 调用 - 在 onchange 函数之前获取旧数据

问题描述

我有一个选择输入字段，并且我有一个 onchange 功能。该表显示所选值的值，如果未选择任何内容，则应显示所有数据。我想知道是否有可能在 onchange 发生之前获取该选择字段的值？因此，更改前的值。

我在互联网上查看，但没有任何帮助。

这是我当前的代码：

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>

Javascript

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();
     }
}

标签： javascriptphphtml

解决方案

我建议不要使用像'onchange'这样的html属性。这些属性使用的函数必须在全局命名空间中。应该防止这种情况。相反，您应该从您的 javascript 代码中注册该事件。以下示例使用 jquery。如果您使用 vanilla js 或其他框架，代码会有所不同。

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

    var previousValue = $status.val();

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

使用这种方法，如果选择字段的值发生更改，您可以存储输入的初始状态并访问它。此外，您会阻止您的应用程序写入全局命名空间。

推荐阅读