2009-03-01 4 views
0

Эй, я просмотрел учебник W3 по AJAX, и я решил создать функцию javascript, которая заполнила бы поле формы, основанное на ответе страницы. Я взял все свои функции и попытался создать ниже.Функция AJAX для заполнения поля в форме?

Может ли кто-нибудь понять, почему это не работает?

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> 

ответ

2

Это неправильно:

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

Вы могли бы хотеть попробовать:

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

С, что вы выиграли 't даже нужно передать имя формы, только идентификатор поля вы хотите обновить.

+0

Благодаря человеку, он теперь работает. – Sam152

1

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


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

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

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


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

+0

Есть определенные плюсы и минусы использования таких фреймворков, и все зависит от того, что вы делаете. Я посмотрел eQuery ect, но я тоже посмотрю на это. Хороший ответ, +1. – Sam152

1

Я сделал это, и это работает отлично ... надеюсь, что это поможет ..

<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;?> 
Смежные вопросы