Ajax返回值显示在div上，但不显示在输入字段上

Question

嗨，我有AJAX代码，它可以完美地更改div的内部HTML，但它不适用于输入文本字段。

这是AJAX代码：

<script>
function hallprice(str) {
  if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
  } else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  document.getElementById("hallcharges").innerHTML = xmlhttp.responseText;
}
  }
  xmlhttp.open("GET","<?php echo base_url();?>admin/hallreservation/get_hallprice?q="+str,true);
  xmlhttp.send();
}
</script>

<div id="hallcharges"></div>
<input id="hallcharges" name="hallcharges" type='text'  class="form-control" />

如何使用responseText更新文本字段？

Answer 1

您有相同的div和input ID，请将div ID更改为divHallcharges

如果要在输入中显示输出，请使用document.getElementById("hallcharges").value 而不是document.getElementById("hallcharges").innerHTML

<div id="divHallcharges"></div>
<input id="hallcharges" name="hallcharges" type='text'  class="form-control" />
<script>
function hallprice(str) {
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
           document.getElementById("hallcharges").value = xmlhttp.responseText;
        }
    }
     xmlhttp.open("GET","<?php echo base_url();?>admin/hallreservation/get_hallprice?q="+str,true);
    xmlhttp.send();
}

Answer 2

Inputfields不接受innerHTML，您必须设置它的值。

document.getElementById("hallcharges").value = xmlhttp.responseText;

我可能还提到，如果您希望两个字段（在本例中，一个div和一个输入字段）具有相同的ID，则应该使用类，因为ID是唯一的，并且应该在每个页面上只出现一次。

Answer 3

尝试将其添加到输入值，而不是innerhtml。

试试这个。。

document.getElementById("hallcharges").value = xmlhttp.responseText;