使用XMLHTTPRequest根据php响应更改变量

Question

I'm trying to write a function that removes an element from a select box but only if the element isn't being used for something else. For example, if the select box has a list of student names, it checks if the student name is being used somewhere (or stored in a database) first. The check script simply echos "true" or "false" depending on if the name is in use. If the name isn't used anymore, then it proceeds to remove it. Otherwise, it alerts you.

function removeListItem(selectBox, value)
{
  var removed = 0;
  for (var x = 0; x < selectBox.options.length; x++) {
    if (selectBox.options[x].value == value) {
      var formdata = new FormData();
      var check = "false";
      formdata.append('number', value);
      var ajax = new XMLHttpRequest();
      ajax.open("POST", "check.php");
      ajax.send(formdata);
      ajax.onreadystatechange = function() {
        if (ajax.readyState == 4 && ajax.status == 200) {
          check = ajax.reponseText;
          if (check == "true") {
            alert("You have selected a number in use!");
          }
        }
      }
      if (check == "false") {
        selectBox.remove(x);
        removed = 1;
      }
    }
  }
  return removed;
}

The problem is that it pretty much never runs the check (to my observation), so an alert is never issued when I'm trying to remove something I shouldn't.

I think this has something to do with synchronous vs. asynchronous javascript, so I was wondering what I should do in order for me to get the desired functionality.

I want to return removed because it is being added to a counter when I call removeListItem. I want a counter because the selectBox allows for multiple removals at the same time, so I'm keeping track of each removal.

Answer 1

Yes, you are right. Try to move removing dom element inside onreadystatechange callback.

And your function should return promise to work with async request. Because function call will be finished before XMLHttpRequest.

function removeListItem(selectBox, value)
  {
      var promise = new Promise(function(resolve, reject) {
        var removed = 0;
        for (var x = 0; x < selectBox.options.length; x++)
        {
          if(selectBox.options[x].value == value)
          {
            var formdata = new FormData();
            var check = "false";
            formdata.append('number', value);
            var ajax = new XMLHttpRequest();
            ajax.open("POST", "check.php");
            ajax.send(formdata);
            ajax.onreadystatechange = function() 
            {
              if (ajax.readyState == 4 && ajax.status == 200) 
              {
                check = ajax.reponseText;
                if(check == "true")
                {
                  alert("You have selected a number in use!");
                  reject();
                } 
                else 
                {
                  selectBox.remove(x);
                  removed = 1;
                  resolve(removed);    
                }
              }
            }
          }
        }
      });

      return promise;
  }

to use this function, call

removeListItem(selectBox, 1).then(function(removed){ 
  // removed successful
}).catch(function() {
  // doesn't removed
});