[thelist] ajax and form population

Dan McCullough dan.mccullough at gmail.com
Tue Dec 13 12:11:56 CST 2005


I've been playing around with different parts of ajax and it seems
quite easy, however I am still having some difficultly when I get to
getting the information back.  Now due to some errors that I had I was
able to see that the fields that I told it to fill were filling with
the error message, some stupid small stuff, but once those cleared up
I am to the point where either the php code isnt working properly or
the request is dying somewhere.

++++++++++++++++++++++ ajax.js +++++++++++++++++++++++++++++++
var xmlHttp = false;

if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
  xmlHttp = new XMLHttpRequest();
}

function checkEmail() {
  // Get the city and state from the web form
  var email = document.getElementById("email").value;
  alert('email: ' + email);
  // Only go on if there are values for both fields
  if ((email == null) || (email == "")) return;
  // Build the URL to connect to
  var url = "functions.php?do=getUser&email=" + escape(email);
  alert('escape(email): ' + escape(email));
  // Open a connection to the server
  xmlHttp.open("GET", url, true);
  // Setup a function for the server to run when it's done
  xmlHttp.onreadystatechange = updatePage;
  // Send the request
  xmlHttp.send(null);
}

function updatePage() {
  if (xmlHttp.readyState == 4) {
    var response = xmlHttp.responseText;
	alert('xmlHttp.responseText: ' + xmlHttp.responseText);
  	document.getElementById("billfname").value = response;
	//document.getElementById("billlname").value = response;
	//document.getElementById("billadd1").value = response;
	alert('response: ' + response);
  }
}
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

++++++++++++++++++++ functions.php +++++++++++++++++++++++++++++
<?php
include("includes/MySQL.inc.php");

function array_trim ($array, $index){
    if(is_array($array)){
     unset($array[$index]);
     array_unshift($array, array_shift($array));
     return $array;
    }else{
     return false;
    }
}

function connect(){
  $cnnDB = MySQL_OpenConnection();
  return $cnnDB;
}

function getUser (&$cnnDB, $email) {
	$SQL = "select * from xcart_customers where email='$email'";
    $result = MySQL_SubmitQuery($SQL,$cnnDB);
    $row = mysql_fetch_assoc($result);
	$billfname=$row['firstname'];
	//$billlname=$row['lastname'];
	//$billadd1=$row['b_address'];
	print $billfname;
	return $billfname;
}

switch($_REQUEST['do']) {

case 'getUser':
  $cnnDB = connect();
  getUser($cnnDB,$email);
  MySQL_CloseConnection($cnnDB);
  break;
  print $billfname;
  }

  ?>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

++++++++++++++++++++++++ index.html ++++++++++++++++++++++++++++
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
	<script type='text/javascript' src='js/ajax.js'></script>
</head>

<body>

<table cellpadding="0" cellspacing="0" width="754">
	<tr>
		<td>
			<div align="center"><form name="oes_form" action="" method="POST">
			<table cellpadding="2" cellspacing="2" border="2">
				<tr>
					<td bgcolor="#6699ff">Email Address:&nbsp;&nbsp;</td>
					<td><input type="text" name="email" id="email" tabindex="1"
onBlur="checkEmail();" /></td>
					<td>&nbsp;&nbsp;</td>
				</tr>
				<tr>
					<td colspan="3" bgcolor="#6699ff"><center>Billing Information</center></td>
				</tr>
				<tr>
					<td bgcolor="#6699ff"><b>*</b>First Name:&nbsp;&nbsp;</td>
					<td><input type="text" name="billfname" id="billfname" tabindex="2"></td>
					<td>&nbsp;&nbsp;</td>
				</tr>
				<tr>
					<td bgcolor="#6699ff"><b>*</b>Last Name:&nbsp;&nbsp;</td>
					<td><input type="text" name="billlname" id="billlname" tabindex="3"></td>
					<td>&nbsp;&nbsp;</td>
				</tr>

...

</td>
	</tr>
</table>

</body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Hopefully this is not boring anyone, but I havent been able to find a
straight foward ajax/php form updating example I've only been able to
find bits and pieces.  So any help or pointing out errors would be a
great appreciation.


On 12/13/05, EasyListBox.com Peter Brunone <peter at easylistbox.com> wrote:
> Hi Dan,
>
>    If you're already getting the information back to the browser, you're 90% there.  I would suggest sending multiple values back as a delimited list of some kind -- pipe-delimited, or if you want to be fancy, you can use tags to delimit, e.g. <field1>firstvalue</field1><field2>secondvalue</field2>... or any combination thereof that you feel will be most useful to you.
>
>    Then you just take the ResponseText from the request, split it up, and start assigning it to form fields.  Piece of cake... unless I've misunderstood the problem, in which case smack me and we'll try again.
>
> Cheers,
>
> Peter
>
>  From: Dan McCullough dan.mccullough at gmail.com
>
> I'm working on a small app that will take the users email and check
> for an address in the database. I can populate the information to a
> div and outputting it. I'm not sure how to do it and populate a form
> and all the fields. Anyone have some time to help?
> --
>
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
>
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !
>



More information about the thelist mailing list