Using XMLHttpRequest for input field as value

Question

can someone tell me how to make JavaScript put the responseText also in an input field and not only in a span? I want when I enter a postal code, that automatically in the field next to it the city is added. This is my code:

function plzsuche(inhalt) {
  if (inhalt == "") {
    document.getElementById("city").innerHTML = "no Place";
    return;
  }
  
  if (window.XMLHttpRequest) {
    // AJAX nutzen mit IE7+, Chrome, Firefox, Safari, Opera
    xmlhttp = new XMLHttpRequest();
  } else {
    // AJAX mit IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      if (xmlhttp.responseText != "") {
        document.getElementById("city").innerHTML = xmlhttp.responseText;
      }
    }
  }
  
  xmlhttp.open("POST", "<?=DIR?>ausgang/plzsearch?q=" + inhalt, true);
  xmlhttp.send();

}

<div class="col-md-5">
  <input type="number" maxlength="5" name="ZIP" id="ZIP" class="form-control" placeholder="ZIP" onkeyup="plzsuche(this.value)">
</div>

<div class="col-md-7">
  <input type="text" name="place" id="place" class="form-control" value="">
  <span id="city"></span>
</div>

The code works on this way (the span is then below the 'place' input field). But as soon as I use the span as value for the input field nothing comes back.Maybe one of you knows a simple solution.

https://stackoverflow.com/questions/5700471/set-value-of-input-using-javascript-function — dellink, Apr 04 '22 at 07:25
Did you regard the `value` property of `#ZIP` and its `type` while assigning the `responseText`. How did you try to assign the value? — Lain, Apr 04 '22 at 07:25
This code comes straight out of the 2000's... you can safely ditch all IE+ legacy code and replace all this old `XMLHttpRequest`, `ActiveXObject`, `onreadystatechange`, `xmlhttp.readyState`, `xmlhttp.status` literature with a line or two of modern code : `await fetch(url)`... — Jeremy Thille, Apr 04 '22 at 07:34
@dellink Thanks for the link. Maybe you should search stack more accurately first before helplessly asking a question again. Have a nice day to you! — hallMX20, Apr 04 '22 at 07:35

score 0 · Answer 1 · answered Apr 04 '22 at 07:40

The solution is actually relatively simple if you had searched Stack a bit. Thanks for the link @dellink. Here is the slightly modified code for JS, which finally achieved the desired result:

<script>
    function  plzsuche(inhalt){
        if (inhalt == "")
        {
            document.getElementById('ZIP').value = 'No locations found';
        }
        if (window.XMLHttpRequest)
        {
            // AJAX nutzen mit IE7+, Chrome, Firefox, Safari, Opera
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            // AJAX mit IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                if (xmlhttp.responseText != ""){
                    document.getElementById('ZIP').value = xmlhttp.responseText;
                }
            }
        }
        xmlhttp.open("POST","<?=DIR?>ausgang/plzsearch?q="+inhalt,true);
        xmlhttp.send();

    }
</script>

Using XMLHttpRequest for input field as value

1 Answers1