AJAX函數來填充表單中的字段？

Question

嘿，我正在瀏覽W3的AJAX教程，因此決定制作一個javascript函數，該函數將根據頁面的響應填充表單字段。 我采用了它們的所有功能，並嘗試創建以下功能。

誰能看到它為什么不起作用？

function populateForm(myForm,formField,PageFrom,infoToSend)
{
var xmlHttp;
try
  {
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    try
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch (e)
      {
      //alert("Your browser does not support AJAX!");
      return false;
      }
    }
  }
  xmlHttp.onreadystatechange=function()
    {
    if(xmlHttp.readyState==4)
      {
      document.myForm.formField.value=xmlHttp.responseText;
      }
    }
 var url=PageFrom;
url=url+"?q="+infoToSend;

  xmlHttp.open("GET",url,true);
  xmlHttp.send(null);
  }

這就是我所說的：

<form id="qwert" name="qwert">

<input id="qwer" name="qwer" type="text" onkeyup="populateForm('qwert','qwerty','echo.php',this.value);">
<input id="qwerty" name="qwerty" type="text">

</form>

Answer 1

這是錯誤的：

document.myForm.formField.value=xmlHttp.responseText;

您可能要嘗試：

document.getElementById(formField).value = xmlHttp.responseText;

這樣，您甚至不需要傳遞表單名稱，只需傳遞要更新的字段的ID。

Answer 2

我已經做到了，而且效果很好...希望能對您有所幫助。

<script>
function CreateXmlHttpObject() { //function to return the xml http object
    var xmlhttp=false;  
    try{
        xmlhttp=new XMLHttpRequest();//creates a new ajax object
    }
    catch(e)    {       
        try{            
            xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");//this is for IE browser
        }
        catch(e){
            try{
            req = new ActiveXObject("Msxml2.XMLHTTP");//this is for IE browser
            }
            catch(e1){
                xmlhttp=false;//error creating object
            }
        }
    }

    return xmlhttp;
} 
function getDataDB(brand_name)
{
    var http = CreateXmlHttpObject(); // function to get xmlhttp object
    var strURL = "ajax/get_brand_name_data.php?brand_name="+brand_name;
    if (http){
        http.onreadystatechange = function(){
            if (http.readyState == 4) { //data is retrieved from server
                if (http.status == 200) { // which reprents ok status                    
                    var results = http.responseText.split("|");
                    document.getElementById('brand_name').value = results[0];
                    document.getElementById('seq').value = results[1];
                    if(results[2]=="Y")
                        document.getElementById('cstatus').checked = true;
                    else
                        document.getElementById('cstatus').checked = false; 
                    document.getElementById('edate').value = results[3];
                    document.getElementById('user_name').value = results[4];
                    document.getElementById('details').value = results[5];      
                }
                else
                { 
                    alert("There was a problem while using XMLHTTP:\n");
                }
            }            
        }        
        http.open("GET", strURL, true); //open url using get method
        http.send(null);//send the results
    }
}</script>

<a href="#"  onClick="$('#tabs').tabs('select', 0); getDataDB('<?=$row['brand_name'];?>'); return false;" class="red">EDIT </a>

腓

<?php
$dbhost = 'localhost';
$dbuser = 'username';
$dbpass = 'password';
$dbname = 'database';

$conn = mysql_connect($dbhost, $dbuser, $dbpass);
mysql_select_db($dbname);   
$q = strtolower($_GET["brand_name"]);
if (!$q) return;

$sql = "SELECT * FROM setup_brand WHERE brand_name = '$q'";
$rw = mysql_fetch_array(mysql_query($sql));
$brand_name=($rw['brand_name']);
$seq=($rw['seq']);
$cstatus=($rw['cstatus']);
$edate=($rw['edate']);
$user_name=($rw['user_name']);
$details=($rw['details']);
echo "".$brand_name . "|" . $seq . "|" . $cstatus . "|" . $edate . "|" . $user_name . "|" . $details;?>

Answer 3

這可能是一個較晚的答復，但對於以后再有這樣問題的人們肯定會有所幫助。

---

最好的選擇是使用http://www.prototypejs.org/api/ajax/updater上提供的prototype.js。 就這么簡單

new Ajax.Updater('qwerty',url,{asynchronous:true});

這將照顧您想要做什么。 對於任何錯誤處理要求，請仔細閱讀整個API文檔。

---

希望這可以幫助！