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;

При этом вам даже не нужно будет передавать имя формы, просто идентификатор поля, которое вы хотите обновить.

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

<?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

Это может быть поздний ответ, но он определенно будет полезен людям, у которых такой вопрос возникнет позже.

---

Лучшим вариантом является использование prototype.js, доступного по адресу http://www.prototypejs.org/api/ajax/updater. Это было бы так же просто, как

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

Это позаботится о том, что вы хотите сделать. Для любого требования обработки ошибок, пожалуйста, просмотрите всю документацию API, которая проста.

---

Надеюсь, это поможет!