AJAX不更新文本框的值

Question

I want to update a value of a input text box via AJAX. I cannot make it work althouth almost the same AJAX code works fine for 'text' only. The same behavior for ff & chrome.

the only difference is

doesn't work ---> document.getElementById("f1").value=revision;  
works fine -----> document.getElementById("f2").innerHTML=revision;
works fine too -> onClick="javascript:document.getElementById('f1').value+='B';" 

sample code:

<input type="text" name="f1" id="f1"> 
<input type="button" value="inline function"  onClick="javascript:document.getElementById('f1').value+='B';">
<input type="button" value="AJAX Button" onClick="get_revision2('trunk')">

and the function

    function get_revision2(revision)
    {
      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()
        {
        document.getElementById("f1").value=revision;

        if (xmlhttp.readyState==4 && xmlhttp.status==200)
          {
          document.getElementById("f1").value=xmlhttp.responseText;

          }
        }
      xmlhttp.open("GET","http://radek:4567/svn_get_revision?code_base="+revision+"&t=" + Math.random(),true);
      xmlhttp.send();
    } 

the AJAX code doesn't update the value of the text box. The inline function does.

But for text (not the input text box) even AJAX works fine.

<DIV id="f2">revision</div>
<input type="button" value="inline function" onClick="javascript:document.getElementById('f2').innerHTML+='B';">
<input type="button" value="AJAX" onClick="get_revision3('3.0')">

and the function

    function get_revision3(revision)
    {
      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()
        {
        document.getElementById("f2").innerHTML=revision;

        if (xmlhttp.readyState==4 && xmlhttp.status==200)
          {
          document.getElementById("f2").innerHTML=xmlhttp.responseText;

          }
        }
      xmlhttp.open("GET","http://radek:4567/svn_get_revision?code_base="+revision+"&t=" + Math.random(),true);
      xmlhttp.send();
    }

Answer 1

I wasn't able to reproduce your error. Check out http://jsbin.com/ahusa4/3/edit

Are you sure you don't have another element with id "f1"? maybe the common: <form id='f1' name='f1'>

Answer 2

Have you checked the JavaScript console for errors? Is it possible you are getting an Access-Control-Allow-Origin error when the script is executing the AJAX call?

If the web page you are running the XMLHttpRequest from is not on the same domain as the URL of the AJAX request then the browser is stopping the request. Cross-site HTTP requests are restricted.